1

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

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

JSON数据的链接

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

直接解析小提琴链接

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 链接：在 PHP 文件中解析 JSON 数据

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>

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

4

3 回答 3

0

XMLHttpRequest cannot load http://chipap.com/apps/nazriya_nazim/test1.php. Origin http://fiddle.jshell.net is not allowed by Access-Control-Allow-Origin.

You have to handle ALWAYS posible errors.

Check this demo.

This should work, but you got Access-Control-Allow-Origin error. This is caused because your dataType was incorrect. Try this configuration for your ajax call:

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

NOTE: You get in the demo an alert as if it were an error, but your status code is 200 (check status codes). Try it in your project. Maybe JsFiddle it's not allowing to return data from external servers.

于 2013-05-22T09:26:31.533 回答
0

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（你不要在小提琴中这样做）

于 2013-05-22T09:03:37.223 回答
0

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

于 2013-05-22T11:00:34.623 回答