javascript - 通过 AJAX 提交表单不起作用

Question

我的表单不会通过 AJAX 提交来显示 PHP 页面“myscript.php”的返回。

这是我正在使用的 HTML:

<form name="myform" id="myform" method="post" action="#" enctype="multipart/form-data" accept-charset="utf-8" class="taxonomy-drilldown-dropdowns">

<ul>

    <li>
    <label>Destination:</label>
    <select name="city" id="city">
        <option class="level-0" value="atlanta">Atlanta</option>
        <option class="level-0" value="miami">Miami</option>

    </select>
    </li>

</ul>

<input class="srch_btn" type="button" value="{{submit-text}}" />

</form>

这是页面前面的 JavaScript:

jQuery(document).ready(function($) {
   $('#city').change(function() {
  $(this).parents("form").submit();
   });
$('#myform').submit(function() { 
  $.post(
     'myscript.php',
     $(this).serialize(),
     function(data){
        $("#mydiv").html(data)
     }
  );
  return false;   
   });
});

这是 myscript.php:

<?php
   if ($_POST['city'] == "atlanta") {
  echo "Div contents 1";
   }
   if ($_POST['city'] == "miami") {
  echo "Div contents 2";
   }
?>

提交按钮此时不会响应或尝试访问“myscript.php”文件。感谢帮助。提前致谢!

Answer 1

在这种情况下，最好使用 .closest() 而不是 .parents()。因为 parent 选择器会获取与选择器匹配的所有祖先。

$('#city').change(function() {
  $(this).closest("form").submit();
});

要停止默认操作，请使用 e.preventDefault 而不是 return false

$('#myform').submit(function(e) { 

     e.preventDefault();
     // Your code here
});