1

我的文件中有一个 jquery 脚本，上面写着：

<script type="text/javascript">
$(document).ready(function(e){
    $('#myButton').click(function(e){
        var formdata = {name: 'Alan', hobby: 'boxing'};
        var submiturl = 'http://localhost/cake/gronsters/testJSON/';
        $.ajax({
            type: "POST", 
            url: submiturl,
            data: formdata,
            success: function(message){
                console.log(message);
            }
        });
        e.preventDefault();
    })
});

然后我在 testJSON 有一个 php 脚本，上面写着：

public function testJSON(){
    $name = $this->request->data['name'] . '-Sue';
    $hobby = $this->request->data['hobby'] . ' for donuts';
    $data = array(  'name' => $name, 'hobby' => $hobby);
    echo json_encode($data);
}

console.log 查找消息的地方给了我 {"name":"Alan-Sue","hobby":"boxing for donuts"}，这似乎是正确的，只是后面紧跟的是我网页的完整 html . 如果我尝试 console.log(message.name) 它会显示“未定义”。

这里发生了什么？

4

3 回答 3

3

听起来你的 /testJSON/ 页面输出的不仅仅是你的公共函数中写的内容。如果您使用的是 mvc 或任何类型的框架，则必须在 echo json_encode 之后立即退出或死亡，否则页面的其他部分可能仍会呈现。

于 2012-08-07T22:31:42.193 回答
2

您走在正确的道路上，尽管正如其他人所提到的，您似乎正在为您的网站使用 MVC 框架，并且在显示 JSON 字符串后它包含了您网页的内容。如果响应中有其他随机文本或字符，jQuery/JavaScript 无法解析 JSON。您将需要使用exit;或die();在 JSON 回显后使用，如以下示例所示...

public function testJSON(){
    $name = $this->request->data['name'] . '-Sue';
    $hobby = $this->request->data['hobby'] . ' for donuts';
    $data = array(  'name' => $name, 'hobby' => $hobby);
    // Will halt the script and echo the json-encoded data.
    die(json_encode($data));
}

此外，您需要确保 jQuery 将响应解析为 JSON。默认情况下，它会尝试对返回的数据类型进行智能猜测，但您不能总是依赖它。您应该将dataType选项添加到 AJAX 调用，如下例所示...

<script type="text/javascript">
$(document).ready(function(e){
    $('#myButton').click(function(e){
        // It is best practice to "preventDefault" before any code is executed.
        // It will not cause the ajax call to halt.
        e.preventDefault();
        var formdata = {name: 'Alan', hobby: 'boxing'};
        var submiturl = 'http://localhost/cake/gronsters/testJSON/';
        $.ajax({
            type: "POST", 
            url: submiturl,
            data: formdata,
            // This is the proper data type for JSON strings.
            dataType: 'json',
            success: function(message){
                // JSON is parsed into an object, so you cannot just output
                // "message" as it will just show "[object Object]".
                console.log(message.name);
            }
        });
    });
});
</script>

我在代码中包含了一些注释以帮助更好地解释。希望这会对您有所帮助。您也不需要使用完整的$.ajax功能，除非您计划使用错误处理程序或该功能中的任何其他更高级的选项。$.post或者，您可以通过使用和完成与原始示例相同的代码来缩短代码。

<script type="text/javascript">
$(document).ready(function() {
    $('#myButton').click(function(e){
        e.preventDefault();
        var formdata = {name: 'Alan', hobby: 'boxing'};
        var submiturl = 'http://localhost/cake/gronsters/testJSON/';

        $.post(submiturl, formdata, function(message) {
            console.log(message.name);
        });

    });
});
</script>

$.ajax 更多关于jQuery.ajax()的选项和使用信息；
更多关于$.post jQuery.post() 的信息；

于 2012-08-07T23:15:41.010 回答
0

在尝试记录 message.name 之前将消息变量解析为 json。

data = $.parseJSON(message);
console.log(data.name);

在 echo 语句之后，还要在 php 脚本中退出并检查..

于 2012-08-07T22:32:15.813 回答