jQuery Ajax を使用して、より簡潔な Ajax を実装する Web サービスをリクエストします-jsチュートリアル-php.cn

jQuery Ajax を使用して、より簡潔な Ajax を実装する Web サービスをリクエストします

高洛峰

リリース： 2017-01-24 09:34:17

オリジナル

1095 人が閲覧しました

以前は、ajax を実行していたときは、一般的な処理プログラム (.ashx) または Web サービス (.asmx) に依存する必要があり、リクエストごとにそのようなファイルを大量に作成する必要がありました。このような ashx ファイルがあると見栄えがよくありません。

ここで、webMethod メソッドを使用して、Ajax 実装をより簡潔にできます

1 WebMethod を使用したいので、名前空間を参照する必要があります。

System.Web.Services を使用;

ここでは、開発を容易にするために、より便利で管理しやすい新しいページを作成しました。ページの名前に従って、リクエストを分類しましょう
たとえば、バックグラウンドのコードは以下に掲載されています:

/// <summary>
/// 根据任务ID获取任务名称,任务完成状态,任务数量
/// </summary>
/// <param name="id">任务ID</param>
/// <returns></returns>
[WebMethod]
public static string GetMissionInfoById(int id)
{
CommonService commonService = new CommonService();
DataTable table = commonService.GetSysMissionById(id);
　　　 //.....
return "false";
}

ログイン後にコピー

バックグラウンドの WebMethod メソッドは public static メソッドである必要があることに注意してください。このメソッドでセッションを操作したい場合は、メソッドに WeMethod 属性を追加します。

[WebMethod(EnableSession = true)]//或[WebMethod(true)]
public static string GetMissionInfoById(int id)
{
CommonService commonService = new CommonService();
DataTable table = commonService.GetSysMissionById(id);
　　　 //.....
return "false";
}

ログイン後にコピー

2 メソッドに属性を追加する必要があります。バックグラウンドの WebMethod メソッドを呼び出すだけです。ここでは JQuery を使用してみましょう

$.ajax({
type: "POST",
contentType: "application/json",
url: "WebMethodAjax.aspx/GetMissionInfoById",
data: "{id:12}",
dataType: "json",
success: function()
　　　{
　　　　　//请求成功后的回调处理.
　　　},
　　　error:function()
{
//请求失败时的回调处理.
}
});

ログイン後にコピー

ここでは JQuery をいくつか説明します。 type: リクエストのタイプ。ここでは post を使用する必要があります。 WebMethod メソッドは、サーバーに情報を送信するときに投稿タイプのリクエストのみを受け入れます

contentType: コンテンツエンコードタイプ。ここでは application/json を使用する必要があります

url: 「ファイル名 (サフィックスを含む)/メソッド名」の形式での、要求されたサーバー側ハンドラーへのパス

data: パラメーターのリスト。ここでのパラメータは json 形式の文字列である必要があり、「{aa:11,bb:22,cc:33, ...}」などの文字列形式であることを忘れないでください。

書いたものが文字列でない場合、jqueryは実際に文字列にシリアル化するため、サーバー側で受信したものはjson形式ではなく、たとえパラメーターがない場合でも空にする必要があります。上の例のように、 "{}" として記述されます。多くの人が失敗します、そしてそれが理由です。

dataType: サーバーによって返されたデータ型。 json である必要があります。それ以外は無効です。 Web サービスはデータを json 形式で返すため、その形式は {"d":"....."} になります。成功: リクエストが成功した後のコールバック関数。ここで返されたデータを使用して何でも行うことができます。

一部のパラメーター値が固定されていることがわかります。そのため、再利用性の観点から、jquery の拡張機能を作成し、上記の関数を単純にカプセル化できます。jquery という名前のスクリプトファイルを作成します。内部に ajaxWebService というメソッドを記述します (webmethod は実際には WebService であるため、このメソッドは *.asmx のリクエストにも有効です)。コードは次のとおりです。

///<summary>
///jQuery原型扩展，重新封装Ajax请求WebServeice
///</summary>
///<param name="url" type="String">处理请求的地址</param>
///<param name="dataMap" type="String">参数，json格式的字符串</param>
///<param name="fnSuccess" type="Function">请求成功后的回调函数</param>
$.ajaxWebService = function(url, dataMap, fnSuccess) {
$.ajax({
type: "POST",
contentType: "application/json",
url: url,
data: dataMap,
dataType: "json",
success: fnSuccess
});
}

ログイン後にコピー

さて、次のように webmethod メソッドを呼び出すことができます。 :

$.ajaxWebService("WebMethodAjax.aspx/GetMissionInfoById", "{id:12}", function(result) {//......});

ログイン後にコピー

前にマネージャーのパッケージを見たので、かなり良いと思います

まず、jsファイルを作成します。ファイル名は私が作成します。 CommonAjax.js で 2 つのメソッドを作成しました。次のコードを見てください:

function json2str(o) {
var arr = [];
var fmt = function(s) {
if (typeof s == &#39;object&#39; && s != null) return json2str(s);
return /^(string|number)$/.test(typeof s) ? "&#39;" + s + "&#39;" : s;
}
for (var i in o) arr.push("&#39;" + i + "&#39;:" + fmt(o[i]));
return &#39;{&#39; + arr.join(&#39;,&#39;) + &#39;}&#39;;
}
function Invoke(url, param) {
var result;
$.ajax({
type: "POST",
url: url,
async: false,
data: json2str(param),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
result = msg.d;
},
error: function(r, s, e) {
throw new Error();
}
});
return result;
}

ログイン後にコピー

ただし、このメソッドを使用する場合は、次のことを行う必要があります。これをバックグラウンドの WebMethod メソッドに渡します。パラメータを取得するときに注意すべき点が 1 つあります。Json キーは WebMethod メソッドの仮パラメータと同じでなければなりません。そうでない場合、リクエストは失敗します。

たとえば、バックグラウンドメソッドは次のとおりです:

var result = Invoke("WebMethodAjax.aspx/GetMissionInfoById", { "name": arguments.Value, "id": id });

ログイン後にコピー

2 つのパラメータを渡す必要があります。形式は次のとおりです:

[WebMethod]
public static string GetMissionInfoById(int Id,string name)
{
　　　//.....　
return "false";
}

ログイン後にコピー

上記は、Jquery Ajax を使用して Web サービスの実装をリクエストするためのエディターの紹介です。より簡潔な Ajax です。ご質問があれば、メッセージを残してください。編集者がすぐに返信します。また、PHP 中国語 Web サイトをサポートしていただきありがとうございます。

より簡潔な Ajax を実現するために jQuery Ajax を使用して Web サービスをリクエストする関連記事の詳細については、PHP 中国語 Web サイトに注目してください。