62,253
社区成员
发帖
与我相关
我的任务
分享jquery ajax问题
以前用微软的ajaxpro 调用后台方法
最近想学jquery ，不知jquery如何调用后台方法？
如何有更多jquery学习那就更好，再加分
互相学习~~
最近想学jquery ，不知jquery如何调用后台方法？
如何有更多jquery学习那就更好，再加分
互相学习~~
...全文
请发表友善的回复…
发表回复
Z_X_S_ 2012-03-19
- 打赏
- 举报
37楼 你说的那东西 不但别人看不懂 反而懂点的 看了之后都蒙了
Z_X_S_ 2012-03-19
- 打赏
- 举报
简单易懂
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
$("#imgbtnSubmit").click(function () { //ajax就是用js在A页面跳转传参 在web页面的加载时执行一些逻辑关系
$.post("ajax.aspx", //post方式提交 post安全不在地址栏显示 传输数据量大 post有三个参数第一个是要跳转的页面在那个页面的加载的时候执行操作
{ name: $("#Text2").val(), pwd: $("#Text1").val()},
//第二个是你要传的参数name: $("#Text2").val()这种格式 在B页面的加载时候用response.from["name"]接受 “切忌 val 要加括号”
function (aa) { //回调函数等到B页面执行完之后用response.write(xx+"")“切忌 response.write(xx+"")的时候一定输出的是字符串” 输出之后回调函数function (aa) aa就可以接收到你输出的值 “切忌 response.write(xx+"")输出之后一定response.end()要不然就把B页面的除了page指令的代码都删掉”
if (aa == "true") {
location.href("../MemberManage.aspx")
} else {
alert('失败');
}
})
});
});
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
$("#imgbtnSubmit").click(function () { //ajax就是用js在A页面跳转传参 在web页面的加载时执行一些逻辑关系
$.post("ajax.aspx", //post方式提交 post安全不在地址栏显示 传输数据量大 post有三个参数第一个是要跳转的页面在那个页面的加载的时候执行操作
{ name: $("#Text2").val(), pwd: $("#Text1").val()},
//第二个是你要传的参数name: $("#Text2").val()这种格式 在B页面的加载时候用response.from["name"]接受 “切忌 val 要加括号”
function (aa) { //回调函数等到B页面执行完之后用response.write(xx+"")“切忌 response.write(xx+"")的时候一定输出的是字符串” 输出之后回调函数function (aa) aa就可以接收到你输出的值 “切忌 response.write(xx+"")输出之后一定response.end()要不然就把B页面的除了page指令的代码都删掉”
if (aa == "true") {
location.href("../MemberManage.aspx")
} else {
alert('失败');
}
})
});
});
小纯洁001 2011-08-05
- 打赏
- 举报
菜鸟！学习中~~
VirusFu 2010-01-11
- 打赏
- 举报
jf了
haiguangsuse 2009-06-05
- 打赏
- 举报
jQuery技巧大放送
1、关于页面元素的引用通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。2、jQuery对象与dom对象的转换只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。普通的dom对象一般可以通过$()转换成jquery对象。如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方法。由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。以下几种写法都是正确的：$("#msg").html();$("#msg")[0].innerHTML;$("#msg").eq(0)[0].innerHTML;$("#msg").get(0).innerHTML;3、如何获取jQuery集合的某一项对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个<div>元素的内容。有如下两种方法：$("div").eq(2).html(); //调用jquery对象的方法$("div").get(2).innerHTML; //调用dom的方法属性4、同一函数实现set和getJquery中的很多方法都是如此，主要包括如下几个：$("#msg").html(); //返回id为msg的元素节点的html内容。$("#msg").html("<b>new content</b>"); //将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content$("#msg").text(); //返回id为msg的元素节点的文本内容。$("#msg").text("<b>new content</b>"); //将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示<b>new content</b>$("#msg").height(); //返回id为msg的元素的高度$("#msg").height("300"); //将id为msg的元素的高度设为300$("#msg").width(); //返回id为msg的元素的宽度$("#msg").width("300"); //将id为msg的元素的宽度设为300$("input").val("); //返回表单输入框的value值$("input").val("test"); //将表单输入框的value值设为test$("#msg").click(); //触发id为msg的元素的单击事件$("#msg").click(fn); //为id为msg的元素单击事件添加函数同样blur,focus,select,submit事件都可以有着两种调用方法5、集合处理功能对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jquery已经为我们提供的很方便的方法进行集合的处理。包括两种形式：$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]}) //为索引分别为0，1，2的p元素分别设定不同的字体颜色。$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]}) //实现表格的隔行换色效果$("p").click(function(){alert($(this).html())}) //为每个p元素增加了click事件，单击某个p元素则弹出其内容6、扩展我们需要的功能$.extend({min: function(a, b){return a < b?a:b; },max: function(a, b){return a > b?a:b; } }); //为jquery扩展了min,max两个方法使用扩展的方法（通过“$.方法名”调用）：alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));7、支持方法的连写所谓连写，即可以对一个jquery对象连续调用各种不同的方法。例如：$("p").click(function(){alert($(this).html())}).mouseover(function(){alert('mouse over event')}).each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]});8、操作元素的样式主要包括以下几种方式：$("#msg").css("background"); //返回元素的背景颜色$("#msg").css("background","#ccc") //设定元素背景为灰色$("#msg").height(300); $("#msg").width("200"); //设定宽高$("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式$("#msg").addClass("select"); //为元素增加名称为select的class$("#msg").removeClass("select"); //删除元素名称为select的class$("#msg").toggleClass("select"); //如果存在（不存在）就删除（添加）名称为select的class
9、完善的事件处理功能
Jquery已经为我们提供了各种事件处理方法，我们无需在html元素上直接写事件，而可以直接为通过jquery获取的对象添加事件。如：$("#msg").click(function(){alert("good")}) //为元素添加了单击事件$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]})//为三个不同的p元素单击事件分别设定不同的处理jQuery中几个自定义的事件：（1）hover(fn1,fn2)：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。//当鼠标放在表格的某行上时将class置为over，离开时置为out。$("tr").hover(function(){$(this).addClass("over");},function(){$(this).addClass("out"); });（2）ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。$(document).ready(function(){alert("Load Success")})//页面加载完毕提示“Load Success”,相当于onload事件。与$(fn)等价（3）toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。//每次点击时轮换添加和删除名为selected的class。$("p").toggle(function(){ $(this).addClass("selected"); },function(){ $(this).removeClass("selected"); });（4）trigger(eventtype): 在每一个匹配的元素上触发某类事件。例如：$("p").trigger("click"); //触发所有p元素的click事件（5）bind(eventtype,fn)，unbind(eventtype): 事件的绑定与反绑定从每一个匹配的元素中（添加）删除绑定的事件。例如：$("p").bind("click", function(){alert($(this).text());}); //为每个p元素添加单击事件$("p").unbind(); //删除所有p元素上的所有事件$("p").unbind("click") //删除所有p元素上的单击事件10、几个实用特效功能其中toggle()和slidetoggle()方法提供了状态切换功能。如toggle()方法包括了hide()和show()方法。slideToggle()方法包括了slideDown()和slideUp方法。11、几个有用的jQuery方法$.browser.浏览器类型：检测浏览器类型。有效参数：safari, opera, msie, mozilla。如检测是否ie：$.browser.isie，是ie浏览器则返回true。$.each(obj, fn)：通用的迭代函数。可用于近似地迭代对象和数组（代替循环）。如$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); }); 等价于：var tempArr=[0,1,2];for(var i=0;i<tempArr.length;i++){alert("Item #"+i+": "+tempArr[ i ]);}也可以处理json数据，如$.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });结果为：Name:name, Value:JohnName:lang, Value:JS$.extend(target,prop1,propN)：用一个或多个其他对象来扩展一个对象，返回这个被扩展的对象。这是jquery实现的继承方式。如：$.extend(settings, options); //合并settings和options，并将合并结果返回settings中，相当于options继承setting并将继承结果保存在setting中。var settings = $.extend({}, defaults, options);//合并defaults和options，并将合并结果返回到setting中而不覆盖default内容。可以有多个参数（合并多项并返回）$.map(array, fn)：数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中，并返回生成的新数组。如：var tempArr=$.map( [0,1,2], function(i){ return i + 4; });tempArr内容为：[4,5,6]var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });tempArr内容为：[2,3]$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。如：$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4]$.trim(str)：删除字符串两端的空白字符。 如：$.trim(" hello, how are you? "); //返回"hello,how are you? "12、解决自定义方法或其他类库与jQuery的冲突很多时候我们自己定义了$(id)方法来获取一个元素，或者其他的一些js类库如prototype也都定义了$方法，如果同时把这些内容放在一起就会引起变量方法定义冲突，Jquery对此专门提供了方法用于解决此问题。使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用Jquery的时候只要将所有的$换成jQuery即可，如原来引用对象方法$("#msg")改为jQuery("#msg")。如：jQuery.noConflict(); // 开始使用jQueryjQuery("div p").hide();// 使用其他库的 $() $("content").style.display = 'none';
1、关于页面元素的引用通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。2、jQuery对象与dom对象的转换只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。普通的dom对象一般可以通过$()转换成jquery对象。如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方法。由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。以下几种写法都是正确的：$("#msg").html();$("#msg")[0].innerHTML;$("#msg").eq(0)[0].innerHTML;$("#msg").get(0).innerHTML;3、如何获取jQuery集合的某一项对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个<div>元素的内容。有如下两种方法：$("div").eq(2).html(); //调用jquery对象的方法$("div").get(2).innerHTML; //调用dom的方法属性4、同一函数实现set和getJquery中的很多方法都是如此，主要包括如下几个：$("#msg").html(); //返回id为msg的元素节点的html内容。$("#msg").html("<b>new content</b>"); //将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content$("#msg").text(); //返回id为msg的元素节点的文本内容。$("#msg").text("<b>new content</b>"); //将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示<b>new content</b>$("#msg").height(); //返回id为msg的元素的高度$("#msg").height("300"); //将id为msg的元素的高度设为300$("#msg").width(); //返回id为msg的元素的宽度$("#msg").width("300"); //将id为msg的元素的宽度设为300$("input").val("); //返回表单输入框的value值$("input").val("test"); //将表单输入框的value值设为test$("#msg").click(); //触发id为msg的元素的单击事件$("#msg").click(fn); //为id为msg的元素单击事件添加函数同样blur,focus,select,submit事件都可以有着两种调用方法5、集合处理功能对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jquery已经为我们提供的很方便的方法进行集合的处理。包括两种形式：$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]}) //为索引分别为0，1，2的p元素分别设定不同的字体颜色。$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]}) //实现表格的隔行换色效果$("p").click(function(){alert($(this).html())}) //为每个p元素增加了click事件，单击某个p元素则弹出其内容6、扩展我们需要的功能$.extend({min: function(a, b){return a < b?a:b; },max: function(a, b){return a > b?a:b; } }); //为jquery扩展了min,max两个方法使用扩展的方法（通过“$.方法名”调用）：alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));7、支持方法的连写所谓连写，即可以对一个jquery对象连续调用各种不同的方法。例如：$("p").click(function(){alert($(this).html())}).mouseover(function(){alert('mouse over event')}).each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]});8、操作元素的样式主要包括以下几种方式：$("#msg").css("background"); //返回元素的背景颜色$("#msg").css("background","#ccc") //设定元素背景为灰色$("#msg").height(300); $("#msg").width("200"); //设定宽高$("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式$("#msg").addClass("select"); //为元素增加名称为select的class$("#msg").removeClass("select"); //删除元素名称为select的class$("#msg").toggleClass("select"); //如果存在（不存在）就删除（添加）名称为select的class
9、完善的事件处理功能
Jquery已经为我们提供了各种事件处理方法，我们无需在html元素上直接写事件，而可以直接为通过jquery获取的对象添加事件。如：$("#msg").click(function(){alert("good")}) //为元素添加了单击事件$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]})//为三个不同的p元素单击事件分别设定不同的处理jQuery中几个自定义的事件：（1）hover(fn1,fn2)：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。//当鼠标放在表格的某行上时将class置为over，离开时置为out。$("tr").hover(function(){$(this).addClass("over");},function(){$(this).addClass("out"); });（2）ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。$(document).ready(function(){alert("Load Success")})//页面加载完毕提示“Load Success”,相当于onload事件。与$(fn)等价（3）toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。//每次点击时轮换添加和删除名为selected的class。$("p").toggle(function(){ $(this).addClass("selected"); },function(){ $(this).removeClass("selected"); });（4）trigger(eventtype): 在每一个匹配的元素上触发某类事件。例如：$("p").trigger("click"); //触发所有p元素的click事件（5）bind(eventtype,fn)，unbind(eventtype): 事件的绑定与反绑定从每一个匹配的元素中（添加）删除绑定的事件。例如：$("p").bind("click", function(){alert($(this).text());}); //为每个p元素添加单击事件$("p").unbind(); //删除所有p元素上的所有事件$("p").unbind("click") //删除所有p元素上的单击事件10、几个实用特效功能其中toggle()和slidetoggle()方法提供了状态切换功能。如toggle()方法包括了hide()和show()方法。slideToggle()方法包括了slideDown()和slideUp方法。11、几个有用的jQuery方法$.browser.浏览器类型：检测浏览器类型。有效参数：safari, opera, msie, mozilla。如检测是否ie：$.browser.isie，是ie浏览器则返回true。$.each(obj, fn)：通用的迭代函数。可用于近似地迭代对象和数组（代替循环）。如$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); }); 等价于：var tempArr=[0,1,2];for(var i=0;i<tempArr.length;i++){alert("Item #"+i+": "+tempArr[ i ]);}也可以处理json数据，如$.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });结果为：Name:name, Value:JohnName:lang, Value:JS$.extend(target,prop1,propN)：用一个或多个其他对象来扩展一个对象，返回这个被扩展的对象。这是jquery实现的继承方式。如：$.extend(settings, options); //合并settings和options，并将合并结果返回settings中，相当于options继承setting并将继承结果保存在setting中。var settings = $.extend({}, defaults, options);//合并defaults和options，并将合并结果返回到setting中而不覆盖default内容。可以有多个参数（合并多项并返回）$.map(array, fn)：数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中，并返回生成的新数组。如：var tempArr=$.map( [0,1,2], function(i){ return i + 4; });tempArr内容为：[4,5,6]var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });tempArr内容为：[2,3]$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。如：$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4]$.trim(str)：删除字符串两端的空白字符。 如：$.trim(" hello, how are you? "); //返回"hello,how are you? "12、解决自定义方法或其他类库与jQuery的冲突很多时候我们自己定义了$(id)方法来获取一个元素，或者其他的一些js类库如prototype也都定义了$方法，如果同时把这些内容放在一起就会引起变量方法定义冲突，Jquery对此专门提供了方法用于解决此问题。使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用Jquery的时候只要将所有的$换成jQuery即可，如原来引用对象方法$("#msg")改为jQuery("#msg")。如：jQuery.noConflict(); // 开始使用jQueryjQuery("div p").hide();// 使用其他库的 $() $("content").style.display = 'none';
yan286093636 2009-06-05
- 打赏
- 举报
学习了..............
wangchao813 2009-06-05
- 打赏
- 举报
我的原则是先理论懂了后再去实践
caobingyi 2009-06-05
- 打赏
- 举报
up
Hemingway718 2009-06-05
- 打赏
- 举报
UP
andrewsway 2009-06-05
- 打赏
- 举报
[Quote=引用 39 楼 shangwg 的回复:]
如果你较多在.net平台上作，就用ajax.net,蛮好的了。
[/Quote]
支持，特别是用VS2008的时候，直接用微软自己带的ajax多好了
如果用asp.net mvc 的话，用jQuery 挺好，曾顺那个教程挺好，如果只讲jQuery，等再稍微深点就更好了
如果你较多在.net平台上作，就用ajax.net,蛮好的了。
[/Quote]
支持，特别是用VS2008的时候，直接用微软自己带的ajax多好了
如果用asp.net mvc 的话，用jQuery 挺好，曾顺那个教程挺好，如果只讲jQuery，等再稍微深点就更好了
shangwg 2009-06-05
- 打赏
- 举报
如果你较多在.net平台上作，就用ajax.net,蛮好的了。
ld1201 2009-06-05
- 打赏
- 举报
要异步获取数据。下JQ的api手册和去网上找曾顺的JQuery视频入门。
我的资源里有.net和jq+json的例子
我的资源里有.net和jq+json的例子
微工程 2009-06-04
- 打赏
- 举报
精通Javascript+jQuery
阿非 2009-06-04
- 打赏
- 举报
[Quote=引用 14 楼 zhouyongli41 的回复:]
比如后台返回的是dataset或datatable
返回该用什么形式，html,xml,json,在前台js里如何控制
希望能给个详细的例子，用ajaxpro很方便它返回了一个类似dataset的对象
[/Quote]
返回json 就可以了。
如果是05的话 ，调用服务器方法 两种办法 一，WebMethod 需创建Webservice. 二，PageMethod 不需创建Webservice,是WebMethod的轻量级实现，但需要安装asp.net ajax tookit,并修改webconfig.
比如后台返回的是dataset或datatable
返回该用什么形式，html,xml,json,在前台js里如何控制
希望能给个详细的例子，用ajaxpro很方便它返回了一个类似dataset的对象
[/Quote]
返回json 就可以了。
如果是05的话 ，调用服务器方法 两种办法 一，WebMethod 需创建Webservice. 二，PageMethod 不需创建Webservice,是WebMethod的轻量级实现，但需要安装asp.net ajax tookit,并修改webconfig.
阿非 2009-06-04
- 打赏
- 举报
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CallWebMethod.aspx.cs" Inherits="ajax_jquery_CallWebMethod" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
.jTemplatesTest {
background: #DDD;
border: 1px solid #000;
margin: 2em;
width: 480px;
}
.jTemplatesTest * {
padding: 4px;
margin: 2px auto;
}
.jTemplatesTest td,tr {
background: #EEE;
border: 1px solid black;
}
</style>
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="jquery-jtemplates.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#start").click(function() {
$.ajax({
type: "POST",
url: "jQueryWebService.asmx/GetDT",
data: "{}",
contentType: "application/json; charset=utf-8",
success: function(msg) {
ApplyTemplate(eval('(' + msg.text + ')'));
}
});
});
});
function ApplyTemplate(data) {
$('#result').setTemplateElement('template');
$('#result').processTemplate(data);
}
</script>
</head>
<body>
<form id="form1" runat="server">
获取数据并填充表格:<input type="button" id="start" value="运行" />
<!-- Template content -->
<textarea id="template" style="display:none">
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
{#foreach $T.d as record}
<tr>
<td>{$T.record.ID}</td>
<td>{$T.record.Name}</td>
</tr>
{#/for}
</tbody>
</table>
</textarea>
<!-- Output elements -->
<div id="result" class="jTemplatesTest"></div>
</form>
</body>
</html>
jQueryWebService.cs
using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Data;
using System.Text;
/// <summary>
/// jQueryWebService 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class jQueryWebService : System.Web.Services.WebService
{
public jQueryWebService()
{
//如果使用设计的组件，请取消注释以下行
//InitializeComponent();
}
private DataTable GetDataTable()
{
DataTable dt = new DataTable();
dt.Columns.Add(new DataColumn("ID", typeof(Int32)));
dt.Columns.Add(new DataColumn("Name", typeof(String)));
DataRow dr = dt.NewRow();
dr[0] = 1;
dr[1] = "郑";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr[0] = 2;
dr[1] = "李";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr[0] = 3;
dr[1] = "王";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr[0] = 4;
dr[1] = "张";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr[0] = 5;
dr[1] = "刘";
dt.Rows.Add(dr);
return dt;
}
private string CreateJsonParameters(DataTable dt)
{
StringBuilder JsonString = new StringBuilder();
//Exception Handling
if (dt != null && dt.Rows.Count > 0)
{
JsonString.Append("{ ");
JsonString.Append("d:[ ");
for (int i = 0; i < dt.Rows.Count; i++)
{
JsonString.Append("{ ");
for (int j = 0; j < dt.Columns.Count; j++)
{
if (j < dt.Columns.Count - 1)
{
JsonString.Append(dt.Columns[j].ColumnName + ":" + "\"" + dt.Rows[i][j].ToString() + "\",");
}
else if (j == dt.Columns.Count - 1)
{
JsonString.Append(dt.Columns[j].ColumnName + ":" + "\"" + dt.Rows[i][j].ToString() + "\"");
}
}
/**/
/*end Of String*/
if (i == dt.Rows.Count - 1)
{
JsonString.Append("} ");
}
else
{
JsonString.Append("}, ");
}
}
JsonString.Append("]}");
//{ d:[ { ID:"1",Name:"郑"}, { ID:"2",Name:"李"}, { ID:"3",Name:"王"}, { ID:"4",Name:"张"}, { ID:"5",Name:"刘"} ]}
return JsonString.ToString();
}
else
{
return null;
}
}
[WebMethod]
public string GetDT()
{
return CreateJsonParameters(GetDataTable());
}
}
mxc1225 2009-06-04
- 打赏
- 举报
有这么多好方法啊!?呵呵!
zhouyongli41 2009-06-04
- 打赏
- 举报
[Quote=引用 15 楼 wxg22526451 的回复:]
参考：
http://blog.csdn.net/wangjun8868/archive/2008/09/26/2983149.aspx
http://space.cnblogs.com/group/topic/9741/
[/Quote]
这个也不错，学习了一种了二级联运的
参考：
http://blog.csdn.net/wangjun8868/archive/2008/09/26/2983149.aspx
http://space.cnblogs.com/group/topic/9741/
[/Quote]
这个也不错，学习了一种了二级联运的
zhouyongli41 2009-06-04
- 打赏
- 举报
总算调试好了，为什么就没人给我个详细的呢，还是我没明白吗？
zhouyongli41 2009-06-04
- 打赏
- 举报
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<style type="text/css">
.show{ display:block;}
.hide{ display:none;}
</style>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
//这个方法把ajax方法封装一下，方便调用。
function myajax(){
//var obj=jsonData();
$.ajax({
type:'post',
url:'ajax.aspx',
data:jsonData(),//可以直接加一个函数名。
dataType:'json',
beforeSend:beforecall,
success:callback
});
}
//封装json数据，为了代码清晰
function jsonData(){
var jsonStr="({";
jsonStr+="\"name\":";
jsonStr+="\"zhouyongli\"";
jsonStr+=",";
jsonStr+="\"birth\":";
jsonStr+="\"19840307\"";
jsonStr+="})";
return eval(jsonStr);//关键在于转换。
}
//调用前方法,不成功
function beforecall(){
$('#wait').addClass("show").append('调出中...');
//alert(jsonData());//测试是否调用
}
//回调函数
function callback(data){
$('#response').append(data.name+data.birth);
$('#wait').css("display","none");
}
//onload()事件
$(function(){
$('#confirm').click(myajax);
})
</script>
</head>
<body>
<div id="confirm">点击</div>
<div id="response">接收后台数据</div>
<div id="wait" class="hide">hello</div>
</body>
</html>
ajax.aspx页
public partial class ajax : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Hashtable ht = new Hashtable();
string name = Request.Params["name"].ToString();
string birth = Request.Params["birth"].ToString();
if (!string.IsNullOrEmpty(name) && !string.IsNullOrEmpty(birth))
{
Response.ContentType = "Application/json";
//Response.Write(CreareJson("this is ok!", 1, name, birth));
ht.Add("info", "成功了");
ht.Add("sta", "状态");
ht.Add("name", name);
ht.Add("birth", birth);
Response.Write(CreateJsonParams(ht));
}
Response.End();
}
private string CreateJsonParams(Hashtable items)
{
string returnStr = "";
foreach (DictionaryEntry item in items)
{
returnStr += "\"" + item.Key.ToString() + "\":\"" + item.Value.ToString() + "\",";
}
return "{" + returnStr.Substring(0, returnStr.Length - 1) + "}";
}
}
INCpig 2009-06-04
- 打赏
- 举报
好好学习
加载更多回复（27）
