麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

<noscript id="ovszd"><dl id="ovszd"></dl></noscript>

首頁 > 學(xué)院 > 開發(fā)設(shè)計(jì) > 正文

jquery使用jsonp進(jìn)行跨域調(diào)用

2019-11-14 16:45:42

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

關(guān)于JSONP的概念和為什么要使用JSONP網(wǎng)上已經(jīng)有很多教程，這一節(jié)主要演示下在JQUERY中的Ajax方法怎樣通過JSONP進(jìn)行遠(yuǎn)程調(diào)用

首先介紹下$.ajax的參數(shù)

type：請(qǐng)求方式 GET/POST

url:請(qǐng)求地址

async:布爾類型，默認(rèn)為true 表示請(qǐng)求是否為異步，如果為false表示為同步。

dataType：返回的數(shù)據(jù)類型

jsonp：傳遞給請(qǐng)求處理程序或頁面的，用以獲得jsonp回調(diào)函數(shù)名的參數(shù)名(一般默認(rèn)為:callback)

jsonpCallback：自定義的jsonp回調(diào)函數(shù)名稱，默認(rèn)為jQuery自動(dòng)生成的隨機(jī)函數(shù)名，也可以寫"?"，jQuery會(huì)自動(dòng)為你處理數(shù)據(jù)

success：調(diào)用成功執(zhí)行的函數(shù)

error：異常處理函數(shù)

1.示例1

服務(wù)器端我們采用MVC的ACTION來返回?cái)?shù)據(jù)

01public class HomeController : Controller 
02   { 
03       // 
04       // GET: /Home/ 
05   
06       public ActionResult Index() 
07       { 
08           returnView(); 
09       } 
10   
11       public ActionResult ReturnJson() 
12       { 
13           string callback = Request.QueryString["callback"]; 
14           string json = "{'name':'張三','age':'20'}"; 
15           string result = string.Format("{0}({1})", callback, json); 
16           returnContent(result); 
17       } 
18   
19   }

客戶端使用jsonp來傳輸數(shù)據(jù)

01@{ 
02    ViewBag.Title = "Index"; 
03    Layout = "~/Views/Shared/_Layout.cshtml"; 
04} 
05   
06<script src="~/Scripts/jquery-1.7.1.min.js"type="text/javascript"> </script> 
07 <script type="text/Javascript"> 
08     functionSendData() 
09     { 
10         $.ajax({ 
11             type: "get", 
12             async: false, 
13             url: "/home/ReturnJson", 
14             dataType: "jsonp", 
15             success: function(data){ 
16                 alert(data.name); 
17             }, 
18             error: function(){ 
19                 alert('fail'); 
20             } 
21         }); 
22     } 
23   
24   
25 </script> 
26   
27<input  type="button" value="提交" onclick="SendData();"/>

點(diǎn)擊提交按鈕后，發(fā)現(xiàn)服務(wù)器端的Request.QueryString["callback"]返回一個(gè)隨機(jī)函數(shù)名。這樣就被設(shè)置成JSONP格式來傳遞數(shù)據(jù)了

2.自定義函數(shù)名

可以在傳遞過程中自定義函數(shù)名，只要使用jsonpCallback參數(shù)就可以了。

jsonp:表示傳遞的參數(shù)，默認(rèn)為callback，我們也可以自定義，服務(wù)器段通過此參數(shù)，獲取自定義的函數(shù)名稱，服務(wù)器這樣獲取 Request.QueryString["callback"]

jsonpCallback表示傳遞的參數(shù)值，也就是回調(diào)的函數(shù)名稱，這是自定義的名稱。

01<script type="text/javascript"> 
02    functionSendData() { 
03        $.ajax({ 
04            type: "get", 
05            async: false, 
06            url: "/home/ReturnJson", 
07            dataType: "jsonp", 
08            jsonp: "callback",//傳遞給請(qǐng)求處理程序或頁面的，用以獲得jsonp回調(diào)函數(shù)名的參數(shù)名(一般默認(rèn)為:callback) 
09            jsonpCallback: "receive",//自定義的jsonp回調(diào)函數(shù)名稱，默認(rèn)為jQuery自動(dòng)生成的隨機(jī)函數(shù)名，也可以寫"?"，jQuery會(huì)自動(dòng)為你處理數(shù)據(jù) 
10            success: function(data) { 
11                alert(data.name); 
12            }, 
13            error: function() { 
14                alert('fail'); 
15            } 
16        }); 
17    } 
18   
19    functionreceive(data) { 
20        alert(data.age); 
21    } 
22</script>