首页
所有分类
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对象 属性处理
Sep 19 Javascript
jquery按回车提交数据的代码示例
Nov 05 Javascript
node.js适合游戏后台开发吗？
Sep 03 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码，让你轻松了拖拽的原理)
Jan 23 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
Vue.js基础知识汇总
Apr 27 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
May 26 Javascript
js 模仿锚点定位的实现方法
Nov 19 Javascript
AngularJS实现ajax请求的方法
Nov 22 Javascript
利用C/C++编写node.js原生模块的方法教程
Jul 07 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 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
JOIN(1) ant design(2) cypress(1) 弹窗(1) 缓冲区(1) json_extract(1) Eclipse(1) form表单(1) pdf(1) 变量提升(1)
You might like
php 获取mysql数据库信息代码
2009/03/12 PHP
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
使用jQuery判断IE浏览器版本的代码
2014/06/14 Javascript
Javascript定义类（class）的三种方法详解
2015/03/13 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
Angular 页面跳转时传参问题
2016/08/01 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
2017/01/05 Javascript
jQuery实现百度登录框的动态切换效果
2017/04/21 jQuery
ES6学习教程之对象字面量详解
2017/10/09 Javascript
js JSON.stringify()基础详解
2019/06/19 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
Python pickle模块用法实例
2015/04/14 Python
Java编程迭代地删除文件夹及其下的所有文件实例
2018/02/10 Python
Python 实现使用dict 创建二维数据、DataFrame
2018/04/13 Python
python3爬取数据至mysql的方法
2018/06/26 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
python实现树的深度优先遍历与广度优先遍历详解
2019/10/26 Python
Python模块/包/库安装的六种方法及区别
2020/02/24 Python
MSC邮轮官方网站：加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
＂引用＂与多态的关系
2013/02/01 面试题
大四学年自我鉴定
2013/11/13 职场文书
关于幼儿的自我评价
2013/12/18 职场文书
上班离岗检讨书
2014/01/27 职场文书
优秀班集体获奖感言
2014/02/03 职场文书
公司年终奖分配方案
2014/06/16 职场文书
七一建党节演讲稿
2014/09/11 职场文书
锅炉工岗位职责
2015/02/13 职场文书
小学国庆节活动总结
2015/03/23 职场文书
2015年档案管理员工作总结
2015/05/13 职场文书
Nginx中使用Lua脚本与图片的缩略图处理的实现
2022/03/18 Servers
对讲机知识
2022/04/07 无线电