Question

我在Stackoverflow中看到了一些相关的帖子。试过那段代码，但对我来说没有用。

实际上我的MYSQL数据库中有一个女演员的2张图像数据库。我正在使用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;
$.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>

现在它也显示了同样的错误。

Answer 1

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（不要在小提琴中执行）

Answer 2

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（请检查 {{ 3}} ）。在您的项目中尝试它。也许JsFiddle它不允许从外部服务器返回数据。

Answer 3

在您的客户端指定了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/

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

3 个答案: