jQuery+AJAX appelle l'arrière-plan de la page

Cette fois, je vais vous apporter l'arrière-plan de la page d'appel jQuery+AJAX Quelles sont les précautions pour l'arrière-plan de la page d'appel jQuery+AJAX. Voici les pratiques. cas. Jetons un coup d'oeil.

L'exemple de cet article partage la méthode d'arrière-plan de la page d'appel jQuery AJAX pour votre référence. Le contenu spécifique est le suivant

1 Créez une nouvelle page demo.aspx.

2. Ajoutez d'abord une référence dans le fichier d'arrière-plan demos.aspx.cs de la page.

en utilisant System.Web.Services;

1). Appel de méthode sans paramètres.
Veuillez noter que cette version ne peut pas être inférieure à .net framework 2.0 . Il n'est pas pris en charge dans la version 2.0.
Code backend :

[WebMethod]   
public static string SayHello()   
{   
   return "Hello Ajax!";   
}

Code JS :

$(function() {   
  $("#btnOK").click(function() {   
    $.ajax({   
      //要用post方式   
      type: "Post",   
      //方法所在页面和方法名   
      url: "Demo.aspx/SayHello",   
      contentType: "application/json; charset=utf-8",   
      dataType: "json",   
      success: function(data) {   
        //返回的数据用data.d获取内容   
        alert(data.d);   
      },   
      error: function(err) {   
        alert(err);   
      }   
    });   
  
    //禁用按钮的提交   
    return false;   
  });   
});

Code page :

  <form id="form1" runat="server">
  <p>
    <asp:Button ID="btnOK" runat="server" Text="验证用户" />
  </p>
  </form>

L'effet de l'opération est le suivant :

2). Il existe une méthode de paramètre pour appeler le
Code backend :

[WebMethod]   
public static string GetStr(string str, string str2)   
{   
  return str + str2;   
}

Code JS :

$(function() {   
  $("#btnOK").click(function() {   
    $.ajax({   
      type: "Post",   
      url: "demo.aspx/GetStr",   
      //方法传参的写法一定要对，str为形参的名字,str2为第二个形参的名字   
      data: "{'str':'我是','str2':'XXX'}",   
      contentType: "application/json; charset=utf-8",   
      dataType: "json",   
      success: function(data) {   
        //返回的数据用data.d获取内容   
         alert(data.d);   
      },   
      error: function(err) {   
        alert(err);   
      }   
    });   
  
    //禁用按钮的提交   
    return false;   
  });   
});

L'exécution l'effet est le suivant :

3). Retourner la arrayméthode
Code backend :

[WebMethod]   
public static List<string> GetArray()   
{   
  List<string> li = new List<string>();   
  
  for (int i = 0; i < 10; i++)   
    li.Add(i + "");   
  
  return li;   
}

Code JS :

$(function() {   
  $("#btnOK").click(function() {   
    $.ajax({   
      type: "Post",   
      url: "demo.aspx/GetArray",   
      contentType: "application/json; charset=utf-8",   
      dataType: "json",   
      success: function(data) {   
        //插入前先清空ul   
        $("#list").html("");   
  
        //递归获取数据   
        $(data.d).each(function() {   
          //插入结果到li里面   
          $("#list").append("<li>" + this + "</li>");   
        });   
  
        alert(data.d);   
      },   
      error: function(err) {   
        alert(err);   
      }   
    });   
  
    //禁用按钮的提交   
    return false;   
  });   
});

Code de la page :

<form id="form1" runat="server">
<p>
  <asp:Button ID="btnOK" runat="server" Text="验证用户" />
</p>
<ul id="list">
</ul>
</form>

Exécuter le graphique des résultats :

Je crois que vous maîtrisez la méthode après avoir lu le C'est le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention au site Web chinois php Autres articles connexes !

Lecture recommandée :

Lien à trois niveaux entre la province, la ville et le comté lorsqu'Ajax ne s'actualise pas

Après qu'AJAX se soit rendu compte la page d'affichage vient d'être chargée

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!