使用ajax-jquery和php处理提交按钮

Question

我有以下代码，供学习之用。简而言之，我想通过下拉菜单从数据库中获取一些数据。我的问题是，现在我使用提交按钮进行提交操作。我想要的改进是去掉提交按钮，当下拉列表发生变化时获取信息。

我尝试为第1行和第12行之间的代码创建一个函数，并使用：<body onload="process()">调用它，但它不起作用。然后，我尝试将onchange="this.form.submit()"属性放置到<select>元素，但这也不起作用，因为当不使用ajax时，它像任何正常的提交一样将数据发送到process.php。有人知道解决办法吗？谢谢!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body onload="viewdata()">
    <form action="process.php" method="post" id="form">
        <select name="select" id="select">
            <option value="">Choose</option>
            <option value="1">supervizor</option>
            <option value="2">sef locatie</option>
            <option value="3">muncitor</option>
            <option value="0">toti</option>
        </select><br/>
        <input type="submit" value="Go"/>
    </form>
    <script type="text/javascript">
    var frm = $('#form'); // **LINE 1**
    frm.submit(function (ev) {
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                $('#show').html(data);
            }
        });
        ev.preventDefault();
    });                    // **LINE 12**

    function viewdata(){
        $.ajax({
            type: "GET",
            url: "process.php"
        }).done(function( data ) {
            $('#show').html(data);
        });
    }
    </script>
    <br/><br/>
    <div id="show"></div>
</body>
</html>

Answer 1

您需要将处理绑定到下拉框的更改事件上。

$("#select").on("change", function(ev) {
    // Your ajax processing
    $.ajax({
        type: frm.attr('method'),
        url: frm.attr('action'),
        data: frm.serialize(),
        success: function (data) {
            $('#show').html(data);
        }
    });
    ev.preventDefault();
});