[解決済み] 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はこれを独自の生成コールバックメソッドに置き換えます)。
関連
-
Vueでルートネスティングを実装する例
-
vueにおけるfilterの適用シーンについて解説します。
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] jQueryの「exists」関数はありますか?
-
[解決済み] jQueryでテーブルの行を追加する
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] jQueryを使ったAjaxリクエストの中断
-
[解決済み] jQuery Ajax呼び出し後のリダイレクトリクエストを管理する方法
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Vueの「データを聴く」原則を解説
-
[解決済み】Node Version Manager のインストール - nvm コマンドが見つかりません。
-
[解決済み】Node.js Error: Cannot find module express
-
[解決済み] TypeError: $.ajax(...) is not a function?
-
[解決済み】React - TypeError: 未定義のプロパティ 'props' を読み取ることができない。
-
[解決済み】TypeScript-のAngular Frameworkエラー - "exportAsがngFormに設定されたディレクティブはありません"
-
[解決済み】ExpressJS : res.redirect()が期待通りに動かない?
-
[解決済み】Ajaxクロスオリジンリクエストがブロックされました。同一生成元ポリシーがリモートリソースの読み取りを不許可にする
-
[解決済み] どうすればjQueryに非同期ではなく、同期のAjaxリクエストを実行させることができますか?
-
[解決済み] AJAXによるクロスドメインエンドポイントの読み込み