码迷,mamicode.com
首页 > Web开发 > 详细

jquery.ajax请求aspx和ashx的异同 Jquery Ajax调用aspx页面方法

时间:2017-02-13 18:51:19      阅读:235      评论:0      收藏:0      [点我收藏+]

标签:参数详解   www   hello   let   news   send   命名空间   post方法   .com   

1.jquery.ajax请求aspx

请求aspx的静态方法要注意一下问题:

  (1)aspx的后台方法必须静态,而且添加webmethod特性

  (2)在ajax方法中contentType必须是“application/json”,

  (3)data传递的数据必须是严格的json数据,如"{‘a‘:‘aa‘,‘b‘:‘bb‘}",而且参数必须和静态方法的参数一 一对应

  (4)aspx的后台方法返回的数据默认形式是“{‘d‘:‘返回的内容‘}”,所以如果dataType指定为"json"必须通过data.d来获取返回数据

在webfrom页面中后台定义请求方法(方法必须静态,而且必须添加WebMethod特性)

[WebMethod]
public static string GetString(string str_a,string str_b)
{
    return str_a+str_b;
}

前台页面请求

技术分享
$(function(){
$.jax({
      url:‘default.aspx/GetString‘,
      type:‘post‘,
      contentType:‘application/json‘,//这里必须指明要传递到服务器的内容的编码方式,而且必须是json,否则后台方法获取不到传递数据。
      dataType:‘json‘,//客户端以json的方式去读取返回数据
      data:‘{‘str_a‘:‘aaa‘,‘str_b‘:‘bbbb‘}‘,//参数必须和后台的参数名称一样 data必须传递json格式的数据
      success:function(result){
              alert(result.d);//因为webmethod的方法默认返回的数据格式是json的格式而且数据格式如:"{‘d‘:‘返回的数据‘}",所以要通过.d来获取返回的内容。
                              }
     });
});
技术分享

2.请求ashx

 注意问题:

(1)ajax方法中的contentType如果指定必须指定为“application/x-www-form-urlencoded”,否则在ashx中request.form获取不到数据

(2)如果dataType为json,想要jQuery自动解析json数据,ashx必须返回严格的json数据,而且必须是双引号(用反义字符去反义)的格式,如: context.Response.Write("{\"d\":\"Hello World\"}"),否则jquery会解析json失败。

(3)如果因为contentType未设置或者不是“application/x-www-urlencoded”类型,reque.form获取不到数据,可以通过context.Request.InputStream来获取请求内容。

(4)在请求ashx中data参数有这几种形式: data:{‘a‘:‘aa‘,‘b‘:‘bb‘}, data:"a=aa&b=bb",data:{a:‘aa‘,b:‘bb‘},这三种数据都可以通过request.form[""]来获取到。

 

 

Jquery Ajax调用aspx页面方法

 

在asp.net webform开发中,用jQuery ajax传值一般有几种玩法

1)普通玩法:通过一般处理程序ashx进行处理;

2)高级玩法:通过aspx.cs中的静态方法+WebMethod进行处理;

3)文艺玩法:通过WCF进行处理。

第一种和第三种方法不在本文介绍范围之内,下面重点介绍第二种方法。

说明

在我们的印象里 asp.net的Web服务是以.asmx来结尾的,而我们现在的asp.net也能实现Web服务,这是因为默认Web.config中已经添加了System.Web.Handlers.ScriptModule,它是用于管理asp.net中ajax功能的HTTP模块,这样不管用户是请求.asmx文件还是.aspx文件,都会通过此处理程序来处理请求。

后台代码:

技术分享
using System.Web.Services; //引入命名空间

[WebMethod]
public static string SayHello()
{
    return "Hello Ajax!";
}
技术分享

前台页面代码:

<button id="btn">提交</button>

Javascript代码:

技术分享
$(function() {     
    $("#btn").click(function() {     
        $.ajax({              
            type: "post", //要用post方式                 
            url: "/Demo.aspx/SayHello",//方法所在页面和方法名
            contentType: "application/json; charset=utf-8",     
            dataType: "json",     
            success: function(data) {                    
                alert(data.d);//返回的数据用data.d获取内容
            },
            error: function(err) {     
                alert(err);     
            }     
        });
    });     
});
技术分享

 

效果:

技术分享

需要注意的地方

一、data参数写法

技术分享
//1)普通写法,JSON键值对,如:单个参数的
data:"{newsID:"+ id +"}",
//多个参数的形式:
data:"{newsID:"+ newsID +",name:"+ name +"}",
//2)文艺写法:各种引号,双引号,单引号拼接,如
//单个参数写法:
data:"{‘name‘:‘"+ name +"‘}",
//多个参数写法:
data: "{‘content‘:‘" + $("#content").val() + "‘,‘createTime‘:‘" + $("#createTime").val() + "‘,‘creator‘:‘" + $("#creator").val() + "‘}"
//容易出错!!!!!
技术分享

二、用QueryString传值是后台取不到的问题

在WebMethod()方法中,是不能通过 HttpContext.Current.QueryString.Get("id")来获取query string,
因为在WebMethod()默认是用POST方法提交的,而用GetQueryString是不能取到值的。
替代方法是用JS获取url中的参数,用ajax提交给后台方法是用:
 
 
技术分享
 
<script src="/js/jquery-1.11.3.js"></script>
< script type = "text/javascript" >
    function getArgs(strParame) {
        var args = new Object();
        var query = location.search.substring(1); // Get query string
        var pairs = query.split("&"); // Break at ampersand
        for (var i = 0; i < pairs.length; i++) {
            var pos = pairs[i].indexOf(‘=‘); // Look for "name=value"
            if (pos == -1) continue; // If not found, skip
            var argname = pairs[i].substring(0, pos); // Extract the name
            var value = pairs[i].substring(pos + 1); // Extract the value
            value = decodeURIComponent(value); // Decode it, if needed
            args[argname] = value; // Store as a property
        }
        return args[strParame]; // Return the object
} < /script>
技术分享

三、时间问题

技术分享
WCF 或 模拟Web服务处理JSON时返回时间格式问题。解决方法如下:

// 杂乱的时间
var rawDate = "/Date(1347120000000+0800)/";
// 提取时间字符串
var strDate = rawDate.substr(6, 13);
// 把时间字符串转化成int类型
var intDate = parseInt(strDate);
// 构造一个Date对象
var newDate = new Date(intDate);
// 将时间转化成当地时间格式
var myDate = newDate.toLocaleDateString();
// 最终结果
alert(myDate);

// 合并成一句
var resultDate = new Date(parseInt("/Date(1347120000000+0800)/".substr(6, 13))).toLocaleDateString();
技术分享

四、$.ajax参数详解

技术分享
//标准的写法:
$.ajax({
     type: "post",
     dataType: "json",
     contentType: "application/json", //注意:WebMethod()必须加这项,否则客户端数据不会传到服务端
     data:{如上所述},//注意:data参数可以是string个int类型
     url: "List.aspx/DeleteNews",//模拟web服务,提交到方法
     // 可选的 async:false,阻塞的异步就是同步
     beforeSend:function(){
          // do something.
          // 一般是禁用按钮等防止用户重复提交
          $("#btnClick").attr({disabled:"disabled"});
          // 或者是显示loading图片
     },
     success: function (data) {
          alert("success: " + data.d);//注意这里:必须通过data.d才能获取到服务器返回的值
          // 服务端可以直接返回Model,也可以返回序列化之后的字符串,如果需要反序列化:string json = JSON.parse(data.d);
          // 有时候需要嵌套调用ajax请求,也是可以的
     },
     complete: function(){
          //do something.
          $("#btnClick").removeAttr("disabled");
          // 隐藏loading图片
     },
     error: function (data) {
          alert("error: " + data.d);
     }
});
技术分享
 
 
 

jquery.ajax请求aspx和ashx的异同 Jquery Ajax调用aspx页面方法

标签:参数详解   www   hello   let   news   send   命名空间   post方法   .com   

原文地址:http://www.cnblogs.com/net-sky/p/6394937.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!