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


Posted in Javascript onFebruary 13, 2014

利用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;
    });
});
Javascript 相关文章推荐
使Ext的Template可以解析二层的json数据的方法
Dec 22 Javascript
基于jquery的simpleValidate简易验证插件
Jan 31 Javascript
JS中生成随机数的用法及相关函数
Jan 09 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 Javascript
JS实现碰撞检测的方法分析
Jan 19 Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
使用jQuery实现掷骰子游戏
Oct 24 jQuery
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
May 26 Javascript
Openlayers显示地理位置坐标的方法
Sep 28 Javascript
react ant Design手动设置表单的值操作
Oct 31 Javascript
用Jquery实现滚动新闻
Feb 12 #Javascript
Jquery实现自定义tooltip示例代码
Feb 12 #Javascript
jquery实现手机发送验证码的倒计时代码
Feb 12 #Javascript
ie下$.getJSON出现问题的解决方法
Feb 12 #Javascript
利用jquery写的左右轮播图特效
Feb 12 #Javascript
jquery选择checked在ie8普通模式下的问题
Feb 12 #Javascript
控制input输入框中提示信息的显示和隐藏的方法
Feb 12 #Javascript
You might like
PHP下几种删除目录的方法总结
2007/08/19 PHP
php调用mysql数据 dbclass类
2011/05/07 PHP
php生成图片验证码
2015/06/09 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
2016/05/29 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
layui框架中layer父子页面交互的方法分析
2017/11/15 Javascript
Angular异步变同步处理方法
2018/08/13 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
python3.x上post发送json数据
2018/03/04 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
使用Python自动化破解自定义字体混淆信息的方法实例
2019/02/13 Python
python实现PCA降维的示例详解
2020/02/24 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
python编写俄罗斯方块
2020/03/13 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
pyqt5实现井字棋的示例代码
2020/12/07 Python
英国Zoro工具:手动工具,电动工具和个人防护用品
2016/11/02 全球购物
自我评价的正确写法
2013/09/19 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
班级读书活动总结
2014/06/30 职场文书
师范生见习报告
2014/10/31 职场文书
2014年基层党支部工作总结
2014/12/04 职场文书
禁毒主题班会教案
2015/08/14 职场文书
详解Nginx的超时keeplive_timeout配置步骤
2022/05/25 Servers