JQuery Ajax调用asp.net后台方法
利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。
先来个简单的实例热热身吧。
1、无参数的方法调用
asp.net code:
1 2 3 4 5 6 7 | using System.Web.Script.Services; [WebMethod] public static string SayHello() { return "Hello Ajax!" ; } |
注意:1.方法一定要静态方法,而且要有[WebMethod]的声明
JQuery code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | $(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:
1 2 3 4 5 6 7 | using System.Web.Script.Services; [WebMethod] public static string GetStr( string str, string str2) { return str + str2; } |
JQuery code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | /// <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:
1 2 3 4 5 6 7 8 9 10 11 12 | 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | /// <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:
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | /// <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:
1 2 3 4 5 6 7 8 9 10 11 | <?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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | $(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 ; }); }); |
运行结果:
作者:灵雨飘零
出处:http://www.cnblogs.com/kingboy2008/
本文版权归作者和博客园、今日头条、CSDN共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。该文章也同时发布在我的独立博客中-博客园—灵雨飘零、今日头条—IT技术资源爱好者 和 CSDN—灵雨飘零。
出处:http://www.cnblogs.com/kingboy2008/
本文版权归作者和博客园、今日头条、CSDN共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。该文章也同时发布在我的独立博客中-博客园—灵雨飘零、今日头条—IT技术资源爱好者 和 CSDN—灵雨飘零。
分类:
技术文档
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性