jquery - 使用 Ajax 提交有关下拉列表更改的表单

Question

我有以下内容，它调用另一个文件并根据下拉值吐出输出。它工作正常，但我似乎无法在没有提交按钮的情况下使其正常工作。这是可行的，只是它将自身重定向到具有正确输出的 process.php 。这段代码的重点是在空 div 中显示输出(output)。

$(document).ready(function() {
   $('#dropdown').change( function() {
       $('#myform').submit();
       $.ajax({ // create an AJAX call...
           data: $(this).serialize(), // get the form data
           type: $(this).attr('method'), // GET or POST
           url: $(this).attr('action'), // the file to call
           success: function(response) { // on success..
               $('#output').html(response); // update the DIV
           }
       });
       return false; // cancel original event to prevent form submitting
    });
});


<form id="myform" method=POST action="process.php">
<select id="dropdown" name="dropdown">
    <option value="QU">QU</option>
    <option value="QF">QF</option>
    <option value="QC">QC</option>
</select>
</form>
<div id="output"></div>

Answer 1

如果你想使用ajax那么就不要提交表单，同样在下拉更改事件中this是下拉元素而不是表单。

$(document).ready(function() {
   $('#dropdown').change( function() {
       $.ajax({ // create an AJAX call...
           data: $('#myform').serialize(), // serialize the form
           type: $('#myform').attr('method'), // GET or POST from the form
           url: $('#myform').attr('action'), // the file to call from the form
           success: function(response) { // on success..
               $('#output').html(response); // update the DIV
           }
       });
    });
});