Verwenden Sie jQuery Ajax, um den Webservice anzufordern, prägnanteres Ajax zu implementieren

In der Vergangenheit mussten wir uns bei der Verwendung von Ajax auf allgemeine Verarbeitungsprogramme (.ashx) oder Webdienste (.asmx) verlassen, und jede Anfrage musste eine solche Datei erstellen. Auf diese Weise erstellen wir eine Menge Ashx Dateien, Es ist problematischer und es sieht nicht gut aus, wenn es zu viel ist

Jetzt können wir die webMethod-Methode verwenden, um die Ajax-Implementierung prägnanter zu gestalten

1 . Da Sie WebMethod verwenden möchten, ist es unbedingt erforderlich, den Namespace

mit System.Web.Services;

zu referenzieren. Aus Gründen der Vereinfachung der Entwicklung habe ich hier speziell eine neue Seite erstellt Zum Schreiben von WebMethod-Methoden ist das einfacher. Wenn es viele Ajax-Anfragen gibt, können Sie die Anfragen nach dem Namen der Seite klassifizieren Der Hintergrundcode wird unten veröffentlicht:

/// <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";
}

Die WebMethod-Methode im Hintergrund muss eine öffentliche statische Methode sein, und das WeMethod-Attribut muss der Methode hinzugefügt werden, wenn Sie möchten Um die Sitzung in dieser Methode zu betreiben, müssen Sie der Methode

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

2 hinzufügen. Da die WebMethod-Hintergrundmethoden geschrieben wurden, müssen wir sie nur noch aufrufen Verwenden Sie hier JQuery. Es ist relativ präzise hier verwendet werden. Die WebMethod-Methode akzeptiert beim Senden von Informationen an den Server nur Posttyp-Anfragen

contentType: Inhaltskodierungstyp. Wir müssen hier application/json verwenden

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

URL: der Pfad zum angeforderten serverseitigen Handler im Format „Dateiname (einschließlich Suffix)/Methodenname“

Daten: Parameterliste. Beachten Sie, dass die Parameter hier Zeichenfolgen im JSON-Format sein müssen. Denken Sie daran, dass sie im Zeichenfolgenformat vorliegen, z. B.: „{aa:11,bb:22,cc:33, ...}“.

Wenn das, was Sie schreiben, keine Zeichenfolge ist, serialisiert JQuery es in eine Zeichenfolge, sodass das, was auf der Serverseite empfangen wird, nicht im JSON-Format vorliegt und nicht leer sein kann, auch wenn keine Parameter vorhanden sind . Es sollte wie im obigen Beispiel als „{}“ geschrieben werden. Viele Menschen scheitern, und das ist der Grund.

dataType: Der vom Server zurückgegebene Datentyp. Es muss JSON sein, alles andere ist ungültig. Da der Webservice Daten im JSON-Format zurückgibt, lautet seine Form: {"d":"....."}. Erfolg: Rückruffunktion, nachdem die Anfrage erfolgreich war. Hier können Sie mit den zurückgegebenen Daten machen, was Sie wollen.

Wir können sehen, dass einige der Parameterwerte fest sind. Aus Sicht der Wiederverwendbarkeit können wir also eine Erweiterung für jquery erstellen und eine einfache Kapselung der obigen Funktion erstellen: Wir erstellen A Die Skriptdatei heißt jquery.extend.js. Schreiben Sie darin eine Methode namens ajaxWebService (da webmethod eigentlich WebService ist, ist diese Methode also auch zum Anfordern von *.asmx gültig. Der Code lautet wie folgt:

).

Okay, wir können die Webmethod-Methode also so nennen:

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

Hier ist ein weiteres Paket, das ich gesehen habe, als ich mit einem Manager zusammen war gut

Erstellen Sie zunächst eine js-Datei. Ich habe hier zwei Methoden in CommonAjax.js erstellt:

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

Unser Anruf an der Rezeption ist relativ einfach

function json2str(o) {
var arr = [];
var fmt = function(s) {
if (typeof s == 'object' && s != null) return json2str(s);
return /^(string|number)$/.test(typeof s) ? "'" + s + "'" : s;
}
for (var i in o) arr.push("'" + i + "':" + fmt(o[i]));
return '{' + arr.join(',') + '}';
}
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;
}

Aber wenn wir diese Methode anwenden Zu beachten bei der Übergabe von Parametern an die WebMethod-Methode im Hintergrund. Der JSON-Schlüssel muss mit den formalen Parametern der WebMethod-Methode übereinstimmen, und die Reihenfolge der Parameter darf nicht verwechselt werden > Die Hintergrundmethode lautet beispielsweise wie folgt:

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

Wir müssen zwei Parameter übergeben, das Format ist wie folgt:

Das Obige ist die Einführung des Herausgebers in die Verwendung des Jquery Ajax-Webservices zur Implementierung eines präziseren Ajax. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen antworten Zeit. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der chinesischen PHP-Website bedanken!

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

Weitere Artikel zur Verwendung von jQuery Ajax zum Anfordern eines Webservices zur Erzielung eines prägnanteren Ajax finden Sie auf der chinesischen PHP-Website!