jquery ajax,ashx,json的用法總結(jié)
jquery提供的簡化版的ajax調(diào)用方法通常如下:
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", "");
});
}
在開發(fā)的時候,要接受json格式的返回值時,上面的方法貌似不能行,上面的方法貌似接受的是text的文本行。因此,采用jQuery的底層Ajax實現(xiàn)方法。
該方法參數(shù)也很多,具體可看幫助文檔。本人的常規(guī)用法
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) {//請求錯誤 時執(zhí)行的方法
alert("error!" + errorThrown);
$("#divWait").hide();
$("#btnPost").attr("disabled", "");
},
success: function (data, txtSataus) {//請求成功時執(zhí)行的方法
showContent(data.content, data.createdate);
$("#divWait").hide();
$("#btnPost").attr("disabled", "");
}
});
}
在ashx代碼段,要設(shè)置好返回的格式。
context.Response.ContentType = "application/json";
如果是返回的html或者text的話可以如下寫法
context.Response.ContentType = "text/plain";
如果ajax方法中設(shè)置的返回值是json時,ashx代碼返回的格式必須是json格式的數(shù)據(jù)。
把一個對象轉(zhuǎn)換成json格式,常用方法就是采用開源的第三方類庫json.net,Newtonsoft.Json.dll.
JsonConvert.SerializeObject方法就可以轉(zhuǎn)換了。返回json格式后,jquery就可以采用XXX.xxx的方式獲取值了。
JsonConvert在處理datetime格式的時候,會返回類似1198908717056的絕對值,因此,在處理datetime的時候,要做一下轉(zhuǎn)換。具體語句如下:
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格式的數(shù)據(jù)有著天生的處理能力,非常好的兼容json格式數(shù)據(jù)。
舉個例子:
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;
}
}
}
}
相關(guān)文章
jQuery插件echarts實現(xiàn)的去掉X軸、Y軸和網(wǎng)格線效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件echarts實現(xiàn)的去掉X軸、Y軸和網(wǎng)格線效果,結(jié)合實例形式分析了echarts插件繪制表格圖及圖形相關(guān)屬性設(shè)置操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03jQuery的實現(xiàn)原理的模擬代碼 -4 重要的擴展函數(shù) extend
在上兩篇文章中,我們看到每次要通過 jQuery 的原型增加共享方法的時候,都需要通過 jQuery.fn 一個個進行擴展,非常麻煩.2010-08-08jQuery實現(xiàn)動態(tài)添加和刪除input框代碼實例
這篇文章主要介紹了jQuery實現(xiàn)動態(tài)添加和刪除input框,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2019-03-03jQuery插件實現(xiàn)靜態(tài)HTML驗證碼校驗
這篇文章主要介紹了jQuery插件實現(xiàn)靜態(tài)HTML驗證碼校驗,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2015-11-11基于jQuery實現(xiàn)點擊同時更改兩個iframe的網(wǎng)址
最近寫了兩個管理后臺的前端頁面,其中有一個管理后臺,左側(cè)菜單導(dǎo)航和右側(cè)內(nèi)容頁是兩個iframe,需求是,點擊上面的主導(dǎo)航時,左側(cè)iframe和右側(cè)iframe調(diào)用不同的鏈接.2010-07-07jQuery實現(xiàn)簡單的列表式導(dǎo)航菜單效果代碼
這篇文章主要介紹了jQuery實現(xiàn)簡單的列表式導(dǎo)航菜單效果代碼,涉及jquery操作鼠標事件及頁面元素樣式動態(tài)變換的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08快速解決jquery.touchSwipe左右滑動和垂直滾動條沖突
這篇文章主要介紹了快速解決jquery.touchSwipe左右滑動和垂直滾動條沖突問題,感興趣的小伙伴們可以參考一下2016-04-04