ajax+ashx返回值詳解
做Asp.Net網站開發，少不了使用ajax技術，我平時也經常用ajax但總覺得了解的不透徹，今天在這裡總結一下，也給有需要的人提供一點幫助。前臺我不太理解的是dataType=text和dataType=json有啥區別，後臺我想搞清楚能不序列化直接返回物件嗎？下面將揭曉答案。
後臺返回string
後臺程式碼：
public void ProcessRequest(HttpContext context)
{
try
{
string action = context.Request.Form["action"];
string param1 = context.Request.Form["param1"];
switch (action)
{
case "getString":
//【1】轉化成json返回
context.Response.Write(JsonHelper.Serialize(GetString()));
//【2】直接返回
//context.Response.Write(GetString());
break;
default:
break;
}
}
catch (Exception ex)
{
context.Response.Write("error");
}
}
private string GetString()
{
return "abcde";
}
前臺程式碼dataType=text：
function GetStringText() {
$.ajax({
type: "post",
url: "Handler1.ashx",
contentType: "application/x-www-form-urlencoded;charset=utf-8;",
data: { action: "getString", param1: "aaa" },
dataType: "text",
success: function(data) {
//【1】後臺資料轉化成json字串
alert("data=" + data);
},
error: function(error) {
alert("error=" + error);
}
});
}
後臺資料進行json序列化，dataType=text執行截圖：
後臺資料直接返回，dataType=text執行截圖：
前臺程式碼dataType=json：
function GetStringJosn() {
$.ajax({
type: "post",
url: "Handler1.ashx",
contentType: "application/x-www-form-urlencoded;charset=utf-8;",
data: { action: "getString", param1: "aaa" },
dataType: "json",
success: function (data) {
//【1】後臺資料轉化成json字串
alert("data=" + data);
//【2】後臺資料不進行轉化直接進入error處理分支
},
error: function (error) {
alert("error=" + error);
}
});
}
後臺資料進行json序列化，dataType=json執行截圖：
後臺資料直接返回，dataType=json執行截圖：
後臺返回string[]
後臺程式碼：
public void ProcessRequest(HttpContext context)
{
try
{
string action = context.Request.Form["action"];
string param1 = context.Request.Form["param1"];
switch (action)
{
case "getArray":
//【1】轉化成json返回
context.Response.Write(JsonHelper.Serialize(GetArray()));
//【2】直接返回
//context.Response.Write(GetArray());
break;
default:
break;
}
}
catch (Exception ex)
{
context.Response.Write("error");
}
}
private string[] GetArray()
{
string[] array = {"aaa", "bbb", "ccc", "ddd", "eee"};
return array;
}
前臺程式碼dataType=text：
function GetArrayText() {
$.ajax({
type: "post",
url: "Handler1.ashx",
contentType: "application/x-www-form-urlencoded;charset=utf-8;",
data: { action: "getArray", param1: "aaa" },
dataType: "text",
success: function(data) {
//【1】後臺資料轉化成json字串
var json = eval('(' + data + ')');
alert("data=" + data + "\r\n" +
"json[0]=" + json[0] + "\r\n" +
"json[1]=" + json[1] + "\r\n" +
"json[2]=" + json[2]);
//【2】後臺資料不進行轉化data="System.string[]"
//alert("data=" + data + "\r\n" +
// "data[0]=" + data[0] + "\r\n" +
// "data[1]=" + data[1] + "\r\n" +
// "data[2]=" + data[2]);
},
error: function(error) {
alert("error=" + error);
}
});
}
後臺資料進行json序列化，dataType=text執行截圖：
後臺資料直接返回，dataType=text執行截圖：
前臺程式碼dataType=json：
function GetArrayJosn() {
$.ajax({
type: "post",
url: "Handler1.ashx",
contentType: "application/x-www-form-urlencoded;charset=utf-8;",
data: { action: "getArray", param1: "aaa" },
dataType: "json",
success: function (data) {
//【1】後臺資料轉化成json字串
alert("data=" + data + "\r\n" +
"data[0]=" + data[0] + "\r\n" +
"data[1]=" + data[1] + "\r\n" +
"data[2]=" + data[2]);
//【2】後臺資料不進行轉化直接進入error處理分支
},
error: function (error) {
alert("error=" + error);
}
});
}
後臺資料進行json序列化，dataType=json執行截圖：
後臺資料直接返回，dataType=json執行截圖：
後臺返回Dictionary
後臺程式碼：
public void ProcessRequest(HttpContext context)
{
try
{
string action = context.Request.Form["action"];
string param1 = context.Request.Form["param1"];
switch (action)
{
case "getDictionary":
//【1】轉化成json返回
context.Response.Write(JsonHelper.Serialize(GetDictionary()));
//【2】直接返回
//context.Response.Write(GetDictionary());
break;
default:
break;
}
}
catch (Exception ex)
{
context.Response.Write("error");
}
}
private Dictionary<string,object> GetDictionary()
{
Dictionary<string, object> dict = new Dictionary<string, object>()
{
{"name","guo"},
{"age",18},
{"address","唐寧街十號"}
};
return dict;
}
前臺程式碼dataType=text：
function GetDictionaryText() {
$.ajax({
type: "post",
url: "Handler1.ashx",
contentType: "application/x-www-form-urlencoded;charset=utf-8;",
data: { action: "getDictionary", param1: "aaa" },
dataType: "text",
success: function(data) {
//【1】後臺資料轉化成json字串
var json = eval('(' + data + ')');
alert("data=" + data + "\r\n" +
"json=" + json + "\r\n" +
"json[name]=" + json["name"] + "\r\n" +
"json[age]=" + json["age"] + "\r\n" +
"json[address]=" + json["address"]);
//【2】後臺資料不進行轉化
//alert("data=" + data + "\r\n" +
// "data[0]=" + data[0] + "\r\n" +
// "data[1]=" + data[1] + "\r\n" +
// "data[2]=" + data[2]);
},
error: function(error) {
alert("error=" + error);
}
});
}
後臺資料進行json序列化，dataType=text執行截圖：
後臺資料直接返回，dataType=text執行截圖：
前臺程式碼dataType=json：
function GetDictionaryJosn() {
$.ajax({
type: "post",
url: "Handler1.ashx",
contentType: "application/x-www-form-urlencoded;charset=utf-8;",
data: { action: "getDictionary", param1: "aaa" },
dataType: "json",
success: function (data) {
//【1】後臺資料轉化成json字串
alert("data=" + data + "\r\n" +
"data[name]=" + data["name"] + "\r\n" +
"data[age]=" + data["age"] + "\r\n" +
"data[address]=" + data["address"]);
//【2】後臺資料不進行轉化直接進入error處理分支
},
error: function (error) {
alert("error=" + error);
}
});
}
後臺資料進行json序列化，dataType=json執行截圖：
後臺資料直接返回，dataType=json執行截圖：
後臺返回class
後臺程式碼：
public void ProcessRequest(HttpContext context)
{
try
{
string action = context.Request.Form["action"];
string param1 = context.Request.Form["param1"];
switch (action)
{
case "getClass":
//【1】轉化成json返回
context.Response.Write(JsonHelper.Serialize(GetClass()));
//【2】直接返回
//context.Response.Write(GetClass());
break;
default:
break;
}
}
catch (Exception ex)
{
context.Response.Write("error");
}
}
private Student GetClass()
{
Student objStudent = new Student()
{
Name = "guo",
Age = 18
};
return objStudent;
}
前臺程式碼dataType=text：
function GetClassText() {
$.ajax({
type: "post",
url: "Handler1.ashx",
contentType: "application/x-www-form-urlencoded;charset=utf-8;",
data: { action: "getClass", param1: "aaa" },
dataType: "text",
success: function (data) {
//【1】後臺資料轉化成json字串
var json = eval('(' + data + ')');
alert("data=" + data + "\r\n" +
"json=" + json + "\r\n" +
"json[Name]=" + json["Name"] + "\r\n" +
"json[Age]=" + json["Age"]);
//【2】後臺資料不進行轉化
//alert("data=" + data + "\r\n" +
// "data[0]=" + data[0] + "\r\n" +
// "data[1]=" + data[1] + "\r\n" +
// "data[2]=" + data[2]);
},
error: function (error) {
alert("error=" + error);
}
});
}
後臺資料進行json序列化，dataType=text執行截圖：
後臺資料直接返回，dataType=text執行截圖：
前臺程式碼dataType=json：
function GetClassJosn() {
$.ajax({
type: "post",
url: "Handler1.ashx",
contentType: "application/x-www-form-urlencoded;charset=utf-8;",
data: { action: "getClass", param1: "aaa" },
dataType: "json",
success: function (data) {
//【1】後臺資料轉化成json字串
alert("data=" + data + "\r\n" +
"data[Name]=" + data["Name"] + "\r\n" +
"data[Age]=" + data["Age"]);
//【2】後臺資料不進行轉化直接進入error處理分支
},
error: function (error) {
alert("error=" + error);
}
});
}
後臺資料進行json序列化，dataType=json執行截圖：
後臺資料直接返回，dataType=json執行截圖：
後臺返回json字串
後臺程式碼：
public void ProcessRequest(HttpContext context)
{
try
{
string action = context.Request.Form["action"];
string param1 = context.Request.Form["param1"];
switch (action)
{
case "getJson":
//【1】轉化成json返回
context.Response.Write(JsonHelper.Serialize(GetJson()));
//【2】直接返回
//context.Response.Write(GetJson());
break;
default:
break;
}
}
catch (Exception ex)
{
context.Response.Write("error");
}
}
private string GetJson()
{
string json = "{\"name\":\"guo\",\"age\":\"18\",\"content\":{\"phone\":\"18233199999\",\"address\":\"唐寧街十號\"}}";
return json;
}
前臺程式碼dataType=text：
function GetJsonText() {
$.ajax({
type: "post",
url: "Handler1.ashx",
contentType: "application/x-www-form-urlencoded;charset=utf-8;",
data: { action: "getJson", param1: "aaa" },
dataType: "text",
success: function(data) {
//【1】後臺資料轉化成json字串
var json = eval('(' + data + ')');
json = eval('(' + json + ')');
alert("data=" + data + "\r\n" +
"json=" + json + "\r\n" +
"json[name]=" + json["name"] + "\r\n" +
"json[age]=" + json["age"] + "\r\n" +
"json[content]=" + json["content"] + "\r\n" +
"json[content][phone]=" + json["content"]["phone"] + "\r\n" +
"json[content][address]=" + json["content"]["address"]);
//【2】後臺資料不進行轉化
//var json = eval('(' + data + ')');
//alert("data=" + data + "\r\n" +
// "json=" + json + "\r\n" +
// "json[name]=" + json["name"] + "\r\n" +
// "json[age]=" + json["age"] + "\r\n" +
// "json[content]=" + json["content"] + "\r\n" +
// "json[content][phone]=" + json["content"]["phone"] + "\r\n" +
// "json[content][address]=" + json["content"]["address"]);
},
error: function(error) {
alert("error=" + error);
}
});
}
後臺資料進行json序列化，dataType=text執行截圖：
後臺資料直接返回，dataType=text執行截圖：
前臺程式碼dataType=json：
function GetJsonJosn() {
$.ajax({
type: "post",
url: "Handler1.ashx",
contentType: "application/x-www-form-urlencoded;charset=utf-8;",
data: { action: "getJson", param1: "aaa" },
dataType: "json",
success: function (data) {
//【1】後臺資料轉化成json字串
var json = eval('(' + data + ')');
alert("data=" + data + "\r\n" +
"json=" + json + "\r\n" +
"json[name]=" + json["name"] + "\r\n" +
"json[age]=" + json["age"] + "\r\n" +
"json[content]=" + json["content"] + "\r\n" +
"json[content][phone]=" + json["content"]["phone"] + "\r\n" +
"json[content][address]=" + json["content"]["address"]);
//【2】後臺資料不進行轉化
//alert("data=" + data + "\r\n" +
// "data[name]=" + data["name"] + "\r\n" +
// "data[age]=" + data["age"] + "\r\n" +
// "data[content]=" + data["content"] + "\r\n" +
// "data[content][phone]=" + data["content"]["phone"] + "\r\n" +
// "data[content][address]=" + data["content"]["address"]);
},
error: function (error) {
alert("error=" + error);
}
});
}
後臺資料進行json序列化，dataType=json執行截圖：
後臺資料直接返回，dataType=json執行截圖：
注意：
JsonHelper幫助類的下載地址是：https://download.csdn.net/download/xiaouncle/11107625
相關文章
- Asp.Net中ajax+ashx使用詳解ASP.NET
- typeof返回值詳解
- Ajax+ashx vs Ajax+WebServiceWeb
- SMS簡訊通API——（2）引數與返回值詳解API
- 淘寶/天貓商品詳情API：返回值引數詳解及商業邏輯實現API
- 商品詳情 API 返回值說明API
- VS 返回值被忽略的解決方法
- 京東獲得JD商品詳情 API 返回值說明API
- 攜程獲取景點詳情 API 返回值說明API
- 好程式設計師Python培訓分享函式返回值的示例程式碼詳解程式設計師Python函式
- 淘寶 / 天貓獲取 sku 詳細資訊 API 返回值說明API
- 易貝獲得EBAY商品詳情 API 返回值說明API
- 淘寶/天貓獲得淘寶商品詳情 API 返回值說明API
- 淘寶/天貓獲取sku詳細資訊 API 返回值說明API
- 阿里巴巴獲得商品詳情 API 返回值說明阿里API
- 拼多多根據ID取商品詳情 API 返回值說明API
- 亞馬遜國際獲得AMAZON商品詳情 API 返回值說明亞馬遜API
- document.body.scrollTop返回值為0解決方案
- Laravel 返回值Laravel
- typeof返回值
- phpexplode()返回值PHP
- 蝦皮shopee根據ID取商品詳情 API 返回值說明API
- 關於EJB查詢返回值的解決方法 (轉)
- 詳細介紹C++多執行緒獲取返回值的方法C++執行緒
- 亞馬遜國際站獲得AMAZON商品詳情 API介面返回值說明亞馬遜API
- 蝦皮shopee獲得shopee店鋪詳情 API 返回值說明API
- 一種處理laravel返回值響應的解決方案Laravel
- http協議/cookie詳解/session詳解HTTP協議CookieSession
- Java異常處理場景中不同位置的返回值詳細解析Java
- vue3的computed計算屬性返回值註解Vue
- 函式的返回值函式
- WebAPI服務返回值WebAPI
- 函式返回值1函式
- javascript typeof undefined 返回值JavaScriptUndefined
- Js 的 typeof 返回值JS
- Lombok 註解詳解Lombok
- Java註解詳解Java
- Java 註解詳解Java