通过上一篇文章实例的实现，整个过程当中学习到很多知识点，了解了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()]，传递的参数个数也应该和方法的参数相同，注意这几部分我们的调试就简单多了，剩下的就是多多实践、加强原理的理解了。
