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

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 は渡すことを示します。パラメータ値はカスタム名であるコールバック関数名です。

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