分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置：首页 > 教程案例

Jquery Ajax调用asp.net后台方法

发布时间：2023-09-06 01:19责任编辑：白小东关键词：Ajax

利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。

先来个简单的实例热热身吧。

1、无参数的方法调用

asp.net code：

  1. usingSystem.Web.Script.Services;
  3. [WebMethod]
  4. publicstaticstringSayHello()
  5. {
  6. return"HelloAjax!";
  7. }

注意：1.方法一定要静态方法，而且要有[WebMethod]的声明

JQuery code：

  1. $(function(){
  2. $("#btnOK").click(function(){
  3. $.ajax({
  4. //要用post方式
  5. type:"Post",
  6. //方法所在页面和方法名
  7. url:"data.aspx/SayHello",
  8. contentType:"application/json;charset=utf-8",
  9. dataType:"json",
  10. success:function(data){
  11. //返回的数据用data.d获取内容
  12. alert(data.d);
  13. },
  14. error:function(err){
  15. alert(err);
  16. }
  17. });
  19. //禁用按钮的提交
  20. returnfalse;
  21. });
  22. });

结果：

2、带参数的方法调用

asp.net code：

  1. usingSystem.Web.Script.Services;
  3. [WebMethod]
  4. publicstaticstringGetStr(stringstr,stringstr2)
  5. {
  6. returnstr+str2;
  7. }

JQuery code：

  1. ///<referencepath="jquery-1.4.2-vsdoc.js"/>
  2. $(function(){
  3. $("#btnOK").click(function(){
  4. $.ajax({
  5. type:"Post",
  6. url:"data.aspx/GetStr",
  7. //方法传参的写法一定要对，str为形参的名字,str2为第二个形参的名字
  8. data:"{‘str‘:‘我是‘,‘str2‘:‘XXX‘}",
  9. contentType:"application/json;charset=utf-8",
  10. dataType:"json",
  11. success:function(data){
  12. //返回的数据用data.d获取内容
  13. alert(data.d);
  14. },
  15. error:function(err){
  16. alert(err);
  17. }
  18. });
  20. //禁用按钮的提交
  21. returnfalse;
  22. });
  23. });

运行结果：

下面进入高级应用罗

3、返回数组方法的调用

asp.net code：

  1. usingSystem.Web.Script.Services;
  3. [WebMethod]
  4. publicstaticList<string>GetArray()
  5. {
  6. List<string>li=newList<string>();
  8. for(inti=0;i<10;i++)
  9. li.Add(i+"");
  11. returnli;
  12. }

JQuery code：

  1. ///<referencepath="jquery-1.4.2-vsdoc.js"/>
  2. $(function(){
  3. $("#btnOK").click(function(){
  4. $.ajax({
  5. type:"Post",
  6. url:"data.aspx/GetArray",
  7. contentType:"application/json;charset=utf-8",
  8. dataType:"json",
  9. success:function(data){
  10. //插入前先清空ul
  11. $("#list").html("");
  13. //递归获取数据
  14. $(data.d).each(function(){
  15. //插入结果到li里面
  16. $("#list").append("<li>"+this+"</li>");
  17. });
  19. alert(data.d);
  20. },
  21. error:function(err){
  22. alert(err);
  23. }
  24. });
  26. //禁用按钮的提交
  27. returnfalse;
  28. });
  29. });

运行结果：

4、返回Hashtable方法的调用

asp.net code：

  1. usingSystem.Web.Script.Services;
  2. usingSystem.Collections;
  4. [WebMethod]
  5. publicstaticHashtableGetHash(stringkey,stringvalue)
  6. {
  7. Hashtablehs=newHashtable();
  9. hs.Add("www","yahooooooo");
  10. hs.Add(key,value);
  12. returnhs;
  13. }

JQuery code：

  1. ///<referencepath="jquery-1.4.2-vsdoc.js"/>
  2. $(function(){
  3. $("#btnOK").click(function(){
  4. $.ajax({
  5. type:"Post",
  6. url:"data.aspx/GetHash",
  7. //记得加双引号T_T
  8. data:"{‘key‘:‘haha‘,‘value‘:‘哈哈！‘}",
  9. contentType:"application/json;charset=utf-8",
  10. dataType:"json",
  11. success:function(data){
  12. alert("key:haha==>"+data.d["haha"]+"/nkey:www==>"+data.d["www"]);
  13. },
  14. error:function(err){
  15. alert(err+"err");
  16. }
  17. });
  19. //禁用按钮的提交
  20. returnfalse;
  21. });
  22. });

运行结果：

5、操作xml

XMLtest.xml:

  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <data>
  3. <item>
  4. <id>1</id>
  5. <name>qwe</name>
  6. </item>
  7. <item>
  8. <id>2</id>
  9. <name>asd</name>
  10. </item>
  11. </data>

JQuery code:

  1. $(function(){
  2. $("#btnOK").click(function(){
  3. $.ajax({
  4. url:"XMLtest.xml",
  5. dataType:‘xml‘,//返回的类型为XML，和前面的Json，不一样了
  6. success:function(xml){
  7. //清空list
  8. $("#list").html("");
  9. //查找xml元素
  10. $(xml).find("data>item").each(function(){
  11. $("#list").append("<li>id:"+$(this).find("id").text()+"</li>");
  12. $("#list").append("<li>Name:"+$(this).find("name").text()+"</li>");
  13. })
  14. },
  15. error:function(result,status){//如果没有上面的捕获出错会执行这里的回调函数
  16. alert(status);
  17. }
  18. });
  20. //禁用按钮的提交
  21. returnfalse;
  22. });
  23. });

Jquery Ajax调用asp.net后台方法

原文地址：http://www.cnblogs.com/lgx5/p/7707760.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved