jquery ajax,ashx,json的用法总结


Posted in Javascript onFebruary 12, 2014

jquery提供的简化版的ajax调用方法通常如下:

    function post() { 
    $("#divWait").show(); 
    $("#btnPost").attr("disabled", "disabled"); 
    $.post("../PostIt.ashx", 
                    { 
                        msgContent: $("#msgContent").val() 
                    }, 
                    function (data) { 
                        if (data.indexOf('OK') > -1) { 
                            alert(data); 
                        } 
                        else {
                            } 
                        $("#divWait").hide(); 
                        $("#btnPost").attr("disabled", ""); 
                    }); 
}

在开发的时候,要接受json格式的返回值时,上面的方法貌似不能行,上面的方法貌似接受的是text的文本行。因此,采用jQuery的底层Ajax实现方法。

该方法参数也很多,具体可看帮助文档。本人的常规用法

    function doPostAjax(){ 
            $("#divWait").show(); 
            $("#btnPost").attr("disabled", "disabled"); 
            $.ajax({ 
                url: '../PostIt.ashx', 
                type: 'POST', 
                dataType: 'json', 
                data: { msgContent: $("#msgContent").val() }, 
                timeout: 60000, 
                error: function (XMLHttpRequest, textStatus, errorThrown) {//请求错误 时执行的方法 
                    alert("error!" + errorThrown); 
                    $("#divWait").hide(); 
                    $("#btnPost").attr("disabled", ""); 
                }, 
                success: function (data, txtSataus) {//请求成功时执行的方法 
                    showContent(data.content, data.createdate); 
                    $("#divWait").hide(); 
                    $("#btnPost").attr("disabled", ""); 
                }
                }); 
        }

在ashx代码段,要设置好返回的格式。

context.Response.ContentType = "application/json";

如果是返回的html或者text的话可以如下写法

context.Response.ContentType = "text/plain";

如果ajax方法中设置的返回值是json时,ashx代码返回的格式必须是json格式的数据。
把一个对象转换成json格式,常用方法就是采用开源的第三方类库json.net,Newtonsoft.Json.dll.

JsonConvert.SerializeObject方法就可以转换了。返回json格式后,jquery就可以采用XXX.xxx的方式获取值了。

JsonConvert在处理datetime格式的时候,会返回类似1198908717056的绝对值,因此,在处理datetime的时候,要做一下转换。具体语句如下:

IsoDateTimeConverter timeConverter = new IsoDateTimeConverter();          
//这里使用自定义日期格式,如果不使用的话,默认是ISO8601格式           
timeConverter.DateTimeFormat = "yyyy'-'MM'-'dd' 'HH':'mm':'ss";
string output = JsonConvert.SerializeObject(m, Newtonsoft.Json.Formatting.Indented, timeConverter);

此处顺便提一下,javascript对json格式的数据有着天生的处理能力,非常好的兼容json格式数据。

举个例子:

    function pppp() { 
           var person = { "name": "jack", "age": 24,"sex": true }; 
           alert(person.name); 
           alert(person.age); 
           alert(person.sex); 
           }

这样的代码可以直接写出来,在vs2010的代码编辑器中还可以有代码提示。很强大。

ashx完整代码如下:

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Threading; 
using Newtonsoft.Json; 
using Newtonsoft.Json.Converters;
    namespace nnn
{ 
    /// <summary> 
    /// PostIt 的摘要说明 
    /// </summary> 
    public class PostIt : IHttpHandler 
    {
            public void ProcessRequest(HttpContext context) 
        { 
            context.Response.ContentType = "application/json"; 
            try 
            { 
                string msgContent = context.Request["msgContent"] ?? ""; 
                ModelContent m = new ModelContent() 
                { 
                    author = "", 
                    categoryid = -1, 
                    title = "", 
                    content = msgContent, 
                    datetime = DateTime.Now, 
                    key = "", 
                    createdate = DateTime.Now, 
                    lastmodifydate = DateTime.Now, 
                    ip = context.Request.UserHostAddress
                    };
                    //BLLContent bll = new BLLContent(); 
                //bll.Add(m);
                    IsoDateTimeConverter timeConverter = new IsoDateTimeConverter();          
                //这里使用自定义日期格式,如果不使用的话,默认是ISO8601格式           
                timeConverter.DateTimeFormat = "yyyy'-'MM'-'dd' 'HH':'mm':'ss"; 
                string output = JsonConvert.SerializeObject(m, Newtonsoft.Json.Formatting.Indented, timeConverter); 
                context.Response.Write(output); 
            } 
            catch (Exception ex) 
            { 
                context.Response.Write(ex.Message); 
            }
            }
            public bool IsReusable 
        { 
            get 
            { 
                return false; 
            } 
        } 
    } 
}
Javascript 相关文章推荐
javaScript对文字按照拼音排序实现代码
Dec 27 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 Javascript
javascript html5实现表单验证
Mar 01 Javascript
jquery点击展示与隐藏更多内容
Dec 03 Javascript
概述一个页面从输入URL到页面加载完的过程
Dec 16 Javascript
prototype与__proto__区别详细介绍
Jan 09 Javascript
jquery mobile移动端幻灯片滑动切换效果
Apr 15 Javascript
codeMirror插件使用讲解
Jan 16 Javascript
javascript实现的图片预览功能
Mar 25 Javascript
基于Datatables跳转到指定页的简单实例
Nov 09 Javascript
微信小程序实现YDUI的ScrollTab组件
Feb 02 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 Javascript
Jquery中ajax方法data参数的用法小结
Feb 12 #Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
Feb 12 #Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
Feb 12 #Javascript
JavaScript cookie的设置获取删除详解
Feb 11 #Javascript
JavaScript新窗口与子窗口传值详解
Feb 11 #Javascript
jquery绑定事件不生效的解决方法
Feb 11 #Javascript
JS将制定内容复制到剪切板示例代码
Feb 11 #Javascript
You might like
php中OR与|| AND与&amp;&amp;的区别总结
2013/10/26 PHP
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
解决 FireFox 下[使用event很麻烦] 的问题.
2006/08/22 Javascript
线路分流自动跳转代码;希望对大家有用!
2006/12/02 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
js自动闭合html标签(自动补全html标记)
2012/10/04 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
2014/04/25 Javascript
JQUERY简单按钮轮换选中效果实现方法
2015/05/07 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
javascript模拟C#格式化字符串
2015/08/26 Javascript
封装好的javascript前端分页插件pagination
2016/01/04 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
最原始的jQuery注册验证方式
2016/10/11 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
javascript canvas检测小球碰撞
2020/04/17 Javascript
JS实现放大镜效果
2020/09/21 Javascript
Python2.x与Python3.x的区别
2016/01/14 Python
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
PyCharm代码回滚,恢复历史版本的解决方法
2018/10/22 Python
在Python中分别打印列表中的每一个元素方法
2018/11/07 Python
python代码 输入数字使其反向输出的方法
2018/12/22 Python
python中reload重载实例用法
2020/12/15 Python
python中实现栈的三种方法
2020/12/19 Python
CSS3实现银灰色动画效果的导航菜单代码
2015/09/01 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
阿里巴巴美国:Alibaba美国
2019/11/24 全球购物
物业管理工作方案
2014/05/10 职场文书
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL
在CSS中使用when/else的方法
2022/01/18 HTML / CSS
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js