jquery中的ajax方法怎樣通過JSONP進行遠程調用_jquery

來源:互聯網
上載者:User
關於JSONP的概念和為什麼要使用JSONP網上已經有很多教程,這一節主要示範下在JQUERY中的ajax方法怎樣通過JSONP進行遠程調用

首先介紹下$.ajax的參數

type:請求方式 GET/POST

url:請求地址

async:布爾類型,預設為true 表示請求是否為非同步,如果為false表示為同步。

dataType:返回的資料類型

jsonp:傳遞給請求處理常式或頁面的,用以獲得jsonp回呼函數名的參數名(一般預設為:callback)

jsonpCallback:自訂的jsonp回呼函數名稱,預設為jQuery自動產生的隨機函數名,也可以寫"?",jQuery會自動為你處理資料

success:調用成功執行的函數

error:異常處理函數

1.樣本1

伺服器端我們採用MVC的ACTION來返回資料

複製代碼 代碼如下:

public class HomeController : Controller
{
//
// GET: /Home/

public ActionResult Index()
{
returnView();
}

public ActionResult ReturnJson()
{
string callback = Request.QueryString["callback"];
string json = "{'name':'張三','age':'20'}";
string result = string.Format("{0}({1})", callback, json);
returnContent(result);
}

}

用戶端使用jsonp來傳輸資料
複製代碼 代碼如下:

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}

<script src="~/Scripts/jquery-1.7.1.min.js"type="text/javascript"> </script>
<script type="text/javascript">
functionSendData()
{
$.ajax({
type: "get",
async: false,
url: "/home/ReturnJson",
dataType: "jsonp",
success: function(data){
alert(data.name);
},
error: function(){
alert('fail');
}
});
}
</script>
<input type="button" value="提交" onclick="SendData();"/>

點擊提交按鈕後,探索服務器端的Request.QueryString["callback"]返回一個隨機函數名。這樣就被設定成JSONP格式來傳遞資料了

2.自訂函數名

可以在傳遞過程中自訂函數名,只要使用jsonpCallback參數就可以了。

jsonp:表示傳遞的參數,預設為callback,我們也可以自訂,伺服器段通過此參數,擷取自訂的函數名稱,伺服器這樣擷取 Request.QueryString["callback"]

jsonpCallback表示傳遞的參數值,也就是回調的函數名稱,這是自訂的名稱。
複製代碼 代碼如下:

<script type="text/javascript">
functionSendData() {
$.ajax({
type: "get",
async: false,
url: "/home/ReturnJson",
dataType: "jsonp",
jsonp: "callback",//傳遞給請求處理常式或頁面的,用以獲得jsonp回呼函數名的參數名(一般預設為:callback)
jsonpCallback: "receive",//自訂的jsonp回呼函數名稱,預設為jQuery自動產生的隨機函數名,也可以寫"?",jQuery會自動為你處理資料
success: function(data) {
alert(data.name);
},
error: function() {
alert('fail');
}
});
}

functionreceive(data) {
alert(data.age);
}
</script>
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.