Utilisez jQuery Ajax pour demander au service Web d'implémenter un Ajax plus concis

Dans le passé, lorsque nous faisions ajax, nous devions nous appuyer sur des programmes de traitement généraux (.ashx) ou des services Web (.asmx), et chaque requête devait créer un tel fichier. De cette façon, nous créons beaucoup d'ashx. fichiers, c'est plus gênant, et ça n'a pas l'air bien si c'est trop

Nous pouvons maintenant utiliser la méthode webMethod pour rendre l'implémentation ajax plus concise

1. . Puisque vous souhaitez utiliser WebMethod, alors certainement Il est indispensable de référencer l'espace de noms

en utilisant System.Web.Services;

Ici, pour faciliter le développement, j'ai créé une nouvelle page spécifiquement. pour écrire des méthodes WebMethod. Ce sera plus pratique, c'est aussi plus facile à gérer. S'il y a beaucoup de requêtes ajax, vous pouvez créer quelques pages supplémentaires en fonction du nom de la page
Par exemple. le code d'arrière-plan est publié ci-dessous :

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

La méthode WebMethod en arrière-plan doit être une méthode statique publique, et l'attribut WeMethod doit être ajouté à la méthode si vous le souhaitez ; pour faire fonctionner la Session dans cette méthode, vous devez ajouter l'attribut à la méthode

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

2 Puisque les méthodes WebMethod en arrière-plan ont été écrites, il suffit de les appeler. utilisez JQuery ici. C'est relativement concis

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

Voici une brève explication de plusieurs paramètres du type Ajax de Jquery : le type de requête doit. être utilisé ici. La méthode WebMethod n'accepte que les requêtes de type de publication

contentType : type d'encodage de contenu lors de l'envoi d'informations au serveur. Nous devons utiliser application/json ici

url : le chemin d'accès au gestionnaire côté serveur demandé, au format "nom de fichier (y compris le suffixe)/nom de méthode"

data : liste de paramètres. Notez que les paramètres ici doivent être des chaînes au format json, n'oubliez pas d'être au format chaîne, tel que : "{aa:11,bb:22,cc:33, ...}".

Si ce que vous écrivez n'est pas une chaîne, jquery le sérialisera en chaîne, donc ce qui est reçu côté serveur n'est pas au format json et ne peut pas être vide, même s'il n'y a pas de paramètres . Il doit être écrit sous la forme "{}", comme dans l'exemple ci-dessus. Beaucoup de gens échouent, et c'est pourquoi.

dataType : Le type de données renvoyé par le serveur. Ce doit être json, tout le reste n'est pas valide. Étant donné que le service Web renvoie les données au format json, sa forme est : {"d": ...."}. Succès : fonction de rappel une fois la demande réussie. Vous pouvez faire ce que vous voulez avec les données renvoyées ici.

Nous pouvons voir que certaines valeurs de paramètres sont fixes, donc du point de vue de la réutilisabilité, nous pouvons créer une extension pour jquery et faire une simple encapsulation de la fonction ci-dessus : Nous construisons A Le fichier de script s'appelle jquery.extend.js. Écrivez une méthode appelée ajaxWebService à l'intérieur (car webmethod est en fait WebService, donc cette méthode est également valable pour demander *.asmx. Le code est le suivant :

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

).

D'accord, donc on peut appeler la méthode webmethod comme ceci :

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

Voici un autre package, que j'ai vu quand j'étais avec un manager, je le trouve joli. bien

Tout d'abord, créez un fichier js. Le nom du fichier dépend de vous. J'ai créé deux méthodes dans CommonAjax.js ici. Regardez le code suivant :

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

<🎜. >

Notre appel à la réception est relativement simple

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

Mais si nous utilisons cette méthode. à noter lors de la transmission des paramètres à la méthode WebMethod d'arrière-plan. La clé Json doit être la même que les paramètres formels de la méthode WebMethod, et l'ordre des paramètres ne peut pas être gâché, sinon la requête échouera. > Par exemple, la méthode background est la suivante :

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

Nous devons passer deux paramètres, le format est le suivant :

[csharp] view plain copy print?
{"Id":23,"name":"study"}

Ce qui précède est l'introduction de l'éditeur à l'utilisation du service Web de requêtes Jquery Ajax pour implémenter un Ajax plus concis. J'espère que cela sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra dans. temps. Je voudrais également vous remercier tous pour votre soutien au site Web PHP chinois !

Pour plus d'articles sur l'utilisation de jQuery Ajax pour demander un service Web afin d'obtenir un Ajax plus concis, veuillez faire attention au site Web PHP chinois !