1

関連する Stackoverflow の他の投稿を見たことがあります。そのコードを試してみましたが、うまくいきませんでした。

実際には、MYSQL データベースに女優の 2 つの画像を含むデータベースがあります。PHP を使用して JSON データを生成していますが、正常に動作します。

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 リンク : 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 はhttp://chipap.com/apps/nazriya_nazim/test1.phpを読み込めません 。オリジン http://fiddle.jshell.netは Access-Control-Allow-Origin で許可されていません。

常に起こりうるエラーを処理する必要があります。

このデモを確認してください。

これは機能するはずですが、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(ステータスコードを確認してください) です。プロジェクトで試してみてください。JsFiddle が外部サーバーからデータを返すことを許可していない可能性があります。

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

jsonp については、http://en.wikipedia.org/wiki/JSONP でよりよく理解できます。

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

于 2013-05-22T11:00:34.623 に答える