通过 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()。作为父母选择器获取与选择器匹配的所有祖先。

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

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

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

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

Answer 2

在您的 HTML 代码中，我认为您应该将 input type=button 更改为 input type=submit

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

然后，当您单击该按钮时，表单将提交到您的 php 页面。

另外，关于 jQuery 代码中的选择更改事件，我认为您可以尝试以下选择器，因为您的 HTML 中有 name/id 属性。

$('#city').change(function() {
  $('#myform').submit();
});

Answer 3

您的代码的一个问题是它实际上并没有阻止表单被提交。 return false; 在 jQuery 中的工作方式并不像您认为的那样。相反，要停止默认操作，您必须执行类似的操作。

$('#myform').submit(function(event) {
   event.preventDefault();

http://api.jquery.com/event.preventDefault/

最重要的是，如果您不希望表单提交发生，并且您想用您自己的 AJAX 提交替换它，那么您为什么要在这段代码中调用表单提交呢？为什么不直接将 AJAX 放入您的更改代码中？

Answer 4

dqhendricks 是对的——当您可以直接访问 ajax 时，为什么还要使用表单提交？在下面的示例中，我在表单下方添加了一个 div (#responder) 以显示输出。试一试——你会发现它非常有效。

你真的不需要按钮，虽然我把它留在那里，因为数据是在下拉列表更改的那一刻发送/接收的。您将看到您的消息出现在表单下方的 div 中。

修改后的 HTML：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<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="Go" />
</form>

<div id="responder"></div>  

修订的 JAVASCRIPT/JQUERY：

$(document).ready(function() {

    $('#city').change(function() {
        //var cty = $('#city').val();
        $.ajax({
            type: "POST",
            url: "myscript.php",
            data: "city=" + $(this).val(),
            success:function(data){
                $('#responder').html(data);
            }
        });
    });
});