首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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;
    });
});

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 Javascript
Bootstrap进度条组件知识详解
May 01 Javascript
easyui combotree加载静态数据问题（选不上）解决方法
Dec 26 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 Javascript
webpack构建react多页面应用详解
Sep 15 Javascript
Vue 兄弟组件通信的方法（不使用Vuex）
Oct 26 Javascript
vue cli构建的项目中请求代理与项目打包问题
Feb 26 Javascript
vue.js打包之后可能会遇到的坑！
Jun 03 Javascript
vue中动态添加class类名的方法
Sep 05 Javascript
vue-cli3配置与跨域处理方法
Aug 17 Javascript
通过vue写一个瀑布流插件代码实例
Sep 07 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 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
443(1) 反向代理(2) 压力测试(1) 防盗链(1) SSL(3) shell(3) 二级域名(1) reload(1) 默认端口(3) 前后端分离(1)
You might like
网友原创的PHP模板类代码
2008/09/07 PHP
PHP IN_ARRAY 函数使用注意事项
2010/07/24 PHP
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
php中unlink()、mkdir()、rmdir()等方法的使用介绍
2012/12/21 PHP
php调用google接口生成二维码示例
2014/04/28 PHP
PHP获取windows登录用户名的方法
2014/06/24 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
使用PHP实现微信摇一摇周边红包
2016/01/04 PHP
PHP基于单例模式实现的数据库操作基类
2016/01/15 PHP
PHP文件与目录操作示例
2016/12/24 PHP
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
python 算法 排序实现快速排序
2012/06/05 Python
python中文乱码的解决方法
2013/11/04 Python
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
python pandas写入excel文件的方法示例
2019/06/25 Python
python 搜索大文件的实例代码
2019/07/08 Python
详解pandas赋值失败问题解决
2020/11/29 Python
python SOCKET编程基础入门
2021/02/27 Python
周鸿祎：教你写创业计划书
2013/12/30 职场文书
四年级下册教学反思
2014/02/01 职场文书
大学自我评价
2014/02/12 职场文书
申请任职学生会干部自荐书范文
2014/02/13 职场文书
企业文化口号
2014/06/12 职场文书
乡镇党的群众路线对照检查材料
2014/09/24 职场文书
2015年英语教学工作总结
2015/05/25 职场文书
铁人观后感
2015/06/16 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
python解决12306登录验证码的实现
2021/04/18 Python
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android