Jquery .ajax不返回有用的数据

时间:2012-08-07 22:24:04

标签: php jquery json

我的文件中有一个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”,“业余爱好”:“甜甜圈拳击”},这似乎是正确的,除了它紧接着是完整的html我的网页。如果我尝试使用console.log(message.name),它会显示'undefined。'

这里发生了什么?

3 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:2)

你正走在正确的道路上,虽然正如其他人所说的那样,看起来你正在为你的网站使用MVC框架,它在显示JSON字符串后包含了你网页的内容。如果响应中有其他随机文本或字符,则jQuery / JavaScript无法解析JSON。在回显JSON后,您需要使用exit;die();,如以下示例所示......

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();

的更多信息

答案 2 :(得分:0)

在尝试记录message.name。

之前,将消息变量解析为json
data = $.parseJSON(message);
console.log(data.name);

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