整个过程当中学习到很多知识点,了解了jquery、ajax在asp.net中的运用,加以总结,其实原理都是一样的,理解了一种,其他的注意很少的区别就可以了、灵活运用:
1、有参数的方法调用
示例代码如下:
前台jquery代码:
$(function() {
知道的一种就是ajax调后台的方法。
1、有参数的方法调用
示例代码如下:
前台jquery代码:
<span style="font-size:18px">$(function() {
var browers = browersestimate();
var params = '{browerstype:"' + browers + '"}';
$.ajax({
type: "post", //提交方式
url: "default.aspx/recorddata", //提交的页面/方法名
data: params, //参数(如果没有参数:null)
datatype: "json", //类型
contenttype: "application/json; charset=utf-8",
success: function(data) {
//返回的数据用data.d获取内容
alert(data.d);
},
error: function(err) {
alert(err);
});
});</span>
这个是jquery下ajax方法调用后台方法。
这个方法有几点需要说明:
type方式必须是post,再有就是后台的方法必须是静态的,方法声明要加上特性[system.web.services.webmethod()],传递的参数个数也应该和方法的参数相同。
asp.net后台方法:
<span style="font-size:18px"> [system.web.services.webmethod()]
public static void recorddata(string browerstype)
{
if (browsercontrol.counters == null)
{
browsercontrol.initdata(0);
}
if (browerstype == "")
{
browerstype = "other";
}
browsercontrol.addonebybrowsertype(browerstype);
if (browsercontrol.writeindatabase())
{
browsercontrol.oldtotalcount = browsercontrol.counters.count;
}
else
{
browsercontrol.oldtotalcount = 0;
}
}</span>
2、无参数的方法调用
示例代码:
前台jquery代码
<span style="font-size:18px">$(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;
});
});</span>
asp.net后台方法
<span style="font-size:18px">[system.web.services.webmethod()]
public static string sayhello()
{
return "hello ajax!";
}</span>
3、返回数组方法的调用
示例前台jquery代码:
<span style="font-size:18px">$(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("" + this + "");
});
alert(data.d);
},
error: function(err) {
alert(err);
}
});
//禁用按钮的提交
return false;
});
});</span>
asp.net 后台代码:asp.net 后台代码:
<span style="font-size:18px">[system.web.services.webmethod()]
public static list getarray()
{
list li = new list();
for (int i = 0; i < 10; i++)
li.add(i + "");
return li;
} </span>
4、操作xml
<span style="font-size:18px">xnl文件示例:
<?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代码:jquery代码:</span>
jquery前台代码:
<span style="font-size:18px">$(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("id:" + $(this).find("id").text() +"");
$("#list").append("name:"+ $(this).find("name").text() + "");
})
},
error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数
alert(status);
}
});
//禁用按钮的提交
return false;
});
});</span>
总结
主要是我们要注意js代码里面的方法名要与后台一致,再有就是后台的方法必须是静态的,方法声明要加上特性[system.web.services.webmethod()],传递的参数个数也应该和方法的参数相同,注意这几部分我们的调试就简单多了,剩下的就是多多实践、加强原理的理解了。
更多asp.net中jquery、ajax调用后台方法总结。