頁面代碼
<form id="form1" runat="server">
<div>
<p> Ajax請求ashx返回json數據的常見問題 </p>
<button type="button" id="btnrq">點擊請求數據</button>
</div>
<div id="iddiv"></div>
</form>
1 請求text數據，在success事件中手動解析 第一種返回json字符
前台：
<script>
//第一種返回json字符
$(document).ready(function () {
$("#btnrq").click(function () {
$.ajax({
type: "post",
url: "Result.ashx",
data: { "name": "li" },
dataType: "text",
success: function (data) {
var json = eval('(' + data + ')')//為什么 加eval函數，本身的問題。 由於json是以”{}”的方式來開始以及結束的，在JS中，它會被當成一個語句塊來處理，所以必須強制性的將它轉換成一種表達式。
alert("性別：" + json.sex + ",愛好:" + json.interest);
// $("#iddiv").text(json.sex);
}
});
});
});
</script>
后台 ：
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
// context.Response.Write("Hello World");
request(context);
}
void request(HttpContext context) {
var name = context.Request["name"];
if (name == "li") {
string json = "{\"sex\":\"男\",\"interest\":\"籃球\" }";
context.Response.Write(json);
context.Response.End();
}
}
2. 請求json數據，在success事件中手動解析 JQ自動解析 第二種返回json對象
前台:
<script>
//第一種返回json字符
$(document).ready(function () {
$("#btnrq").click(function () {
$.ajax({
type: "post",
url: "Result.ashx",
data: { "name": "li" },
dataType: "json",
success: function (data) {
//var json = eval('(' + data + ')')//為什么 加eval函數，本身的問題。 由於json是以”{}”的方式來開始以及結束的，在JS中，它會被當成一個語句塊來處理，所以必須強制性的將它轉換成一種表達式。
alert("性別：" + json.sex + ",愛好:" + json.interest);
// $("#iddiv").text(json.sex);
}
});
});
});
</script>
后台 ：
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
// context.Response.Write("Hello World");
request(context);
}
void request(HttpContext context) {
var name = context.Request["name"];
if (name == "li") {
string json = "{\"sex\":\"男\",\"interest\":\"籃球\" }";
context.Response.Write(json);
context.Response.End();
}
}
3.帶序列化text數據，在success事件中手動解析 返回帶序列化json對象
前台:
<script>
//第一種返回json字符
$(document).ready(function () {
$("#btnrq").click(function () {
$.ajax({
type: "post",
url: "Result.ashx",
data: { "name": "li" },
dataType: "text",
success: function (data) {
$("#iddiv").text(data);
var json = eval('(' + data + ')')；//為什么 加eval函數，本身的問題。 由於json是以”{}”的方式來開始以及結束的，在JS中，它會被當成一個語句塊來處理，所以必須強制性的將它轉換成一種表達式。
var json1 =val("(" + data + ")");
//因為后台聲明的字符串，又序列化之后 所以在此處理兩次 （PS:偷個懶 下同）
alert("性別：" + json1.sex + ",愛好:" + json1.interest);
// $("#iddiv").text(json.sex);
}
});
});
});
</script>
后台 ：
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
// context.Response.Write("Hello World");
request(context);
}
void request(HttpContext context) {
var name = context.Request["name"];
if (name == "li") {
string json = "{\"sex\":\"男\",\"interest\":\"籃球\" }";
JavaScriptSerializer js = new JavaScriptSerializer(); // ASP.NET中的JSON序列化和反序列化還可以使用JavaScriptSerializer，在System.Web.Script.Serializatioin命名空間下，需引用System.Web.Extensions.dll.
var j=js.Serialize(json);
context.Response.Write(j);
context.Response.End();
}
}
4.帶序列化的json 前台自動解析： 第四種返回序列化的json對象
前台:
<script>
//第一種返回json字符
$(document).ready(function () {
$("#btnrq").click(function () {
$.ajax({
type: "post",
url: "Result.ashx",
data: { "name": "li" },
dataType: "json",
success: function (data) {
$("#iddiv").text(data);
alert("性別：" + json.sex + ",愛好:" + json.interest);
}
});
});
});
</script>
后台 ：
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
// context.Response.Write("Hello World");
request(context);
}
void request(HttpContext context) {
var name = context.Request["name"];
if (name == "li") {
string json = "{\"sex\":\"男\",\"interest\":\"籃球\" }";
JavaScriptSerializer js = new JavaScriptSerializer(); // ASP.NET中的JSON序列化和反序列化還可以使用JavaScriptSerializer，在System.Web.Script.Serializatioin命名空間下，需引用System.Web.Extensions.dll.
var j=js.Serialize(json);
context.Response.Write(j);
context.Response.End();
}
}