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

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

php json parsing

使用Javascript解析PHP文件中的JSON数据,php,json,parsing,Php,Json,Parsing,我在Stackoverflow中看到了其他一些相关的帖子。我试过那个代码，但对我不起作用实际上我有一个数据库，在我的MYSQL数据库中有两张女演员的照片。我使用PHP生成JSON数据，效果很好我正试图用Javascript解析它，如图所示 var json=[{ “id”：“1”， “url:“http:\/\/i.imgur.com\/J8yqh3y.jpg” }, { “id”：“2”， “url:“http:\/\/i.imgur.com\/WNx9i2c.jpg” }]; var

我在Stackoverflow中看到了其他一些相关的帖子。我试过那个代码，但对我不起作用

实际上我有一个数据库，在我的MYSQL数据库中有两张女演员的照片。我使用PHP生成JSON数据，效果很好

我正试图用Javascript解析它，如图所示

var json=[{
“id”：“1”，
“url:“http:\/\/i.imgur.com\/J8yqh3y.jpg”
}, {
“id”：“2”，
“url:“http:\/\/i.imgur.com\/WNx9i2c.jpg”
}];
var-nazriya=json；
美元/个（nazriya，函数（索引，nazriya_nazim）{
$（'#url列表'）。追加（''+
“+nazriya_nazim.url+”+
“”）；
});

而且效果很好

但如果我试图从位于我的域中的PHP文件解析它。它没有显示任何内容。它显示空白页

类型：“POST”，
数据类型：“json”，
url:“http://chipap.com/apps/nazriya_nazim/test1.php",
成功：功能（数据）{
警报（“1”）；
//var obj=jQuery.parseJSON（idata）；
var json=json.parse（数据）；
$.each（json，函数（索引，nazriya）{
$（'#url列表'）。追加（''+
“+nazriya.url+”+
“”）；
});
}

这些代码不是我自己写的。浏览堆栈并找到解决方案。但在最后一步（从位于我的服务器中的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>


$.ajax({
类型：“POST”，
数据类型：“jsonp”，
url:“http://chipap.com/apps/nazriya_nazim/test1.php",
成功：功能（数据）{
警报（“1”）；
var json=数据；
$。每个（数据，函数（索引，nazriya）{
$（'#url列表'）。追加（''+
“+nazriya.url+”+
“”）；
});
},
错误：函数（jqXHR、状态、错误文本）{
警报（'状态代码：'+jqXHR.Status+
'\n状态文本：'+status+'\n引发的错误：'+errorText）；
}
});

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

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>');
    });
   }
});

$.ajax({
类型：“POST”，
数据类型：“json”，
url:“http://chipap.com/apps/nazriya_nazim/test1.php",
成功：功能（obj）{
警报（“1”）；
美元，每个（对象，功能（索引，nazriya）{
$（'#url列表'）。追加（''+
“+nazriya.url+”+
“”）；
});
}
});

2）您需要导入jQuery（您不需要在小提琴中完成）

无法加载XMLHttpRequest . 起源是不允许的访问控制允许源

您必须始终处理可能出现的错误

选中此项

这应该是可行的，但您得到了访问控制允许原点错误。这是因为您的

数据类型不正确。为您的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);
    }
});

$.ajax({
类型：“POST”，
数据类型：“jsonp”，
url:“http://chipap.com/apps/nazriya_nazim/test1.php",
成功：功能（数据）{
警报（“1”）；
var json=数据；
$。每个（数据，函数（索引，nazriya）{
$（'#url列表'）。追加（''+
“+nazriya.url+”+
“”）；
});
},
错误：函数（jqXHR、状态、错误文本）{
警报（'状态代码：'+jqXHR.Status+
'\n状态文本：'+status+'\n引发的错误：'+errorText）；
}
});

注意：您在演示中会收到一个警报，好像它是一个错误，但您的状态代码是200
（请选中）。在你的项目中尝试一下。也许JSFIDLE不允许从外部服务器返回数据。
在客户端中，JSONPCCallback指定如下
$.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);
    }

$.ajax({
类型：“POST”，
数据类型：“jsonp”，
url:“http://chipap.com/apps/nazriya_nazim/test1.php",
jsonpCallback：函数（数据）{
警报（“生成指定的jsonp回调”）；
返回“jsonpCall”；
},  
成功：功能（数据）{
警报（“1”）；
var json=数据；
$。每个（数据，函数（索引，nazriya）{
$（'#url列表'）。追加（''+
“+nazriya.url+”+
“”）；
});
},
错误：函数（jqXHR、状态、错误文本）{
警报（'状态代码：'+jqXHR.Status+
'\n状态文本：'+status+'\n引发的错误：'+errorText）；
}

}))
在


您可以在以下站点更好地了解jsonp
不要使用JSON.parse
。您将要接收到成功函数（data
）中的数据将已经是一个对象。@DaGLiMiOuX我对这个JSON不熟悉，请您具体一点。当然。您得到了var json=json.parse（数据）。您必须设置它var json=data，但您已经有数据
，因此不需要这样做。只需调用$.each（json，function（index，nazriya）
您的数据
变量，如$。each（data，function（index，nazriya）
请尝试并报告。这应该可以。@DaGLiMiOuX仍然没有改变。检查Fiddle：改变了的第6行和第7行将您的代码添加到了Fiddle中。它仍然没有显示任何内容。我在我的项目的html文档中尝试了相同的操作。它没有显示错误。它还显示了一个空白页。@harishannam改为添加$（“\35; url列表”）…
在您的success函数中，添加警报（data.url）
并报告它是否显示了某些内容或内容not@harishannam我给你链接了一个关于状态代码的维基百科参考。200
不是错误代码，而是成功代码（OK
）。这意味着您的请求成功了，它应该将您的数据返回到success
函数中。您是否在php文件json\u encode（$data）中设置了要返回的数据/变量
$.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);
    }
});

$.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);
    }

<?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.')' ;
 ?>