页面导航：
→ 正文内容 jquery Ajax
jquery.Ajax()方法调用Asp.Net后台的方法解析
本篇文章主要是对jquery.Ajax()方法调用Asp.Net后台的方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。先来个简单的实例热热身吧。
1、无参数的方法调用asp.net code： 代码如下:using System.Web.Script.S&& [WebMethod]&& public static string SayHello()&& {&& &&&& return "Hello Ajax!";&& }& using System.Web.Script.S
[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/ charset=utf-8",&& &&&&&&&&&&& dataType: "json",&& &&&&&&&&&&& success: function(data) {&& &&&&&&&&&&&&&&& //返回的数据用data.d获取内容&& &&&&&&&&&&&&&&& alert(data.d);&& &&&&&&&&&&& },&& &&&&&&&&&&& error: function(err) {&& &&&&&&&&&&&&&&& alert(err);&& &&&&&&&&&&& }&& &&&&&&& });&& &&&&&&& //禁用按钮的提交&& &&&&&&&&& &&& });&& });& /// &reference path="jquery-1.4.2-vsdoc.js"/&$(function() {&&& $("#btnOK").click(function() {&&&&&&& $.ajax({&&&&&&&&&&& //要用post方式&&&&&&&&&&& type: "Post",&&&&&&&&&&& //方法所在页面和方法名&&&&&&&&&&& url: "data.aspx/SayHello",&&&&&&&&&&& contentType: "application/ charset=utf-8",&&&&&&&&&&& dataType: "json",&&&&&&&&&&& success: function(data) {&&&&&&&&&&&&&&& //返回的数据用data.d获取内容&&&&&&&&&&&&&&& alert(data.d);&&&&&&&&&&& },&&&&&&&&&&& error: function(err) {&&&&&&&&&&&&&&& alert(err);&&&&&&&&&&& }&&&&&&& });
&&&&&&& //禁用按钮的提交&&&&&&&&&& });}); 结果：
2、带参数的方法调用asp.net code： 代码如下:using System.Web.Script.S&& [WebMethod]&& public static string GetStr(string str, string str2)&& {&& &&& return str + str2;&& }& using System.Web.Script.S
[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/ charset=utf-8",&& &&&&&&&&&&& dataType: "json",&& &&&&&&&&&&& success: function(data) {&& &&&&&&&&&&&&&&& //返回的数据用data.d获取内容&& &&&&&&&&&&&&&&&&& alert(data.d);&& &&&&&&&&&&& },&& &&&&&&&&&&& error: function(err) {&& &&&&&&&&&&&&&&& alert(err);&& &&&&&&&&&&& }&& &&&&&&& });&& &&&&&&& //禁用按钮的提交&& &&&&&&&&& &&& });&& });& /// &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/ charset=utf-8",&&&&&&&&&&& dataType: "json",&&&&&&&&&&& success: function(data) {&&&&&&&&&&&&&&& //返回的数据用data.d获取内容&&&&&&&&&&&&&&&&& alert(data.d);&&&&&&&&&&& },&&&&&&&&&&& error: function(err) {&&&&&&&&&&&&&&& alert(err);&&&&&&&&&&& }&&&&&&& });
&&&&&&& //禁用按钮的提交&&&&&&&&&& });}); 运行结果：
下面进入高级应用罗
3、返回数组方法的调用asp.net code： 代码如下:using System.Web.Script.S&& [WebMethod]&& public static List&string& GetArray()&& {&& &&& List&string& li = new List&string&();&& &&& for (int i = 0; i & 10; i++)&& &&&&&&& li.Add(i + "");&& &&&&& }& using System.Web.Script.S
[WebMethod]public static List&string& GetArray(){&&& List&string& li = new List&string&();
&&& for (int i = 0; i & 10; i++)&&&&&&& li.Add(i + "");
&&&} JQuery code： 代码如下:/// &reference path="jquery-1.4.2-vsdoc.js"/&&& $(function() {&& &&& $("#btnOK").click(function() {&& &&&&&&& $.ajax({&& &&&&&&&&&&& type: "Post",&& &&&&&&&&&&& url: "data.aspx/GetArray",&& &&&&&&&&&&& contentType: "application/ 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);&& &&&&&&&&&&& }&& &&&&&&& });&& &&&&&&& //禁用按钮的提交&& &&&&&&&&& &&& });&& });& /// &reference path="jquery-1.4.2-vsdoc.js"/&$(function() {&&& $("#btnOK").click(function() {&&&&&&& $.ajax({&&&&&&&&&&& type: "Post",&&&&&&&&&&& url: "data.aspx/GetArray",&&&&&&&&&&& contentType: "application/ 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);&&&&&&&&&&& }&&&&&&& });
&&&&&&& //禁用按钮的提交&&&&&&&&&& });}); 运行结果：
4、返回Hashtable方法的调用asp.net code： 代码如下:using System.Web.Script.S&& using System.C&& [WebMethod]&& public static Hashtable GetHash(string key,string value)&& {&& &&& Hashtable hs = new Hashtable();&& &&& hs.Add("www", "yahooooooo");&& &&& hs.Add(key, value);&& &&&&& }& using System.Web.Script.Susing System.C
[WebMethod]public static Hashtable GetHash(string key,string value){&&& Hashtable hs = new Hashtable();
&&& hs.Add("www", "yahooooooo");&&& hs.Add(key, value);&&&} 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/ 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");&& &&&&&&&&&&& }&& &&&&&&& });&& &&&&&&& //禁用按钮的提交&& &&&&&&&&& &&& });&& });& /// &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/ 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");&&&&&&&&&&& }&&&&&&& });
&&&&&&& //禁用按钮的提交&&&&&&&&&& });}); 运行结果：
5、操作xmlXMLtest.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);&& &&&&&&&&&&& }&& &&&&&&& });&& &&&&&&& //禁用按钮的提交&& &&&&&&&&& &&& });&& });& $(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);&&&&&&&&&&& }&&&&&&& });
&&&&&&& //禁用按钮的提交&&&&&&&&&& });});
您可能感兴趣的文章:
上一篇：下一篇：
最 近 更 新
热 点 排 行
12345678910c#.net 我通过jQuery在页面添加了一个按钮btn1，我想点击个按钮调用后台的方法，请各位前辈赐教。_百度知道
c#.net 我通过jQuery在页面添加了一个按钮btn1，我想点击个按钮调用后台的方法，请各位前辈赐教。
$(&#& + id).html(&&input value='提交' class='comment_btn' id='add'&&) ‘我想点击按钮调用台
提问者采纳
HWND CreateWindow( 　　LPCTSTR lpClassName, 　　LPCTSTR lpWindowName, 　　DWORD dwStyle, 　　int x, 　　int y, 　　int nWidth 　　int nHeight 　　HWND hWndParent, 　　HMENU hMenu 　　HANDLE hlnstance 　　LPVOID lpParam）；dwStyle指定创建窗口风格该参数列窗口风格组合S_BORDER：创建单边框窗口 　　WS_CAPTION：创建标题框窗口（包括WS_BODER风格） 　　WS_CHILD：创建窗口风格能与WS_POPUP风格合用 　　WS_CHLDWINDOW：与WS_CHILD相同 　　WS_CLIPCHILDREN:父窗口内绘图排除窗口区域创建父窗口使用风格 WS_CLlPBLINGS；排除窗口间相区域特定窗口接收WM_PAINT消息WS_CLIPSIBLINGS 风格所层叠窗口排除绘图外重绘指定窗口未指定WS_CLIPSIBLINGS风格并且窗口层叠则重绘窗口客户区重绘邻近窗口
其他类似问题
按默认排序
其他5条回答
input标签加入onclick事件按钮点击候发JS；使用jqurey ajax调用服务器端代码致：function fun(param){$({type:json,rl:test.aspx/serverFuncion,aram:{'param1':param},success:function(val){//},error:function(){alert(&request error.&);}});}
你点击了这个按钮 等于向后台回发一次 即触发后台的pageLoad事件 但是这个触发不是第一次加载 是IsPostBack 你回发的时候可以传一些参数回去 根据参数判断执行哪个方法 在PageLoad事件里例如：
Page_Load(){if(!IsPostBack){}else{//....你要做的}}
你的要求不可能达到。因为你添加的是客户端控件，它不可能触发后台的方法。不过，有个方法可以解决，你可以用JQUERY获取这个这个点击，然后用AJAX加参数调用后台的页面。在后面的页面中需要根据AJAX提交来的参数判断执行方法。
在input标签中加入onclick事件&input value='提交' class='comment_btn' id='add' onclick=&后台的方法名&&
会Ajax吗？在这个input标签内再写个onclick事件调用jQuery里面的Ajax访问后台代码
jquery的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁asp.net 后台调用页面js问题........................................................新手求解
[问题点数：62分，结帖人hellenren12345]
asp.net 后台调用页面js问题........................................................新手求解
[问题点数：62分，结帖人hellenren12345]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
相关帖子推荐：
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。关于JS调用后台方法，为页面绑定值的有关问题。
&来源：读书人网&【读书人网()：综合教育门户网站】
关于JS调用后台方法，为页面绑定值的问题。。script typetext/javascript function cs(jlzdID, userID)
关于JS调用后台方法，为页面绑定值的问题。。&&&&&&&&script&type="text/javascript"&&&&&&&&&&&&&&function&cs(jlzdID,&userID)&{&&&&&&&&&&&&&&&&var&a&=&'&%=BindAll("'&+&jlzdID&+&'","'&+&userID&+&'")&%&';&&&&&&&&&&&&&&&&window.location.href&=&location.&&&&&&&&&&&&&&&&alert(jlzdID&+&"\n"&+&userID+a);&&&&&&&&&&&&}&&&&&&&&&/script&为什么我这个脚本放在body外面就会报错呢，可是放在body里面我在传值调用这个脚本的时候后台给页面绑定值的方法走完页面就不会显示出来我绑定的值，但是返回的值我在前台可以接收到并弹出来。如果我直接把jlzdID与userID赋值，在页面打开的时候就会调用后台的方法并把值赋到页面。请问这个怎么可以在我调用JS时我的页面也把值赋上呢，这两个值是在别的程序里面传递过来的。。还有为什么脚本写在body外面会出错，在body外面应该怎么调用后台的代码呢？
&&看看和你的代码有啥区别[解决办法]放哪里都调用不到，记住，不要试图在&&%&%&、&%=&%&&中使用&JS&变量，因为其中的代码是&C#&代码，也即是后台的代码，JS&是属于前台的。9&楼的给的代码是错误的，&%=getString("'+val+'")&%&&对于后台来说，参数&xx&的值为&'&+val+&'，所以在页面上生成的&html&为&alert(''&+val+&'')，因此你能够得到一个正确的解，但过程是彻头彻尾的错了，如果要对参数&xx&做一些处理，如&return&xx.Substring(0,&1)&+&"";&JS&就报错了。要做到你预想的效果，只能是通过&Ajax，建议你看下&JQuery，其实也不复杂。[解决办法]这个如果必须有这种需求&用webservers&也是可以的//webservers[WebMethod(EnableSession&=&true)]&&&&public&string&updateCatalogState(int&cid,int&cstate)&&&&{&&&&&&&&if&(Session["userName"]&!=&null)&&&&&&&&{&&&&&&&&&&&&if&(CatalogAdmin.updateCatalogStateBycid(cid,&(cstate&==&0&?&1&:&0)))//查询数据&&&&&&&&&&&&&&&&return&"success";
&&&&&&&&&&&&else&&&&&&&&&&&&&&&&return&"";&&&&&&&&}&&&&&&&&else&&&&&&&&&&&&return&"";&&&&}&&a&href="javascript:"&onclick="ChangeUserState(&%#&Eval("Cid").ToString()&%&,&%#Eval("CState").ToString()%&)"&id="changeStateBtn"&11111&/a&&/span&&script&type="text/javascript"&&&&&function&ChangeUserState(cid,cstate){&&&&&&&if(confirm("确定操作？")){&&&&&&&&&&&&&&&&&&&&&WebService.updateCatalogState(cid,cstate,onSuccess);&&&&&&&&&&&&&&&}&&&&&return&&&&&&&&&&&&&&&&}&&&&function&onSuccess(result){&&&&&&&&if(result=="success"){&&&&&&&&&&&&alert("更改成功！");&&&&&&&&&&&&&window.location="&%#&Request.Url&%&";&&&&&&&&&&&&return&;&&&&&&&&}&&&&&&&&else&{&&&&&&&&&&&&&alert("更改失败！");&&&&&&&&&&&&&&&&&&&&&&&&&&&window.location="&%#&Request.Url&%&";&&&&&&&&&&&&return&;&&&&&&&&}&&&&}&/script&