Asp.net の JQuery および ajax によって呼び出されるバックグラウンド メソッドの概要

プロセス全体で多くの知識ポイントを学び、asp.NET での jQuery と Ajax の使用法を理解しました。つまり、一方を理解していれば、もう一方にも注意を払うことができます。使用法:

1. パラメーターを使用したメソッド呼び出し

サンプル コード:
$(function() { 

1 つのメソッド

1. パラメータメソッドの呼び出し

フロントエンドのjQueryコード:

<span style="font-size:18px">$(function() {  
  var browers = browersEstimate();  
  var params = &#39;{browersType:"&#39; + browers + &#39;"}&#39;;  
  $.ajax({  
      type: "POST",                   //提交方式  
      url: "Default.aspx/RecordData",   //提交的页面/方法名  
      data: params,                   //参数（如果没有参数：null）  
      dataType: "json",                   //类型  
      contentType: "application/json; charset=utf-8",       
      success: function(data) {       
              //返回的数据用data.d获取内容       
                alert(data.d);       
          },       
          error: function(err) {       
              alert(err);       
         });     
     });</span>

これは、バックグラウンドメソッドを呼び出すためのjqueryのAjaxメソッドです。

このメソッドについては注意すべき点がいくつかあります:

type メソッドは post である必要があり、バックグラウンド メソッドは静的である必要があり、メソッド宣言は属性 [System.Web.Services.WebMethod] を追加する必要があります。 ()]、渡されるパラメーターの数は、

asp.Net バックグラウンド メソッド:

<span style="font-size:18px">  [System.Web.Services.WebMethod()]  
    public static void RecordData(string browersType)  
    {  
        if (BrowserControl.Counters == null)  
        {  
            BrowserControl.InitData(0);  
        }  
  
        if (browersType == "")  
        {  
            browersType = "Other";  
        }  
  
        BrowserControl.AddOneByBrowserType(browersType);  
        if (BrowserControl.WriteInDataBase())  
        {  
            BrowserControl.OldTotalCount = BrowserControl.Counters.Count;  
        }  
        else  
        {  
            BrowserControl.OldTotalCount = 0;  
        }  
    }</span>

のパラメーターと同じである必要があります。 2. パラメーターなしのメソッド呼び出し

サンプル コード:

フロントエンド jQueryコード

<span style="font-size:18px">$(function() {       
    $("#btnOK").click(function() {       
        $.ajax({       
            //要用post方式       
            type: "Post",       
            //方法所在页面和方法名       
            url: "data.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;       
    });       
});</span>

asp.net バックエンド メソッド

<span style="font-size:18px">[System.Web.Services.WebMethod()]  
public static string SayHello()       
{       
return "Hello Ajax!";       
}</span>

3. 配列を返すメソッドの呼び出し

フロントエンド JQuery コードの例:

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

asp.net バックエンド コード:asp.net バックエンド コード:

<span style="font-size:18px">[System.Web.Services.WebMethod()]     
public static List GetArray()       
{       
  List li = new List();       
for (int i = 0; i < 10; i++)       
        li.Add(i + "");       
return li;       
} </span>

4操作 xml

<span style="font-size:18px">xnl文件示例：     
 <?xml version="1.0" encoding="utf-8" ?>      
<data>      
  <item>      
    <id>1</id>      
    <name>qwe</name>      
  </item>      
  <item>      
    <id>2</id>      
    <name>asd</name>      
  </item>      
</data>       
Jquery代码：Jquery代码：</span>

Jquery フロントエンド コード:

<span style="font-size:18px">$(function() {       
    $("#btnOK").click(function() {       
        $.ajax({       
            url: "XMLtest.xml",       
            dataType: &#39;xml&#39;, //返回的类型为XML ，和前面的Json，不一样了       
            success: function(xml) {       
                //清空list       
                $("#list").html("");       
                //查找xml元素       
                $(xml).find("data>item").each(function() {      
  
                    $("#list").append("id:" + $(this).find("id").text() +"");      
  
                    $("#list").append("Name:"+ $(this).find("name").text() + "");       
                })       
            },       
            error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数       
                alert(status);       
            }       
        });       
        //禁用按钮的提交       
        return false;       
    });       
});</span>

概要

主なことは、バックエンドと一貫性を保つために JS コード内のメソッド名に注意を払う必要があるということです。そして、バックエンド メソッドは次のとおりである必要があります。メソッド宣言には [System.Web.Services.WebMethod()] 属性を追加する必要があり、渡されるパラメーターの数もメソッドのパラメーターと同じである必要があります。これらの部分に注意してデバッグします。残りはさらに練習して、原理の理解を深めてください

Asp.net での JQuery と ajax 呼び出しのバックグラウンド メソッドの概要に関するその他の記事については、PHP 中国語 Web サイトに注目してください。