使用jQuery通过AJAX提交表单并显示处理PHP页面的返回答案

【问题标题】：Form submit through AJAX with jQuery and show the return of the processing PHP page使用jQuery通过AJAX提交表单并显示处理PHP页面的返回
【发布时间】：2011-04-08 18:28:48
【问题描述】：

我基本上只是尝试通过 AJAX 提交表单，并希望显示处理 PHP 页面的返回。 PHP 页面只是验证输入并显示发生的错误，或向用户显示感谢信息。通常我不会使用 ajax，但在这种情况下，客户设置需要我这样做。

听起来很简单，但我无法让它工作。

我正在使用的 jquery (1.4.2) 代码：

$(document).ready(function() {
    $('#subscription').submit( function() {
        var inputdata = $('#subscription').serialize();
        alert(inputdata);
        $.post("process_form.php", inputdata, function(data) {alert(data);} );
    });
});

Firebug 只是显示：

POST process_form - 状态：中止

另一个奇怪的观察是成功处理程序实际上被调用，但没有显示任何 responseText。我的 apache 日志显示进程表单的 304 http 消息，之后它显示另一行状态码为 200 的表单，就好像它被重定向回那里一样，这是否是正常的 AJAX 行为我不知道。

W3C 声明here：

如果 Location 标头传达的 URL 的来源与 XMLHttpRequest 来源相同，并且重定向不违反无限循环预防措施，则在遵守同源请求事件规则的同时透明地遵循重定向。否则，这是一个网络错误。

但我不认为我的要求违反了其中任何一项。

总之，长话短说：我被困住了。

非常感谢任何帮助，当然，我很乐意提供任何进一步需要的信息。

【问题讨论】：

标签： php jquery ajax forms post

【解决方案1】：

尝试在提交处理程序结束时返回 false。我不确定发生的事情的确切顺序，但如果您不返回 false，您将不会阻止表单的默认操作。所以，表单会以正常的方式提交，XHR会撞到它导致大爆炸。

【讨论】：

非常感谢您的回复，将其添加到 submit() 块确实改变了一些东西。现在请求成功了，Firebug 显示“找到状态 302”，但仍然没有给出 responseText。我将测试一些东西，看看我现在是否可以让它工作。干杯！
更新：它现在可以工作了，我的 PHP 中的某些东西触发了 302，但我知道这可能会发生。非常感谢您的帮助:)

【解决方案2】：

一目了然，尝试从 $.post() 函数中删除大括号。

[编辑]

$.post("process_form.php", inputdata, function(data) {alert(data);});

【讨论】：

感谢您的回复，我通常不使用帖子周围的大括号，我在从 $.ajax 改回时不小心将它们留在了里面。

【解决方案3】：

根据jQuery-docs，jQuery.post应该这样调用：

$.post("process_form.php", inputdata, function(data) {
    alert(data);
});

如果表单具有action-属性，您可能希望禁用与表单提交相关的默认重定向。为此，您可以使用以下代码：

$('#subscription').submit(function(event) {
    event.preventDefault();
    // additional code
});

【讨论】：

感谢您的回复，我通常不使用帖子周围的大括号，我在从 $.ajax 改回时不小心把它们留在了里面。添加 event.preventDefault();使整个 ajax 调用停止工作。
我不确定如何避免 ajax 请求。您是否忘记将事件变量添加为函数参数？ Firebug 是否报告了任何 JavaScript 错误？这可以解释为什么请求没有触发。

【解决方案4】：

该死，被打败了！

您在 Firebug 中收到“process_form.php”中止消息的原因是您的页面在“process_form.php”回复原始查询之前刷新了自身，因此它被中止了！如果 FORM 语句中没有任何操作，则页面假定刷新。

为了我的钱，我尽量避免使用 jQuery 来处理 POST 和 GET 等事件句柄，因为通常页面会尝试刷新（因为在表单语句中没有声明任何操作）。

我在客户端使用以下代码，PHP 返回一个格式化的 XML 文档。

<body>
 <form id="subscription">
  <input id="1" value="1">
  <input id="2" value="2">
  <input id="3" value="3">
  <input id="4" value="4">
  <input type="button" value="SUBMIT" onclick="submitForm()">
 </form>
 <script type="text/javascript"> 

  $(document).ready(function() {

  });

  function submitForm() {
   $.post("./process_form.php", $('#subscription').serialize(),
    function(xml) {
     alert($("SUCCESS",xml).text());
   }, "xml");
  };
 </script>
</body>

服务器端 PHP：

<?php
 header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" );
 header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" );
 header("Cache-Control: no-cache, must-revalidate" );
 header("Pragma: no-cache" );
 header("Content-Type: text/xml; charset=utf-8");

 $XML = '<?xml version="1.0"?>';
 $XML .= "<ROOT>";
 $XML .= "<SUCCESS>1</SUCCESS>";
 $XML .= "</ROOT>";

 echo $XML;
?>

这样可以轻松地在服务器端进行验证，并且可以轻松地返回经过验证的答案。（例如：针对数据库进行验证，返回 SUCCESS=0 以及 REASON=Not in database 的原因。）

【讨论】：