• 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!";
    }
    复制代码

    前台页面代码:

    <form id="form1" runat="server">
    <div>
        <asp:Button ID="btn" runat="server" Text="验证用户" />
    </div>
    </form>

    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 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);
         }
    });
    复制代码
  • 相关阅读:
    "AWT-EventQueue-0" java.lang.UnsatisfiedLinkError: no freetype in java.library.path
    Cookie的简单使用
    转发与重定向
    JSON 在Ajax数据交换中的简单运用
    Word/Excel/PPT 2016商务办公从入门到精通
    高性能MySQL(第3版)
    精通CFD工程仿真与案例实战 FLUENT GAMBIT ICEM CFD Tecplot 第2版
    HTML、CSS和JavaScript入门经典(第2版)
    C#图解教程(第4版)
    巧学巧用DreamweaverCS6、FlashCS6、FireworksCS6网站制作
  • 原文地址:https://www.cnblogs.com/sunbingqiang/p/8535442.html
Copyright © 2020-2023  润新知