집 > 기사 > 백엔드 개발 > jquery.Ajax() 메서드는 Asp.Net 백그라운드 메서드 분석을 호출합니다.

jquery.Ajax() 메서드는 Asp.Net 백그라운드 메서드 분석을 호출합니다.

高洛峰원래의: 2016-12-16 16:25:571864검색

JQuery의 $.ajax()를 사용하면 asp.net의 백그라운드 메소드를 쉽게 호출할 수 있습니다.
먼저 간단한 예부터 살펴보겠습니다.

1. 매개변수 없는 메서드 호출
asp.net 코드:

using System.Web.Script.Services;   

[WebMethod]   
public static string SayHello()   
{   
     return "Hello Ajax!";   
}  
using System.Web.Script.Services;
[WebMethod]
public static string SayHello()
{
     return "Hello Ajax!";
}

참고: 1. 메서드는 정적 메서드여야 하며 [WebMethod] 선언이 있어야 합니다.

JQuery 코드:

/// <reference path="jquery-1.4.2-vsdoc.js"/>   
$(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;   
    });   
});  
/// <reference path="jquery-1.4.2-vsdoc.js"/>
$(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;
    });
});

결과:

2. 매개변수를 사용한 메서드 호출
asp.net 코드:

using System.Web.Script.Services;   

[WebMethod]   
public static string GetStr(string str, string str2)   
{   
    return str + str2;   
}  
using System.Web.Script.Services;
[WebMethod]
public static string GetStr(string str, string str2)
{
    return str + str2;
}

JQuery 코드 :

/// <reference path="jquery-1.4.2-vsdoc.js"/>   
$(function() {   
    $("#btnOK").click(function() {   
        $.ajax({   
            type: "Post",   
            url: "data.aspx/GetStr",   
            //方法传参的写法一定要对，str为形参的名字,str2为第二个形参的名字   
            data: "{&#39;str&#39;:&#39;我是&#39;,&#39;str2&#39;:&#39;XXX&#39;}",   
            contentType: "application/json; charset=utf-8",   
            dataType: "json",   
            success: function(data) {   
                //返回的数据用data.d获取内容   
                  alert(data.d);   
            },   
            error: function(err) {   
                alert(err);   
            }   
        });   

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

실행 결과:

아래 고급 애플리케이션 입력

3. 반환 배열 메서드 호출
asp.net 코드:

using System.Web.Script.Services;   

[WebMethod]   
public static List<string> GetArray()   
{   
    List<string> li = new List<string>();   

    for (int i = 0; i < 10; i++)   
        li.Add(i + "");   

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

JQuery 코드:

/// <reference path="jquery-1.4.2-vsdoc.js"/>   
$(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("<li>" + this + "</li>");   
                });   

                alert(data.d);   
            },   
            error: function(err) {   
                alert(err);   
            }   
        });   

        //禁用按钮的提交   
        return false;   
    });   
});  
/// <reference path="jquery-1.4.2-vsdoc.js"/>
$(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("<li>" + this + "</li>");
                });
                alert(data.d);
            },
            error: function(err) {
                alert(err);
            }
        });
        //禁用按钮的提交
        return false;
    });
});

실행 결과:

4. Hashtable 메서드 호출 반환
asp.net 코드:

using System.Web.Script.Services;   
using System.Collections;   

[WebMethod]   
public static Hashtable GetHash(string key,string value)   
{   
    Hashtable hs = new Hashtable();   

    hs.Add("www", "yahooooooo");   
    hs.Add(key, value);   

    return hs;   
}  
using System.Web.Script.Services;
using System.Collections;
[WebMethod]
public static Hashtable GetHash(string key,string value)
{
    Hashtable hs = new Hashtable();
    hs.Add("www", "yahooooooo");
    hs.Add(key, value);

    return hs;
}

JQuery 코드:

/// <reference path="jquery-1.4.2-vsdoc.js"/>   
$(function() {   
    $("#btnOK").click(function() {   
        $.ajax({   
            type: "Post",   
            url: "data.aspx/GetHash",   
            //记得加双引号  T_T   
            data: "{ &#39;key&#39;: &#39;haha&#39;, &#39;value&#39;: &#39;哈哈！&#39; }",   
            contentType: "application/json; charset=utf-8",   
            dataType: "json",   
            success: function(data) {   
                alert("key: haha ==> "+data.d["haha"]+"\n key: www ==> "+data.d["www"]);   
            },   
            error: function(err) {   
                alert(err + "err");   
            }   
        });   

        //禁用按钮的提交   
        return false;   
    });   
});  
/// <reference path="jquery-1.4.2-vsdoc.js"/>
$(function() {
    $("#btnOK").click(function() {
        $.ajax({
            type: "Post",
            url: "data.aspx/GetHash",
            //记得加双引号  T_T
            data: "{ &#39;key&#39;: &#39;haha&#39;, &#39;value&#39;: &#39;哈哈！&#39; }",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(data) {
                alert("key: haha ==> "+data.d["haha"]+"\n key: www ==> "+data.d["www"]);
            },
            error: function(err) {
                alert(err + "err");
            }
        });
        //禁用按钮的提交
        return false;
    });
});

실행 결과:

5. 작업 xml
XMLtest.xml:

<?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>  
<?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 코드:

$(function() {   
    $("#btnOK").click(function() {   
        $.ajax({   
            url: "XMLtest.xml",   
            dataType: &#39;xml&#39;, //返回的类型为XML ，和前面的Json，不一样了   
            success: function(xml) {   
                //清空list   
                $("#list").html("");   
                //查找xml元素   KVM 网上购物 毛刷 网站建设 北京快递公司 超声波焊接机
                $(xml).find("data>item").each(function() {   
                    $("#list").append("<li>id:" + $(this).find("id").text() +"</li>");   
                    $("#list").append("<li>Name:"+ $(this).find("name").text() + "</li>");   
                })   
            },   
            error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数   
                alert(status);   
            }   
        });   

        //禁用按钮的提交   
        return false;   
    });   
});  
$(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("<li>id:" + $(this).find("id").text() +"</li>");
                    $("#list").append("<li>Name:"+ $(this).find("name").text() + "</li>");
                })
            },
            error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数
                alert(status);
            }
        });
        //禁用按钮的提交
        return false;
    });
});

[10.121.158.27:4002] -usercode_in_pthread가 켜져 있을 때 실행할 사용자 코드가 너무 많습니다

추가 jquery .Ajax() 메소드는 관련 기사에 대한 Asp.Net 백엔드 메소드 분석을 호출합니다. PHP 중국어 웹사이트에 주목하세요!

성명：

이전 기사：백그라운드 정적 메서드를 호출하는 Asp.net AJAX 요약다음 기사：백그라운드 정적 메서드를 호출하는 Asp.net AJAX 요약