JSONP_jquery を介して jquery の ajax メソッドをリモートで呼び出す方法-jsチュートリアル-php.cn

JSONP_jquery を介して jquery の ajax メソッドをリモートで呼び出す方法

WBOY

リリース： 2016-05-16 16:53:28

オリジナル

1615 人が閲覧しました

JSONP の概念と JSONP を使用する理由については、インターネット上に多数のチュートリアルがあります。このセクションでは主に、JSONP を介して JQUERY の ajax メソッドをリモートで呼び出す方法を説明します。

まず、$.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':'張三','年齢':'20'}"; 
string result = string.Format("{0}({1})", callback, json); 
returnContent (結果); 
 } 

} 

クライアントは jsonp を使用してデータを送信します

コードをコピーしますコードは次のとおりです。

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

< ;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');
}
});

送信ボタンをクリックした後、サーバー側の Request.QueryString["callback"] がランダムな関数名を返していることがわかりました。このようにして、データを転送するために JSONP 形式に設定されます

2. カスタム関数名
転送プロセス中に関数名をカスタマイズできます。jsonpCallback パラメーターを使用するだけです。
jsonp: 渡されるパラメーターを示します。デフォルトはコールバックです。サーバーセグメントはこのパラメーターを使用してカスタマイズされた関数名を取得します。サーバーは jsonpCallback は渡すことを示します。パラメータ値はカスタム名であるコールバック関数名です。

コードをコピーコードは次のとおりです: