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中Eval函数的使用
Mar 23 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
Oct 21 Javascript
ExtJS4给Combobox设置列表中的默认值示例
May 02 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 Javascript
JS Attribute属性操作详解
May 19 Javascript
JQuery的attr 与 val区别
Jun 12 Javascript
JQuery遍历元素的父辈和祖先的方法
Sep 18 Javascript
ES6中字符串string常用的新增方法小结
Nov 07 Javascript
chosen实现省市区三级联动
Aug 16 Javascript
vue中使用vue-cli接入融云实现即时通信
Apr 19 Javascript
H5+css3+js搭建带验证码的登录页面
Oct 11 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使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
php简单实现屏蔽指定ip段用户的访问
2015/04/29 PHP
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
2017/02/28 PHP
popdiv
2006/07/14 Javascript
广告切换效果(缓动切换)
2009/05/27 Javascript
客户端限制只能上传jpg格式图片的js代码
2010/12/09 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
让JavaScript中setTimeout支持链式操作的方法
2015/06/19 Javascript
全面解析Bootstrap图片轮播效果
2015/12/03 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
2016/02/25 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
Bootstrap导航条鼠标悬停下拉菜单
2017/01/04 Javascript
vue数据双向绑定原理解析(get &amp; set)
2017/03/08 Javascript
Vue中使用sass实现换肤功能
2018/09/07 Javascript
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
node.js中module模块的功能理解与用法实例分析
2020/02/14 Javascript
在Python中处理列表之reverse()方法的使用教程
2015/05/21 Python
Python基于checksum计算文件是否相同的方法
2015/07/09 Python
python3中dict(字典)的使用方法示例
2017/03/22 Python
python 寻找优化使成本函数最小的最优解的方法
2017/12/28 Python
使用python爬虫获取黄金价格的核心代码
2018/06/13 Python
python利用pandas将excel文件转换为txt文件的方法
2018/10/23 Python
Pytorch 实现权重初始化
2019/12/31 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
推荐WEB开发者最佳HTML5和CSS3代码生成器
2015/11/24 HTML / CSS
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
城市观光通行证:The Sightseeing Pass
2018/04/28 全球购物
城建学院毕业生自荐信
2014/01/31 职场文书
给客户的检讨书
2014/12/21 职场文书
稽核岗位职责
2015/02/10 职场文书
秋菊打官司观后感
2015/06/03 职场文书
入队仪式主持词
2015/07/04 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL
MySQL数据库安装方法与图形化管理工具介绍
2022/05/30 MySQL