jquery.Ajax()方法调用Asp.Net后台的方法解析

利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。
先来个简单的实例热热身吧。

1、无参数的方法调用
asp.net code:


代码如下:

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 code:


代码如下:

/// <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 code:


代码如下:

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 code:


代码如下:

/// <reference path="jquery-1.4.2-vsdoc.js"/>  
$(function() {  
    $("#btnOK").click(function() {  
        $.ajax({  
            type: "Post",  
            url: "data.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;  
    });  
}); 
/// <reference path="jquery-1.4.2-vsdoc.js"/>
$(function() {
    $("#btnOK").click(function() {
        $.ajax({
            type: "Post",
            url: "data.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;
    });
});

运行结果:

下面进入高级应用罗

3、返回数组方法的调用
asp.net code:


代码如下:

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 code:


代码如下:

/// <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 code:


代码如下:

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 code:


代码如下:

/// <reference path="jquery-1.4.2-vsdoc.js"/>  
$(function() {  
    $("#btnOK").click(function() {  
        $.ajax({  
            type: "Post",  
            url: "data.aspx/GetHash",  
            //记得加双引号  T_T  
            data: "{ 'key': 'haha', 'value': '哈哈!' }",  
            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: "{ 'key': 'haha', 'value': '哈哈!' }",
            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 code:


代码如下:

$(function() {  
    $("#btnOK").click(function() {  
        $.ajax({  
            url: "XMLtest.xml",  
            dataType: 'xml', //返回的类型为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: 'xml', //返回的类型为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;
    });
});

(0)

相关推荐

  • 利用JQuery直接调用asp.net后台的简单方法

    利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. [WebMethod]   命名空间 1.无参数的方法调用, 注意:1.方法一定要静态方法,而且要有[WebMethod]的声明 后台<C#>: using System.Web.Script.Services; [WebMethod] public static string SayHello() { return "Hello Ajax!"; } 前台<jQuery>: $(fun

  • jquery异步调用页面后台方法&#8207;(asp.net)

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqueryCSMethodForm.aspx.cs" Inherits="JQuerWeb.JqueryCSMethodForm" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&

  • jquery调用asp.net 页面后台的实现代码

    先创建一个aspx页面编写一个客户端控件<input type="button" id="AjaxDemo" value="AjaxDemo"> 再aspx后台的页面编写一个简单的方法,代码如下: 复制代码 代码如下: [WebMethod] public static string ABC(string ABC) { return ABC; } 必须声明为静态方法,并且它们必须使用 [WebMethod] 特性标注.但是在webse

  • jquery.Ajax()方法调用Asp.Net后台的方法解析

    利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法.先来个简单的实例热热身吧. 1.无参数的方法调用asp.net code: 复制代码 代码如下: using System.Web.Script.Services; [WebMethod]   public static string SayHello()   {        return "Hello Ajax!";   }  using System.Web.Script.Services; [WebMe

  • jQuery AJAX实现调用页面后台方法

    本文实例为大家分享了jQuery AJAX调用页面后台方法,供大家参考,具体内容如下 1.新建demo.aspx页面. 2.首先在该页面的后台文件demos.aspx.cs中添加引用. using System.Web.Services; 1).无参数的方法调用. 大家注意了,这个版本不能低于.net framework 2.0.2.0已下不支持的. 后台代码: [WebMethod] public static string SayHello() { return "Hello Ajax!&q

  • jQuery Ajax 全局调用封装实例代码详解

    有一种情况:全站都要用异步方式来调用 数据,提交数据,那么你每次操作 都会要$.ajax({.....}) 写重复的方法 和代码,冗余太大, 也浪费时间,虽说你有代码自动提示补全,但真的不优雅,身为前端极客,是不能允许的! [嘿嘿!虽说我现在基本不用jquery了 ,不过异步概念 是永远要用的,就帮助下新人] jQuery Ajax通用js封装 第一步:引入jQuery库 <script type="text/javascript" src="/js/jquery.mi

  • 当jquery ajax遇上401请求的解决方法

    jquery ajax是个很常用接口,而在请求时候,可能存在响应401的情况(身份认证过期或未登录),比较容易出现在混合应用上,如何进行身份认证,重发失败请求,还是值得注意的. ajax请求有两种方式 1. 回调 最常写的方式,成功失败处理以回调方式传入. $.ajax({ ajax参数... success : xxxxxx error: xxxxxx }); 2. Deferred方式 Deferred模式我在<js异步编程>有说明, ajax调用本身返回就是一个Deferred对象,成功

  • jQuery+ajax简单实现文件上传的方法

    本文实例讲述了jQuery+ajax简单实现文件上传的方法.分享给大家供大家参考,具体如下: 可以通过ajax来提交表单,而不会刷新页面.主要使用的方法是 $("#formID").ajaxSubmit()方法. 1.要引入js插件 需要下载的附件:jquery.form.js 2.页面代码: <script src="project/js/jquery.form.js" type="text/javascript"></scr

  • jQuery+ajax实现局部刷新的两种方法

    在项目中,经常会用到ajax,比如实现局部刷新,比如需要前后端交互等,这里呢分享局部刷新的两种方法,主要用的是ajax里面的.load(). 第一种: 当某几个页面都有相同的头部.导航.底部的时候,点击导航链接可以在几个页面中切换,此时想要的效果是点击链接后只切换内容部分,其他不再重新加载.上代码. jq-load.html: <!DOCTYPE html> <html> <head> <title>ajax局部刷新</title> </h

  • jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码

    ws.aspx 代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1&q

  • jQuery AJAX实现调用页面后台方法和web服务定义的方法分享

    1.新建demo.aspx页面. 2.首先在该页面的后台文件demos.aspx.cs中添加引用. using System.Web.Services; 3.无参数的方法调用.大家注意了,这个版本不能低于.net framework 2.0.2.0已下不支持的. 后台代码: 复制代码 代码如下: [WebMethod] public static string SayHello() { return "Hello Ajax!"; } JS代码: 复制代码 代码如下: $(functio

  • jquery ajax中使用jsonp的限制解决方法

    jsonp 解决的是跨域 ajax 调用的问题.为什么要跨域 ajax 调用呢?这样可以在一个应用中直接在前端通过 js 调用另外一个应用(在不同的域名下)的 API.我们在实际应用中也用到了 jsonp ,但之前只知道 jsonp 的一个限制,只能发 get 请求,get 请求的弊端是请求长度有限制.今天,发现 jsonp 的另外一个限制(在jquery ajax的场景下) -- 不会触发 $.ajax 的error callback,示例代码如下: 复制代码 代码如下: $.ajax({  

随机推荐