在 AJAX 查询中返回 PHP 响应答案

【问题标题】：Returning a PHP response in a AJAX query在 AJAX 查询中返回 PHP 响应
【发布时间】：2015-01-02 10:48:07
【问题描述】：

我想向 PHP 脚本提交一个表单，让脚本发挥它的魔力，然后将所述魔力返回到一个 div 中，作为其成功/失败/状态变化的视觉指示器。

我有一个我提交的表单（我已经删除了很多无关的输入/文本区域等不重要的代码）：

HTML：

<form name="ajaxform" id="ajaxform" method="post" action="ajax.php">
<table>
<tr class="left"> 
<td>Reporter:</td>
<td>//list of people</td>
</tr>
<tr class="left"> 
<td width="75%">
<p><label for="start">Start:</label>
<input type="text" name="start" id="start"></p>
<p><label for="end">End:</label>
<input type="text" name="end" id="end"></p>
</td>
</tr>
<tr>
<td>
<input name="sid" type="hidden" id="sid" value="<?=$sid?>"> 
<input name="table" type="hidden" id="table" value="add"> 
<input name="submit" type="submit" id="submit" value="Submit" class="submitForm"> 
</td>
</tr>
</form>
<div id="messageResponse"></div>

提交后，运行以下 JS：

JS：

$(function() {
    $('#ajaxform').validate({ // initialize the plugin
        errorClass: "invalid", 
        submitHandler: function (form) {

        $.ajax({
                type:'POST',
                url:'ajax.php',
                data: $(form).serialize(),
                success: function() {
                    $('#messageResponse').fadeIn(500);
                    $('#messageResponse').addClass('ui-state-highlight ui-corner-all').removeClass('ui-state-error');
                    $('#messageResponse').text('Success!' + result);                        
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    $('#messageResponse').fadeIn(500);
                    $('#messageResponse').addClass('ui-state-error ui-corner-all').removeClass('ui-highlight-error');
                    $('#messageResponse').text(xhr.status + ' ' + thrownError + ': Something went wrong - check your inputs and try again.');
                }

        });

        setTimeout(function(){ $('#messageResponse').fadeOut(500); }, 5000);

        // resets fields
        $('#ajaxform')[0].reset();
    }
});

});

然后我根据从表单的隐藏表输入传递的表变量从几个 PHP 脚本列表中挑选出脚本：

PHP：

if($_POST['table'] == "add"){

// Do mysql query which gives me an array

    $result = array("foo" => "bar", "captain" => "coke");
    echo(json_encode($result));
}

我想提交我的表单，让它在 ajax.php 中找到适当的代码并执行它，然后将该 PHP 脚本的结果返回到 messageResponse div。哪里失败了这么惨？

【问题讨论】：

我没有收到任何错误（或者最多，我得到控制台中未定义的结果）。如果我将数据类型更改为“json”，提交表单只会将我发送到 ajax.php 文件（它不应该这样做）。否则，我不会在#messageResponse div 中得到结果。

标签： php jquery ajax

【解决方案1】：

您应该在success 方法中传递result 变量：

success: function (result) {
    console.log(result);
}

另外：

设置您期望从服务器返回的数据类型：
```
dataType: 'json'
```
将结果的标题设置为 JSON（在您的 PHP 文件中）：
```
header('Content-Type: application/json; charset=utf-8');
```

【讨论】：

【解决方案2】：

只需添加：

$.ajax(...,dataType: "json",...);

【讨论】：

添加或删除数据类型不会改变任何事情 - 并不意味着我错过了一些令人难以置信的事情，但这并不能解决问题。

【解决方案3】：

只需从表单中删除操作使用此

<form name="ajaxform" id="ajaxform" method="post" action="#">

【讨论】：