使用 Javascript 解析 PHP 文件中的 JSON 数据答案

【问题标题】：Parsing JSON data in PHP file using Javascript使用 Javascript 解析 PHP 文件中的 JSON 数据
【发布时间】：2013-05-22 09:01:13
【问题描述】：

我在 Stackoverflow 中看到了一些其他相关的帖子。尝试了该代码，但对我没有用。

实际上，我的 MYSQL 数据库中有一个包含 2 张女演员图像的数据库。我正在使用 PHP 生成 JSON 数据，它工作正常。

Link for JSON data

我正在尝试使用 Javascript 解析它，如this fiddle所示

Direct Parsing Fiddle Link

var json = [{
    "id": "1",
    "url": "http:\/\/i.imgur.com\/J8yqh3y.jpg"
}, {
    "id": "2",
    "url": "http:\/\/i.imgur.com\/WNx9i2c.jpg"
}];
var nazriya = json;
$.each(nazriya, function (index, nazriya_nazim) {
    $('#url-list').append('<li>' +
        '<h4>' + nazriya_nazim.url + '</h4>' +
        '</li>');
});

而且效果很好。

但是，如果我尝试从位于我的域中的 PHP 文件中解析它。它不显示任何内容。它显示空白页。

FIDDLE Link : Parsing JSON data on PHP File

type: "POST",
dataType: 'json',
url: "http://chipap.com/apps/nazriya_nazim/test1.php",
success: function (data) {
    alert("1");
    //var obj = jQuery.parseJSON(idata);
    var json = JSON.parse(data);
    $.each(json, function (index, nazriya) {
        $('#url-list').append('<li>' +
            '<h4>' + nazriya.url + '</h4>' +
            '</li>');
    });
}

所有这些代码都不是我自己编写的。浏览堆栈并找到解决方案。但在最后一步卡住了（从我服务器中的 PHP 文件解析）。

正如@DaGLiMiOuX 所说，在单独的 HTML 文档中进行了尝试。

<head>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$.ajax({
    type: "POST",
    dataType: 'jsonp',
    url: "http://chipap.com/apps/nazriya_nazim/test1.php",
    success: function (data) {
        alert("1");
        var json = data;
        $.each(data, function (index, nazriya) {
            $('#url-list').append('<li>' +
                '<h4>' + nazriya.url + '</h4>' +
                '</li>');
        });
    },
    error: function(jqXHR, status, errorText) {
        alert('Status code: ' + jqXHR.status +
              '\nStatus text: ' + status + '\nError thrown: ' + errorText);
    }
});

</script>
</head>
<body>
<ul id="url-list"></ul>
</body>

现在它也显示相同的错误。

【问题讨论】：

不要使用JSON.parse。您将在成功函数 (data) 中接收到的数据已经是一个对象。
@DaGLiMiOuX 我是这个 JSON 的新手，能否请你说的更具体一点。
当然。你得到了var json = JSON.parse(data);。你必须设置它var json = data;，但你已经有data，所以这不是必需的。只需调用您的$.each(json, function (index, nazriya) 您的data 变量，就像这样$.each(data, function (index, nazriya) 尝试并报告，请。这应该有效。
@DaGLiMiOuX 仍然没有变化。检查小提琴：jsfiddle.net/dj8LR/2 更改了第 6 行和第 7 行

标签： php json parsing

【解决方案1】：

在您的客户端指定 jsonpcallback 如下

$.ajax({
    type: "POST",
    dataType: 'jsonp',
    url: "http://chipap.com/apps/nazriya_nazim/test1.php",


    jsonpCallback: function(data){
        alert('generate a specified jsonp callback');
        return "jsonpCall";
    },  


    success: function (data) {
        alert("1");
        var json = data;
        $.each(data, function (index, nazriya) {
            $('#url-list').append('<li>' +
                '<h4>' + nazriya.url + '</h4>' +
                '</li>');
        });
     },
    error: function(jqXHR, status, errorText) {
        alert('Status code: ' + jqXHR.status +
          '\nStatus text: ' + status + '\nError thrown: ' + errorText);
    }

});

在http://chipap.com/apps/nazriya_nazim/test1.php

<?php 
   $callback = $_GET["callback"]; // return  "jsonpCall" that was specified in    jsonpCallback ajax with jsonp

   $json = '[{"id":"1","url":"http:\/\/i.imgur.com\/J8yqh3y.jpg"},{"id":"2","url":"http:\/\/i.imgur.com\/WNx9i2c.jpg"}]' ;

   echo $callback.'('. $json.')' ;
 ?>

您可以在http://en.wikipedia.org/wiki/JSONP 了解更多关于 jsonp 的信息

http://jsfiddle.net/channainfo/wn5bz/

【讨论】：

我实际上没有直接输入 JSON 值。我从我的 MYSQL 数据库中获取它们

【解决方案2】：

1) 这只是代码的摘录，而不是编译函数。完整的代码是

$.ajax({
  type: "POST",
  dataType: 'json',
  url: "http://chipap.com/apps/nazriya_nazim/test1.php",
  success: function (obj) {
    alert("1");
    $.each(obj, function (index, nazriya) {
        $('#url-list').append('<li>' +
            '<h4>' + nazriya.url + '</h4>' +
            '</li>');
    });
   }
});

2）你需要导入jQuery（你不要在小提琴中这样做）

【讨论】：

jsfiddle.net/dj8LR/1 将您的代码添加到小提琴中。它仍然没有显示任何内容。

【解决方案3】：

XMLHttpRequest 无法加载 http://chipap.com/apps/nazriya_nazim/test1.php。起源 http://fiddle.jshell.net 不允许访问控制允许来源。

您必须处理总是可能的错误。

检查这个demo。

这应该可以，但是您遇到了 Access-Control-Allow-Origin 错误。这是因为您的dataType 不正确。为您的 ajax 调用尝试此配置：

$.ajax({
    type: "POST",
    dataType: 'jsonp',
    url: "http://chipap.com/apps/nazriya_nazim/test1.php",
    success: function (data) {
        alert("1");
        var json = data;
        $.each(data, function (index, nazriya) {
            $('#url-list').append('<li>' +
                '<h4>' + nazriya.url + '</h4>' +
                '</li>');
        });
    },
    error: function(jqXHR, status, errorText) {
        alert('Status code: ' + jqXHR.status +
              '\nStatus text: ' + status + '\nError thrown: ' + errorText);
    }
});

注意：您在演示中收到警报，就好像它是一个错误，但您的状态代码是200（检查status codes）。在您的项目中尝试一下。也许 JsFiddle 不允许从外部服务器返回数据。

【讨论】：

我确实在我的项目的 html 文档中尝试了同样的方法。它不显示错误。以及它显示一个空白页。
@harishannam 而不是在您的成功函数中添加$('#url-list')...，添加alert(data.url) 并报告它是否显示某些内容
@harishannam 我将您链接到维基百科关于状态代码的参考。 200 不是错误代码，而是成功代码 (OK)。这意味着您的请求成功，它应该将您的数据返回到您的success 函数中。您是否设置了您的 php 文件 json_encode($data) 或您想要返回的任何数据/变量？另外，我注意到您正在返回一个对象数组。我的最后一条评论不正确，请使用：alert(JSON.parse(data)[0].url); 或 alert(data[0].url); 我现在不确定谁是正确的。您应该指定类似的内容。
我想它与 JSON 有点复杂。计划为我的项目使用 XML。
@harishannam JSON 这很简单，但在尝试做某事之前，您需要知道如何使用它。对不起，我尽力了。希望您即使在 JSON 或 XML 中也能找到解决方案。