jQuery AJAX 响应总是返回空白消息答案

【问题标题】：jQuery AJAX response always returns blank messagejQuery AJAX 响应总是返回空白消息
【发布时间】：2014-10-25 20:55:24
【问题描述】：

您好，我正在尝试制作 HTML 表单，并且需要在执行表单操作之前对其进行验证。但是 AJAX 响应总是返回空白消息？

$(function(){
    $("#ajax-payment-form input[type='submit']").click(function(e) {

        // Prevent form submission
        e.preventDefault();

        // Serialize data, make AJAX call
        var str = $(this).serialize();
        $.ajax({
            type: "POST",
            url: templateDir+"/payment_form/payment_process.php",
            data: str,
            context: this
        }).done(function(msg) {

            if(msg == 'OK') {
                 console.log('Validation passed, will submit form');
                 $(this).closest('form').submit();
            } else {
                 console.log(msg);
            }

        }).fail(function() {
            // Catch ajax errors here
            console.log('AJAX error');
        });
    });                                                         
});

PHP：

$post = (!empty($_POST)) ? true : false;
if ($post) {
  $orderid = stripslashes($_POST['orderid']);
  $amount = stripslashes($_POST['amount']);
  $betingelser = stripslashes($_POST['betingelser']);
  $error = ''; // Check ordreid
  if (!$orderid) {
    $error. = 'Venligst indtast dit ordreid.<br />';
  } // Check amount
  if (!$amount) {
    $error. = 'Venligst indtast et beløb.<br />';
  }
  if (!$error) {
    echo 'OK';
  } else {
    echo '<div class="notification_error">'.$error.
    '</div>';
  }
}

谁能告诉我哪里错了？

【问题讨论】：

你能给我看看你的payment_process.php的php代码吗
成功被弃用？
@AbdulBasit 是的，这里是：$post = (!empty($_POST)) ？真假; if($post) { $orderid = stripslashes($_POST['orderid']); $amount = stripslashes($_POST['amount']); $betingelser = stripslashes($_POST['betingelser']); $错误 = ''; // 检查 ordreid if(!$orderid) { $error .= 'Venligst indtast dit ordreid.
'; } // 检查金额 if(!$amount) { $error .= 'Venligst indtast et beløb.
'; } if(!$error) { echo 'OK'; } else { echo '
'.$error.'
'; } }
@thar 是的，我知道，我告诉你忽略 console.log 并实际检查 AJAX 请求和响应。如果你这样做了，你可能会马上发现问题。
这里：developer.chrome.com/devtools/docs/network 这是您应该用来诊断 AJAX 问题的东西。您可以看到请求，包括所有数据和标头，并且响应与服务器呈现的完全相同。在您假设问题出在处理您的响应的 JavaScript 中之前，您应该检查发出 request 的 JavaScript。

标签： javascript jquery html ajax validation

【解决方案1】：

您位于submit 按钮的click 处理程序中。您正在调用$(this).serialize()，其中this 是提交按钮。在提交按钮上调用序列化将返回一个空字符串。

因此，您没有向服务器传递任何数据。你在服务器端做的第一件事是检查empty($_POST)，它将是，所以if ($post) 是假的，你的服务器端代码都不会被执行。

您需要序列化表单，而不是提交按钮。

一个简单的解决方案是序列化表单本身......

str = $('"#ajax-payment-form').serialize()

但实际上，更大的问题是您绑定到提交按钮的click，而不是表单本身的submit 事件。

而不是这种处理表单提交的相当复杂的方式......

$("#ajax-payment-form input[type='submit']").click(function(e) {

这样做：

$("#ajax-payment-form").submit(function (e) {

【讨论】：

问题是这样做时，它会创建一个无限循环。日志 (1223) 验证通过，将提交表单。 (1223) 快速计数。当设置 str = $('"#ajax-payment-form').serialize() 我得到了正确的响应，机器人的动作没有被执行

【解决方案2】：

在 jquery 中试试这个：

$.ajax({
type: "POST",
url: templateDir+"/payment_form/payment_process.php",
data: str,
context: this,
success: function(msg){
if(msg == 'OK') {
    console.log('Validation passed, will submit form');
    $(this).closest('form').submit();
    } 
else {
    console.log(msg);
}
}
error: function(msg){
// if call fails or any error occurs
}
});

【讨论】：

在$.ajax返回的promise上使用done/fail回调没有任何问题。它通常比传入等效的成功/错误回调要好得多。