1. ホーム
  2. javascript

[解決済み] jQuery AJAX クロスドメイン

2022-03-20 16:02:09

質問

ここに test.php と testserver.php という2つのページがあります。

test.php

<script src="scripts/jq.js" type="text/javascript"></script>
<script>
    $(function() {
        $.ajax({url:"testserver.php",
            success:function() {
                alert("Success");
            },
            error:function() {
                alert("Error");
            },
            dataType:"json",
            type:"get"
        }
    )})
</script>

testserver.php

<?php
$arr = array("element1",
             "element2",
             array("element31","element32"));
$arr['name'] = "response";
echo json_encode($arr);
?>

さて、私の問題は、これらのファイルが両方とも同じサーバー(ローカルホストまたはWebサーバーのいずれか)にあるとき、それは動作し、そして alert("Success") が呼び出されます。異なるサーバー、つまりウェブサーバーのtestserver.phpとローカルホストのtest.phpにある場合は、動作せず alert("Error") が実行されます。ajax内のURLを http://domain.com/path/to/file/testserver.php

解決方法は?

使用方法 JSONP .

jQueryを使用します。

$.ajax({
     url:"testserver.php",
     dataType: 'jsonp', // Notice! JSONP <-- P (lowercase)
     success:function(json){
         // do stuff with json (in this case an array)
         alert("Success");
     },
     error:function(){
         alert("Error");
     }      
});

PHPです。

<?php
$arr = array("element1","element2",array("element31","element32"));
$arr['name'] = "response";
echo $_GET['callback']."(".json_encode($arr).");";
?>

phpを使うのは久しぶりなので、echoは間違っているかもしれません。いずれにせよ、次のように出力する必要があります。 callbackName('jsonString') jQueryは独自のコールバック名を渡すので、GETパラメータからそれを取得する必要があります。

そしてStefan Kendallが投稿したように $.getJSON() は略記法ですが、その場合、その後に 'callback=?' をGETパラメータとしてurlに追加します(はい、値は?です、jQueryはこれを独自の生成コールバックメソッドに置き換えます)。