首页 > Asp.net开发 > Asp.net中JQuery、ajax调用后台方法总结

Asp.net中JQuery、ajax调用后台方法总结

通过上一篇文章实例的实现,整个过程当中学习到很多知识点,了解了Jquery、Ajax在asp.net中的运用,加以总结,其实原理都是一样的,理解了一种,其他的注意很少的区别就可以了、灵活运用:

 

1、有参数的方法调用

 

示例代码如下:
前台jQuery代码:
$(function() { 

知道的一种就是ajax调后台的方法。

 

1、有参数的方法调用

示例代码如下:

 

前台jQuery代码:

[plain][/plain] view plaincopyprint?

  1. <span style="font-size:18px">$(function() {
  2.   var browers = browersEstimate();
  3.   var params = '{browersType:"' + browers + '"}';
  4.   $.ajax({
  5.       type: "POST",                   //提交方式
  6.       url: "Default.aspx/RecordData",   //提交的页面/方法名
  7.       data: params,                   //参数(如果没有参数:null)
  8.       dataType: "json",                   //类型
  9.       contentType: "application/json; charset=utf-8",
  10.       success: function(data) {
  11.               //返回的数据用data.d获取内容
  12.                 alert(data.d);
  13.           },
  14.           error: function(err) {
  15.               alert(err);
  16.          });
  17.      });</span>

这个是jquery下Ajax方法调用后台方法。

 

这个方法有几点需要说明:

 

type方式必须是post,再有就是后台的方法必须是静态的,方法声明要加上特性[System.Web.Services.WebMethod()],传递的参数个数也应该和方法的参数相同。

 

asp.net后台方法:

[plain][/plain] view plaincopyprint?

  1. <span style="font-size:18px">  [System.Web.Services.WebMethod()]
  2.     public static void RecordData(string browersType)
  3.     {
  4.         if (BrowserControl.Counters == null)
  5.         {
  6.             BrowserControl.InitData(0);
  7.         }
  8.         if (browersType == "")
  9.         {
  10.             browersType = "Other";
  11.         }
  12.         BrowserControl.AddOneByBrowserType(browersType);
  13.         if (BrowserControl.WriteInDataBase())
  14.         {
  15.             BrowserControl.OldTotalCount = BrowserControl.Counters.Count;
  16.         }
  17.         else
  18.         {
  19.             BrowserControl.OldTotalCount = 0;
  20.         }
  21.     }</span>

2、无参数的方法调用

 

示例代码:

 

前台jQuery代码

[plain][/plain] view plaincopyprint?

  1. <span style="font-size:18px">$(function() {
  2.     $("#btnOK").click(function() {
  3.         $.ajax({
  4.             //要用post方式
  5.             type: "Post",
  6.             //方法所在页面和方法名
  7.             url: "data.aspx/SayHello",
  8.             contentType: "application/json; charset=utf-8",
  9.             dataType: "json",
  10.             success: function(data) {
  11.                 //返回的数据用data.d获取内容
  12.                 alert(data.d);
  13.             },
  14.             error: function(err) {
  15.                 alert(err);
  16.             }
  17.         });
  18.         //禁用按钮的提交
  19.         return false;
  20.     });
  21. });</span>

 

asp.net后台方法

 

[plain][/plain] view plaincopyprint?

  1. <span style="font-size:18px">[System.Web.Services.WebMethod()]
  2. public static string SayHello()
  3. {
  4. return "Hello Ajax!";
  5. }</span>

 

3、返回数组方法的调用

 

示例前台JQuery代码:

 

[plain][/plain] view plaincopyprint?

  1. <span style="font-size:18px">$(function() {
  2.     $("#btnOK").click(function() {
  3.         $.ajax({
  4.             type: "Post",
  5.             url: "data.aspx/GetArray",
  6.             contentType: "application/json; charset=utf-8",
  7.             dataType: "json",
  8.             success: function(data) {
  9.                 //插入前先清空ul
  10.                 $("#list").html("");
  11.                 //递归获取数据
  12.                 $(data.d).each(function() {
  13.                     //插入结果到li里面
  14.                     $("#list").append("" + this + "");
  15.                 });
  16.                 alert(data.d);
  17.             },
  18.             error: function(err) {
  19.                 alert(err);
  20.             }
  21.         });
  22.         //禁用按钮的提交
  23.         return false;
  24.     });
  25. });</span>

 

asp.net 后台代码:asp.net 后台代码:

 

[plain][/plain] view plaincopyprint?

  1. <span style="font-size:18px">[System.Web.Services.WebMethod()]
  2. public static List GetArray()
  3. {
  4.   List li = new List();
  5. for (int i = 0; i < 10; i++)
  6.         li.Add(i + "");
  7. return li;
  8. } </span>

 

4、操作xml

 

[html][/html] view plaincopyprint?

  1. <span style="font-size:18px">xnl文件示例:
  2.  <?xml version="1.0" encoding="utf-8" ?>
  3. <data>
  4.   <item>
  5.     <id>1</id>
  6.     <name>qwe</name>
  7.   </item>
  8.   <item>
  9.     <id>2</id>
  10.     <name>asd</name>
  11.   </item>
  12. </data>
  13. Jquery代码:Jquery代码:</span>

 

Jquery前台代码:

 

[plain][/plain] view plaincopyprint?

  1. <span style="font-size:18px">$(function() {
  2.     $("#btnOK").click(function() {
  3.         $.ajax({
  4.             url: "XMLtest.xml",
  5.             dataType: 'xml', //返回的类型为XML ,和前面的Json,不一样了
  6.             success: function(xml) {
  7.                 //清空list
  8.                 $("#list").html("");
  9.                 //查找xml元素
  10.                 $(xml).find("data>item").each(function() {
  11.                     $("#list").append("id:" + $(this).find("id").text() +"");
  12.                     $("#list").append("Name:"+ $(this).find("name").text() + "");
  13.                 })
  14.             },
  15.             error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数
  16.                 alert(status);
  17.             }
  18.         });
  19.         //禁用按钮的提交
  20.         return false;
  21.     });
  22. });</span>

 

总结

主要是我们要注意js代码里面的方法名要与后台一致,再有就是后台的方法必须是静态的,方法声明要加上特性[System.Web.Services.WebMethod()],传递的参数个数也应该和方法的参数相同,注意这几部分我们的调试就简单多了,剩下的就是多多实践、加强原理的理解了。


本文固定链接: http://www.devba.com/index.php/archives/3336.html | 开发吧

报歉!评论已关闭.