首頁 > web前端 > js教程 > JSONP如何解決jQuery中的跨域AJAX問題?

JSONP如何解決jQuery中的跨域AJAX問題?

Susan Sarandon
發布: 2024-12-18 09:49:10
原創
140 人瀏覽過

How Can JSONP Solve Cross-Domain AJAX Issues in jQuery?

使用 jQuery 進行跨域 AJAX

jQuery 的 AJAX 功能是動態 Web 開發的重要工具。但是,當跨不同網域執行 AJAX 請求時,您可能會遇到跨來源資源共用 (CORS) 問題。

當 test.php 和 testserver.php 駐留在不同的伺服器上時,就會出現這樣的問題,導致「錯誤」警報被觸發。這是因為瀏覽器安全措施預設限制來自不同來源的 AJAX 請求。

解決方案:JSONP

為了克服 CORS,可以使用 JSONP(帶有 Padding 的 JSON)。 JSONP 採用不同的方法,從遠程服務器動態加載腳本,避免CORS

實現

jQuery:

$.ajax({
  url: "testserver.php",
  dataType: 'jsonp', // Specify JSONP data type
  success:function(json){
    // Process JSON data
    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 語句旨在包裝jQuery 提供的回調函數中的 JSON 數據,包括正確的引號。

或者,jQuery 的 $.getJSON() 可以用作簡寫方法,並附加「callback=?」作為 URL 的 GET 參數。 jQuery 會根據這個參數自動產生適當的回呼函數。

以上是JSONP如何解決jQuery中的跨域AJAX問題?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板