使用 php json_encode 返回时 jquery ajax 不起作用答案

【问题标题】：jquery ajax does not working when returning with php json_encode使用 php json_encode 返回时 jquery ajax 不起作用
【发布时间】：2013-05-12 14:53:40
【问题描述】：

已解决

问题已解决，请参阅我的解决方案的底部答案

我一直在努力解决这个问题，我阅读了有关 $.ajax() 的教程

这是脚本

<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(
        function()
        {
            $('#getData').click(
                function()
                {
                    $.ajaxSetup({
                        cache: false
                    });
                    $.ajax(
                    {
                        type: 'GET',
                        url: 'http://localhost/Practice/Jquery/ajax/phone_data.php',
                        data: {rating: 5},
                        dataType: 'json',
                        success: function(data)
                        {
                            $('#display').html(data.phone);
                        },
                    error: function(response)
                    {
                        alert(response.responseText);
                    }
                    });//end ajax

                });//end click
        });//end ready
</script>

<body>
                <input type="button" id="getData" name="submitButton" value="getJson!" />

    <div id="display">
        replace me with phone data
    </div>
</body>

这是phone_data.php

<?php
header('Content-Type: application/json; charset=utf-8');
$data['phone'] = '989898989';
$data['username'] = 'sendyHalim';
echo json_encode($data, true);
exit();

当我单击按钮时，firebug 显示请求正常，但没有任何反应..

所以我通过 firebug 检查 ajax 调用的“响应”并得到：

Reload the page to get source for: http://localhost/Practice/Jquery/ajax/phone_data.php?rating=5&_=1368793325734

更新我更新了我的代码，我搜索了一些方法来获取响应文本（使用来自response 的responseText 属性），但它只是用空字符串（什么都没有）发出警报。

这是我单独运行 phone_data.php 脚本时的输出：

{"phone":"989898989","username":"sendyHalim"}

和来自 firefox 的 "view page info" 确认内容类型是 "application/json"

【问题讨论】：

在你的 AJAX 调用中添加一个 error 回调函数，看看 jQuery 报告了什么错误。
您应该能够在 Firebug 的控制台选项卡中看到响应，而无需重新加载。
您能否打印打开 JSON 文件时在浏览器中看到的内容？
@AnthonyGrist 我用函数更新了我的代码以显示错误，但它什么也没显示.. 来自控制台选项卡的@JayBlanchard，控制台选项卡中没有响应（响应部分）@imsiso 我无论如何都做不到它不是json文件，在我这样做之前（上面的脚本）我一直在使用$.get，当我显示json响应时，它显示未定义（使用相同的php脚本）
顺便说一句，你不需要header('Content-type: application/json'); 并添加exit();最后在echo json_encode.. 之后尝试

标签： php jquery ajax json

【解决方案1】：

已解决

伙计们，这是我的错，哈哈！仅出于教育目的，如果您遇到与我相同的问题（脚本正确等）...问题是我正在从本地文件中打开display_json.html。这意味着我右键单击该文件，然后用 Firefox 打开。但是，当我通过 localhost/pathToYourScript 打开它时，它会运行。

我不明白的一件事是，如果我使用指向另一个域的 url 从本地文件打开它（就像 vincent 的答案中的那个），它可以工作，但是当我使用本地 url 时，它不会不。

感谢您的提示和答案，你们真的帮助了我。

【讨论】：

【解决方案2】：

我复制粘贴了您的代码并替换了 json 请求的 url。

查看 JSON URL。 http://echo.jsontest.com/key/value/one/two

还有我为 html 输出修改了一点的 jQuery 代码。

$(document).ready(function () {
    
    $('#getData').click(function () {
        
        var jsonUrl = 'http://echo.jsontest.com/key/value/one/two';
        $.ajaxSetup({
            cache: false
        });
        $.ajax({
            type: 'GET',
            url: jsonUrl,
            data: {},
            dataType: 'json',
            success: function (data) {
                $('#display').html(data.one + ' and ' + data.key);
            },
            error: function(xhr){
                $('#display').html('error fetching data');
            }
        }); //end ajax
    }); //end click
}); //end ready

这是您的代码： http://jsfiddle.net/wuaNC/

【讨论】：

别忘了正确解析你的 PHP 数组。将您的 json_encode($data) 修改为“json_encode($data,true)”。
嗨，我正在使用您的代码，它使用 url 正确显示，但是当我将 url 更改为我的 url 时：http://localhost/Practice/Jquery/ajax/phone_data.php 它不显示任何内容（响应为空），我在上面的线程

【解决方案3】：

尝试为 UTF-8 全局化您的脚本？

【讨论】：