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
           }
       });
    });
});

Answer 2

我认为JQuery加载函数可以在更少的代码中完成您的工作。

$(document).ready(function() {
   $('#dropdown').change( function() {

    $('#output').load('/process.php',{dropdown: $(this).val()});

    });
});


<select id="dropdown" name="dropdown">
    <option value="QU">QU</option>
    <option value="QF">QF</option>
    <option value="QC">QC</option>
</select>

Answer 3

你必须这样做：

这是做什么的：

关于更改下拉列表
使用ajax，因此我们必须使用prevDef()

然后您的ajax调用submits the value和process it to process.php以及response on process.php gets loaded

中的输出#output div

$(document).ready(function() {
  $('#dropdown').change( function() {
       $.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
           }
       });
    });
});

使用Ajax在下拉列表更改时提交表单

3 个答案: