ajax+ashx返回值详解

前端之家收集整理的这篇文章主要介绍了ajax+ashx返回值详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

做Asp.Net网站开发,少不了使用ajax技术,我平时也经常用ajax但总觉得了解的不透彻,今天在这里总结一下,也给有需要的人提供一点帮助。前台我不太理解的是dataType=text和dataType=json有啥区别,后台我想搞清楚能不序列化直接返回对象吗?下面将揭晓答案。

后台返回string

后台代码

  1. public void ProcessRequest(HttpContext context)
  2. {
  3. try
  4. {
  5. string action = context.Request.Form["action"];
  6. string param1 = context.Request.Form["param1"];
  7. switch (action)
  8. {
  9. case "getString":
  10. //【1】转化成json返回
  11. context.Response.Write(JsonHelper.Serialize(GetString()));
  12. //【2】直接返回
  13. //context.Response.Write(GetString());
  14. break;
  15. default:
  16. break;
  17. }
  18. }
  19. catch (Exception ex)
  20. {
  21. context.Response.Write("error");
  22. }
  23. }
  24.  
  25. private string GetString()
  26. {
  27. return "abcde";
  28. }

前台代码dataType=text:

  1. function GetStringText() {
  2. $.ajax({
  3. type: "post",url: "Handler1.ashx",contentType: "application/x-www-form-urlencoded;charset=utf-8;",data: { action: "getString",param1: "aaa" },dataType: "text",success: function(data) {
  4. //【1后台数据转化成json字符串
  5. alert("data=" + data);
  6. },error: function(error) {
  7. alert("error=" + error);
  8. }
  9. });
  10. }

后台数据进行json序列化,dataType=text运行截图:

后台数据直接返回,dataType=text运行截图:

前台代码dataType=json:

  1. function GetStringJosn() {
  2. $.ajax({
  3. type: "post",dataType: "json",success: function (data) {
  4. //【1后台数据转化成json字符串
  5. alert("data=" + data);
  6.  
  7. //【2后台数据不进行转化直接进入error处理分支
  8. },error: function (error) {
  9. alert("error=" + error);
  10. }
  11. });
  12. }

后台数据进行json序列化,dataType=json运行截图:

后台数据直接返回,dataType=json运行截图:

后台返回string[]

后台代码

  1. public void ProcessRequest(HttpContext context)
  2. {
  3. try
  4. {
  5. string action = context.Request.Form["action"];
  6. string param1 = context.Request.Form["param1"];
  7. switch (action)
  8. {
  9. case "getArray":
  10. //【1】转化成json返回
  11. context.Response.Write(JsonHelper.Serialize(GetArray()));
  12. //【2】直接返回
  13. //context.Response.Write(GetArray());
  14. break;
  15. default:
  16. break;
  17. }
  18. }
  19. catch (Exception ex)
  20. {
  21. context.Response.Write("error");
  22. }
  23. }
  24.  
  25. private string[] GetArray()
  26. {
  27. string[] array = {"aaa","bbb","ccc","ddd","eee"};
  28. return array;
  29. }

前台代码dataType=text:

  1. function GetArrayText() {
  2. $.ajax({
  3. type: "post",data: { action: "getArray",success: function(data) {
  4. //【1后台数据转化成json字符串
  5. var json = eval('(' + data + ')');
  6. alert("data=" + data + "\r\n" +
  7. "json[0]=" + json[0] + "\r\n" +
  8. "json[1]=" + json[1] + "\r\n" +
  9. "json[2]=" + json[2]);
  10.  
  11. //【2后台数据不进行转化data="System.string[]"
  12. //alert("data=" + data + "\r\n" +
  13. // "data[0]=" + data[0] + "\r\n" +
  14. // "data[1]=" + data[1] + "\r\n" +
  15. // "data[2]=" + data[2]);
  16. },error: function(error) {
  17. alert("error=" + error);
  18. }
  19. });
  20. }

后台数据进行json序列化,dataType=text运行截图:

后台数据直接返回,dataType=text运行截图:

前台代码dataType=json:

  1. function GetArrayJosn() {
  2. $.ajax({
  3. type: "post",success: function (data) {
  4. //【1后台数据转化成json字符串
  5. alert("data=" + data + "\r\n" +
  6. "data[0]=" + data[0] + "\r\n" +
  7. "data[1]=" + data[1] + "\r\n" +
  8. "data[2]=" + data[2]);
  9.  
  10. //【2后台数据不进行转化直接进入error处理分支
  11.  
  12. },error: function (error) {
  13. alert("error=" + error);
  14. }
  15. });
  16. }

后台数据进行json序列化,dataType=json运行截图:

后台数据直接返回,dataType=json运行截图:

后台返回Dictionary

后台代码

  1. public void ProcessRequest(HttpContext context)
  2. {
  3. try
  4. {
  5. string action = context.Request.Form["action"];
  6. string param1 = context.Request.Form["param1"];
  7. switch (action)
  8. {
  9. case "getDictionary":
  10. //【1】转化成json返回
  11. context.Response.Write(JsonHelper.Serialize(GetDictionary()));
  12. //【2】直接返回
  13. //context.Response.Write(GetDictionary());
  14. break;
  15. default:
  16. break;
  17. }
  18. }
  19. catch (Exception ex)
  20. {
  21. context.Response.Write("error");
  22. }
  23. }
  24.  
  25. private Dictionary<string,object> GetDictionary()
  26. {
  27. Dictionary<string,object> dict = new Dictionary<string,object>()
  28. {
  29. {"name","guo"},{"age",18},{"address","唐宁街十号"}
  30. };
  31. return dict;
  32. }

前台代码dataType=text:

  1. function GetDictionaryText() {
  2. $.ajax({
  3. type: "post",data: { action: "getDictionary",success: function(data) {
  4. //【1后台数据转化成json字符串
  5. var json = eval('(' + data + ')');
  6. alert("data=" + data + "\r\n" +
  7. "json=" + json + "\r\n" +
  8. "json[name]=" + json["name"] + "\r\n" +
  9. "json[age]=" + json["age"] + "\r\n" +
  10. "json[address]=" + json["address"]);
  11.  
  12. //【2后台数据不进行转化
  13. //alert("data=" + data + "\r\n" +
  14. // "data[0]=" + data[0] + "\r\n" +
  15. // "data[1]=" + data[1] + "\r\n" +
  16. // "data[2]=" + data[2]);
  17. },error: function(error) {
  18. alert("error=" + error);
  19. }
  20. });
  21. }

后台数据进行json序列化,dataType=text运行截图:

后台数据直接返回,dataType=text运行截图:

前台代码dataType=json:

  1. function GetDictionaryJosn() {
  2. $.ajax({
  3. type: "post",success: function (data) {
  4. //【1后台数据转化成json字符串
  5. alert("data=" + data + "\r\n" +
  6. "data[name]=" + data["name"] + "\r\n" +
  7. "data[age]=" + data["age"] + "\r\n" +
  8. "data[address]=" + data["address"]);
  9.  
  10. //【2后台数据不进行转化直接进入error处理分支
  11. },error: function (error) {
  12. alert("error=" + error);
  13. }
  14. });
  15. }

后台数据进行json序列化,dataType=json运行截图:

后台数据直接返回,dataType=json运行截图:

后台返回class

后台代码

  1. public void ProcessRequest(HttpContext context)
  2. {
  3. try
  4. {
  5. string action = context.Request.Form["action"];
  6. string param1 = context.Request.Form["param1"];
  7. switch (action)
  8. {
  9. case "getClass":
  10. //【1】转化成json返回
  11. context.Response.Write(JsonHelper.Serialize(GetClass()));
  12. //【2】直接返回
  13. //context.Response.Write(GetClass());
  14. break;
  15. default:
  16. break;
  17. }
  18. }
  19. catch (Exception ex)
  20. {
  21. context.Response.Write("error");
  22. }
  23. }
  24.  
  25. private Student GetClass()
  26. {
  27. Student objStudent = new Student()
  28. {
  29. Name = "guo",Age = 18
  30. };
  31. return objStudent;
  32. }

前台代码dataType=text:

  1. function GetClassText() {
  2. $.ajax({
  3. type: "post",data: { action: "getClass",success: function (data) {
  4. //【1后台数据转化成json字符串
  5. var json = eval('(' + data + ')');
  6. alert("data=" + data + "\r\n" +
  7. "json=" + json + "\r\n" +
  8. "json[Name]=" + json["Name"] + "\r\n" +
  9. "json[Age]=" + json["Age"]);
  10.  
  11. //【2后台数据不进行转化
  12. //alert("data=" + data + "\r\n" +
  13. // "data[0]=" + data[0] + "\r\n" +
  14. // "data[1]=" + data[1] + "\r\n" +
  15. // "data[2]=" + data[2]);
  16. },error: function (error) {
  17. alert("error=" + error);
  18. }
  19. });
  20. }

后台数据进行json序列化,dataType=text运行截图:

后台数据直接返回,dataType=text运行截图:

前台代码dataType=json:

  1. function GetClassJosn() {
  2. $.ajax({
  3. type: "post",success: function (data) {
  4. //【1后台数据转化成json字符串
  5. alert("data=" + data + "\r\n" +
  6. "data[Name]=" + data["Name"] + "\r\n" +
  7. "data[Age]=" + data["Age"]);
  8.  
  9. //【2后台数据不进行转化直接进入error处理分支
  10. },error: function (error) {
  11. alert("error=" + error);
  12. }
  13. });
  14. }

后台数据进行json序列化,dataType=json运行截图:

后台数据直接返回,dataType=json运行截图:

后台返回json字符串

后台代码

  1. public void ProcessRequest(HttpContext context)
  2. {
  3. try
  4. {
  5. string action = context.Request.Form["action"];
  6. string param1 = context.Request.Form["param1"];
  7. switch (action)
  8. {
  9. case "getJson":
  10. //【1】转化成json返回
  11. context.Response.Write(JsonHelper.Serialize(GetJson()));
  12. //【2】直接返回
  13. //context.Response.Write(GetJson());
  14. break;
  15. default:
  16. break;
  17. }
  18. }
  19. catch (Exception ex)
  20. {
  21. context.Response.Write("error");
  22. }
  23. }
  24.  
  25. private string GetJson()
  26. {
  27. string json = "{\"name\":\"guo\",\"age\":\"18\",\"content\":{\"phone\":\"18233199999\",\"address\":\"唐宁街十号\"}}";
  28. return json;
  29. }

前台代码dataType=text:

  1. function GetJsonText() {
  2. $.ajax({
  3. type: "post",data: { action: "getJson",success: function(data) {
  4. //【1后台数据转化成json字符串
  5. var json = eval('(' + data + ')');
  6. json = eval('(' + json + ')');
  7. alert("data=" + data + "\r\n" +
  8. "json=" + json + "\r\n" +
  9. "json[name]=" + json["name"] + "\r\n" +
  10. "json[age]=" + json["age"] + "\r\n" +
  11. "json[content]=" + json["content"] + "\r\n" +
  12. "json[content][phone]=" + json["content"]["phone"] + "\r\n" +
  13. "json[content][address]=" + json["content"]["address"]);
  14.  
  15. //【2后台数据不进行转化
  16. //var json = eval('(' + data + ')');
  17. //alert("data=" + data + "\r\n" +
  18. // "json=" + json + "\r\n" +
  19. // "json[name]=" + json["name"] + "\r\n" +
  20. // "json[age]=" + json["age"] + "\r\n" +
  21. // "json[content]=" + json["content"] + "\r\n" +
  22. // "json[content][phone]=" + json["content"]["phone"] + "\r\n" +
  23. // "json[content][address]=" + json["content"]["address"]);
  24. },error: function(error) {
  25. alert("error=" + error);
  26. }
  27. });
  28. }

后台数据进行json序列化,dataType=text运行截图:

后台数据直接返回,dataType=text运行截图:

前台代码dataType=json:

  1. function GetJsonJosn() {
  2. $.ajax({
  3. type: "post",success: function (data) {
  4. //【1后台数据转化成json字符串
  5. var json = eval('(' + data + ')');
  6. alert("data=" + data + "\r\n" +
  7. "json=" + json + "\r\n" +
  8. "json[name]=" + json["name"] + "\r\n" +
  9. "json[age]=" + json["age"] + "\r\n" +
  10. "json[content]=" + json["content"] + "\r\n" +
  11. "json[content][phone]=" + json["content"]["phone"] + "\r\n" +
  12. "json[content][address]=" + json["content"]["address"]);
  13.  
  14. //【2后台数据不进行转化
  15. //alert("data=" + data + "\r\n" +
  16. // "data[name]=" + data["name"] + "\r\n" +
  17. // "data[age]=" + data["age"] + "\r\n" +
  18. // "data[content]=" + data["content"] + "\r\n" +
  19. // "data[content][phone]=" + data["content"]["phone"] + "\r\n" +
  20. // "data[content][address]=" + data["content"]["address"]);
  21. },error: function (error) {
  22. alert("error=" + error);
  23. }
  24. });
  25. }

后台数据进行json序列化,dataType=json运行截图:

后台数据直接返回,dataType=json运行截图:

猜你在找的Ajax相关文章