ajax+ashx返回值详解

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了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",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",data: { action: "getArray",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",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",data: { action: "getDictionary",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",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",data: { action: "getClass",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",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",data: { action: "getJson",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",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运行截图：

猜你在找的Ajax相关文章

网页的异步请求（Ajax）
JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...
手动实现AJAX
AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...
axios异步提交表单数据的不同形式
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...
php的ajax简单实例
很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...
Json与Ajax(注册实例）
需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...
jSon和Ajax登录功能，ajax数据交互案例
ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...
关于AjaxControlToolkit的样式问题
网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...
一个简单的AJAX实现(HELLO AJAX)
客户端部分： <html> <head> <meta http-equiv="Content-Type" ...
AJAX中文乱码的两类问题及解决之策
1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...
实例：AJAX返回xml代码如何在网页中显示
建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作