当前位置: 动力学知识库 > 问答 > 编程问答 >

Parsing JSON data in PHP file using Javascript

问题描述:

I have seen some other posts in Stackoverflow which were related. Tried that code but it did not work out for me.

actually i have a database with 2 images of an actress in my MYSQL database. I am generating JSON data using PHP and it works fine.

Link for JSON data

I am trying to parse it with Javascript as shown in 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>');

});

and it works fine.

But if i try to parse it from my PHP file located in my domain. It does not display anything. It shows blank page.

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

});

}

I did not write all these code on my own. Browsed Stack and found solutions. But stuck up at the last step (parsing from a PHP file located in my server).

As said by @DaGLiMiOuX tried it in a separate HTML document.

<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>

Now also it shows the same error.

网友答案:

In your client side specified the jsonpcallback as below

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

});

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

You can understand much better about jsonp at at http://en.wikipedia.org/wiki/JSONP

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

网友答案:

1) that's just an extract of a code, not a compiling function. The complete code would be

$.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) you need to import jQuery (you don't do it in the fiddle)

网友答案:

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.

分享给朋友:
您可能感兴趣的文章:
随机阅读: