ajax+ashx返回值詳解

changuncle發表於2017-07-09

做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使用詳解
2017-11-26
ASP.NET
typeof返回值詳解
2019-11-21
Ajax+ashx vs Ajax+WebService
2009-03-04
Web
SMS簡訊通API——（2）引數與返回值詳解
2012-01-07
API
淘寶/天貓商品詳情API：返回值引數詳解及商業邏輯實現
2024-02-05
API
商品詳情 API 返回值說明
2023-04-04
API
VS 返回值被忽略的解決方法
2022-03-05
京東獲得JD商品詳情 API 返回值說明
2023-03-08
API
攜程獲取景點詳情 API 返回值說明
2024-03-13
API
好程式設計師Python培訓分享函式返回值的示例程式碼詳解
2020-12-01
程式設計師Python函式
淘寶 / 天貓獲取 sku 詳細資訊 API 返回值說明
2023-03-29
API
易貝獲得EBAY商品詳情 API 返回值說明
2023-04-18
API
淘寶/天貓獲得淘寶商品詳情 API 返回值說明
2023-04-13
API
淘寶/天貓獲取sku詳細資訊 API 返回值說明
2023-04-13
API
阿里巴巴獲得商品詳情 API 返回值說明
2023-05-10
阿里API
拼多多根據ID取商品詳情 API 返回值說明
2023-05-10
API
亞馬遜國際獲得AMAZON商品詳情 API 返回值說明
2023-03-25
亞馬遜API
document.body.scrollTop返回值為0解決方案
2017-03-24
Laravel 返回值
2018-08-10
Laravel
typeof返回值
2018-05-02
phpexplode()返回值
2012-02-28
PHP
蝦皮shopee根據ID取商品詳情 API 返回值說明
2023-03-28
API
關於EJB查詢返回值的解決方法 (轉)
2007-12-11
詳細介紹C++多執行緒獲取返回值的方法
2020-07-06
C++執行緒
亞馬遜國際站獲得AMAZON商品詳情 API介面返回值說明
2023-04-12
亞馬遜API
蝦皮shopee獲得shopee店鋪詳情 API 返回值說明
2023-03-28
API
一種處理laravel返回值響應的解決方案
2021-05-18
Laravel
http協議/cookie詳解/session詳解
2018-05-04
HTTP協議CookieSession
Java異常處理場景中不同位置的返回值詳細解析
2021-01-23
Java
vue3的computed計算屬性返回值註解
2024-06-19
Vue
函式的返回值
2020-12-05
函式
WebAPI服務返回值
2017-09-30
WebAPI
函式返回值1
2017-12-27
函式
javascript typeof undefined 返回值
2016-07-18
JavaScriptUndefined
Js 的 typeof 返回值
2016-06-05
JS
Lombok 註解詳解
2020-02-11
Lombok
Java註解詳解
2019-02-26
Java
Java 註解詳解
2020-11-26
Java

ajax+ashx返回值詳解

後臺返回string

後臺返回string[]

後臺返回Dictionary

後臺返回class

後臺返回json字串

相關文章