當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery之ajax的跨域获取数据

發布時間：2023/12/10 编程问答 19 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery之ajax的跨域获取数据小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

如果獲取的數據文件存放在遠程服務器上（域名不同，也就是跨域獲取數據），則需要使用jsonp類型。使用這種類型的話，會創建一個查詢字符串參數 callback=? ，這個參數會加在請求的URL后面。服務器端應當在JSON數據前加上回調函數名，以便完成一個有效的JSONP請求。意思就是遠程服務端需要對返回的數據做下處理，根據客戶端提交的callback的參數，返回一個callback(json)的數據，而客戶端將會用script的方式處理返回數據，來對json數據做處理。JQuery.getJSON也同樣支持jsonp的數據方式調用。下面演示關于jQuery處理跨域請求ajax的方式：

服務器端(PHP為例)：

<?php $data = array('name'=>' 張三','age'=>22,'city'=>'newYork'); sleep(3); //人為設置一個等待(用于觀察什么是ajax的同步與異步) responseAJAX($data); //響應請求返回數據/*** 返回處理后的ajax請求數據* @author martinzhang* @param $data 待返回的數據* @return none*/ function responseAJAX($data){ $data = json_encode($data);$getCallBackName = $_REQUEST['callback']; //獲取callback調用的function函數名if($getCallBackName != ''){//使用了jsonp跨域請求$data = $getCallBackName.'('.$data.')'; //返回格式形如:callbackFunName({"name":" \u5f20\u4e09","age":22,"city":"newYork"})die($data);}else{//未跨域die($data);} }

客戶端：

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>jsonp跨域</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" language="javascript" src="../jquery-1.8.2.js"></script> </head> <body> <form id="form1" runat="server"> <div> <input type="button" id="btn1" onclick="BtnClick()" value="jsonp" style="width:55px; height:20px;" /> <input type="button" id="btn1" onclick="BtnClick2()" value="getJSON" style="width:55px; height:20px;" /> </div> <p></p> <div id="dd"> sd...... </div> <div> <script type="text/javascript" language="javascript"> //方式一： function BtnClick() { $.ajax({ url: 'http://others.com/0_module/0/jQuery/ajax_jsonp/serverAPI.php',//async: false, //ture表示異步(默認)；false表示同步； type: 'get', dataType : 'jsonp', //返回數據類型：需要顯式指定 jsonp: 'callback', //服務端用于接收callback調用的function名的參數名(變量名)//jsonpCallback: 'callbackFunName', //可以顯式地指定callback的函數名【如果不設置此項jquery會使用一個隨機的含時間串的名稱做為callback的函數名】 success: function(data){//alert(data); $('#dd').html(data.name); }}); alert('什么是異步？就是js不會等ajax何時請求回數據，程序順序向下執行它下面的其它程序，ajax何時候請求回數據就何時處理'); }//方式二： function BtnClick2() {$.ajaxSettings.async = false; //顯式聲明此次請求為同步 $.getJSON("http://others.com/0_module/0/jQuery/ajax_jsonp/serverAPI.php?callback=?",null,function(data){$('#dd').html(data.name); });alert('何謂同步？就是必須等ajax請求回來數據之后，js才會順序向下執行它下面的程序'); }</script> </div> </form> </body> </html>

轉載于:https://www.cnblogs.com/martinzhang/p/3459706.html

總結

以上是生活随笔為你收集整理的jQuery之ajax的跨域获取数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： php varbinary,php –
下一篇：图片圆角