DDR爱好者之家

利用JQuery直接调用asp.net后台的简单方法
站长资源 2025/3/16 佚名
63 1538
DDR爱好者之家 Design By 杰米

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

[WebMethod]   命名空间

1、无参数的方法调用, 注意：1.方法一定要静态方法，而且要有[WebMethod]的声明

后台<C#>:

using System.Web.Script.Services; 
 
[WebMethod] 
public static string SayHello() 
{ 
   return "Hello
 Ajax!"; 
}

前台<jQuery>:

$(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、带参数的方法调用

后台<C#>:

using System.Web.Script.Services;
 
[WebMethod]
public static string GetStr(string str,
string str2)
{
  return str
 + str2;
}

前台<JQuery>:

$(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、返回数组方法的调用

后台<C#>:

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>:

$(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方法的调用

后台<C#>:

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>:

$(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:
 
view
 plaincopy to clipboardprint"1.0"
 encoding="utf-8" "1.0"
 encoding="utf-8" "htmlcode">



$(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直接调用asp.net后台的简单方法全部内容了，希望大家多多支持~
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米