欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

asp.net中jquery、ajax调用靠山方法总结

更新时间: 2014-01-05 00:56:41 责任编辑: Author_N1

 

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

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


1、有参数的方法调用


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

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


1、有参数的方法调用  

示例代码如下:

 

前台jQuery代码:

$(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);     
         });   
     });


 

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

 

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

 

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

 

asp.net后台方法:

  [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;
        }
    }

2、无参数的方法调用

 

 

示例代码:

 

前台jQuery代码

$(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;     
    });     
});


asp.net后台方法


[System.Web.Services.WebMethod()]
public static string SayHello()     
{     
return "Hello Ajax!";     
}

3、返回数组方法的调用


示例前台JQuery代码:


$(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;     
    });     
});


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


[System.Web.Services.WebMethod()]   
public static List GetArray()     
{     
  List li = new List();     
for (int i = 0; i < 10; i++)     
        li.Add(i + "");     
return li;     
} 


4、操作xml


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代码:

 

Jquery前台代码:


$(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;     
    });     
});


总结

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

上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2014-01-05 00:56:41
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/1669/
本文WWW.DOC100.NET DOC100.NET版权所有。