啥叫异步,啥叫Ajax.咱不谈啥XMLHTTPRequest.通俗讲异步就是前台页面javascript能调用后台方法.这样就达到了无刷新.所谓的Ajax.这里我们讲二种方法

方法一:(微软有自带Ajax框架)

在Asp.net里微软有自己的Ajax框架.就是在页面后台.cs文件里引入 using System.Web.Services 空间 然后定义静态方法(方法前加上 [WebMethod])

[WebMethod]
    public static string ABC(string ABC)
    {
        return ABC;
    }

好了,现在我们谈谈前台Js怎么处理后台返回的数据吧,可利用Jquery处理返回的纯html,json,Xml等数据.这里我们演示返回返回的数据有string、集合(List<>)、类.

但都返回Json格式(Json轻量级比XML处理起来简单).看看前台是怎么解析这些数据的.

代码如下:

前台页面:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title>无标题页</title><style type="text/css">.hover{cursor: pointer; /*小手*/background: #ffc; /*背景*/}</style><script type="text/javascript" src="js/jquery-1.3.2-vsdoc2.js"></script><script type="text/javascript">//无参数调用$(document).ready(function() {$('#btn1').click(function() {$.ajax({type: "POST",   //访问WebService使用Post方式请求contentType: "application/json", url: "Default2.aspx/HelloWorld", //调用WebService的地址和方法名称组合 ---- WsURL/方法名data: "{}",  //这里是要传递的参数,格式为 data: "{paraName:paraValue}",下面将会看到       dataType: 'json',   //WebService 会返回Json类型success: function(result) {     //回调函数,result,返回值alert(result.d);}});});});//有参数调用$(document).ready(function() {$("#btn2").click(function() {$.ajax({type: "POST",contentType: "application/json",url: "Default2.aspx/GetWish",data: "{value1:'心想事成',value2:'万事如意',value3:'牛牛牛',value4:2009}",dataType: 'json',success: function(result) {alert(result.d);}});});});         //返回集合(引用自网络,很说明问题)$(document).ready(function() {$("#btn3").click(function() {$.ajax({type: "POST",contentType: "application/json",url: "Default2.aspx/GetArray",data: "{i:10}",dataType: 'json',success: function(result) {$(result.d).each(function() {alert(this);$('#dictionary').append(this.toString() + " ");//alert(result.d.join(" | "));});}});});});//返回复合类型$(document).ready(function() {$('#btn4').click(function() {$.ajax({type: "POST",contentType: "application/json",url: "Default2.aspx/GetClass",data: "{}",dataType: 'json',success: function(result) {$(result.d).each(function() {//alert(this);$('#dictionary').append(this['ID'] + " " + this['Value']);//alert(result.d.join(" | "));});}});});});//Ajax 为用户提供反馈,他们两个方法可以添加给jQuery对象在Ajax前后回调//但对与Ajax的监控,本身是全局性的$(document).ready(function() {$('#loading').ajaxStart(function() {$(this).show();}).ajaxStop(function() {$(this).hide();});});// 鼠标移入移出效果,多个元素的时候,可以使用“,”隔开$(document).ready(function() {$('btn').hover(function() {$(this).addClass('hover');}, function() {$(this).removeClass('hover');});});</script>
</head>
<body><form id="form1" runat="server"><div><input type="button" id="btn1" value="HelloWorld"/> <input type="button" id="btn2" value="传入参数"/> <input type="button" id="btn3" value="返回集合"/> <input type="button" id="btn4" value=" 返回复合类型"/> </div><div id="dictionary">dictionary</div></form>
</body>
</html>

后台.cs文件

using System;
using System.Collections;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.Services;
public partial class Default2 : System.Web.UI.Page
{protected void Page_Load(object sender, EventArgs e){}[WebMethod]public static string HelloWorld(){return "123--->456";}[WebMethod]public static string ABC(string ABC){return ABC;}[WebMethod]public static string GetWish(string value1, string value2, string value3, int value4){return string.Format("祝您在{3}年里 {0}、{1}、{2}", value1, value2, value3, value4);}/// <summary>/// 返回集合/// </summary>/// <param name="i"></param>/// <returns></returns>[WebMethod]public static List<int> GetArray(int i){List<int> list = new List<int>();while (i >= 0){list.Add(i--);}return list;}/// <summary>/// 返回一个复合类型/// </summary>/// <returns></returns>[WebMethod]public static Class1 GetClass(){return new Class1 { ID = "1", Value = "牛年大吉" };}public class Class1{public string ID { get; set; }public string Value { get; set; }}
}

利用Jquery让返回的各类数据(string、集合(List<>)、类)以Json数据格式返回,为什么要用到result.d

这里我们顺带讲下Json

  Json简单讲就是Javascript对象或数组.

 Json形式一: javascript对象    { "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" }   

  Json形式二: javascript数组    [{ "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" },

                                 { "firstName": "Jason", "lastName":"Hunterwang", "email": "bbbb"}]

  当然javascript 数组和对象可以互相嵌套.如形式一中的"Brett"可以换成一个Js数组或Js对象.那微软的Ajax返回的是哪种形式呢.是第一种.

  微软框架默认返回一个  { "d": "后台返回的数据" } 这里我们用以上示例中的测试到得比如  

  如上例的返回的是string类型的话Firefox调试如下 

当返回的是List<>类型的话FireFox调试如下

返回的数据也是放在Js对象中的d属性里面 所以说这就是为什么我们老是用result.d来取微软的框架返回的数据.

方法一不常用.一般用得多的还是方法二.

方法二:(建一个一般处理程序即.ashx文件)

用这种方法一般是我们要在ashx文件里手动写好返回的Json格式的数据返回给前台用

ashx 你可以配成Json格式一或Json格式二

Default.aspx页面Js代码如下

$.ajax({
type: "POST",
url: "Handler.ashx",
dataType: "json",
success: function(data){
alert(data.name); //返回的为 Json格式一(Js对象)
/* 返回的为 Json格式二(Js对象)
$(data).each(function(i) {alert(data[i].name);});*/
}
});  

Handler.ashx 代码如下

<%@ WebHandler Language="C#" class="Handler" %>using System;
using System.Web;
using System.Collections;
using System.Collections.Generic;
using System.Web.Script.Serialization;public class Handler : IHttpHandler {public void ProcessRequest (HttpContext context) {JavaScriptSerializer jss = new JavaScriptSerializer();context.Response.ContentType = "text/plain";// 返回的为Json格式一 Js对象string data = "{\"name\":\"wang\",\"age\":25}";// 返回的为Json格式二 Js数组//string data = "[{\"name\":\"wang\",\"age\":25},{\"name\":\"zhang\",\"age\":22}]";  context.Response.Write(data);            } public bool IsReusable {get {return false;}}}

以上基本上就第二种方法,可能有人不喜欢拼字符串.那有什么好办法呢?答案是有.微软对Json有很好的支持.

拿上例子说我们只要把Handler.ashx改一下就可以了

Handler.ashx 代码如下

<%@ WebHandler Language="C#" class="Handler" %>
using System;
using System.Web;
using System.Collections;
using System.Collections.Generic; // Dictionary<,> 键值对集合所需
using System.Web.Script.Serialization;  //JavaScriptSerializer 类所需
public class Handler : IHttpHandler {    public void ProcessRequest (HttpContext context) {JavaScriptSerializer jss = new JavaScriptSerializer();context.Response.ContentType = "text/plain";Dictionary<string, string> drow = new Dictionary<string, string>();drow.Add("name", "Wang");drow.Add("age", "24");context.Response.Write(jss.Serialize(drow));    } public bool IsReusable {get {return false;}}
}

ASP.Net中的JavaScriptSerializer为我们提供了很好的方法

jss.Serialize(drow) 是把drow的Dictionary<string, int> (键和值的集合)数据类型转换成Json数据格式

调试结果如下图 (上面例子是输出了一个键值多集合即一个Json形式一的Js对象)

如果要输出Json形式二(Js数组)呢? 我们也只要改动一部分就了

Handler.ashx 代码如下

<%@ WebHandler Language="C#" class="Handler" %>
using System;
using System.Web;
using System.Collections;
using System.Collections.Generic;
using System.Web.Script.Serialization;
public class Handler : IHttpHandler {    public void ProcessRequest (HttpContext context) {JavaScriptSerializer jss = new JavaScriptSerializer();context.Response.ContentType = "text/plain";List<Dictionary<string, string>> _list = new List<Dictionary<string, string>>();Dictionary<string, string> drow = new Dictionary<string, string>();drow.Add("name", "Wang");drow.Add("age", "24");Dictionary<string, string> drow1 = new Dictionary<string, string>();drow1.Add("name", "Zhang");drow1.Add("age", "35");_list.Add(drow); _list.Add(drow1);   context.Response.Write(jss.Serialize(_list));               } public bool IsReusable {get {return false;}}
}

调试结果如下图 (上面例子是输出了Json形式二的Js数组)

讲到这里基本概念也讲得差不多了. 这里再讲一个够常碰到的例子就是如何把DataTabel转换成Json格式从而好让前台页面调用.

就是在Handler.ashx写上一个方法

    /// <summary>/// DataTable转Json/// </summary>/// <param name="dtb"></param>/// <returns></returns>private string Dtb2Json(DataTable dtb){JavaScriptSerializer jss = new JavaScriptSerializer();ArrayList dic = new ArrayList();foreach (DataRow row in dtb.Rows){Dictionary<string, object> drow = new Dictionary<string, object>();foreach (DataColumn col in dtb.Columns){drow.Add(col.ColumnName, row[col.ColumnName]);}dic.Add(drow);}return jss.Serialize(dic);}

其实也有把Json格式转换成DataTabel格式,方法如下

    /// <summary>/// Json转DataTable/// </summary>/// <param name="json"></param>/// <returns></returns>private DataTable Json2Dtb(string json){JavaScriptSerializer jss = new JavaScriptSerializer();ArrayList dic = jss.Deserialize<ArrayList>(json);DataTable dtb = new DataTable();if (dic.Count > 0){foreach (Dictionary<string, object> drow in dic){if (dtb.Columns.Count == 0){foreach (string key in drow.Keys){dtb.Columns.Add(key, drow[key].GetType());}}DataRow row = dtb.NewRow();foreach (string key in drow.Keys){row[key] = drow[key];}dtb.Rows.Add(row);}}return dtb;}

我们让返回的Json以表格的形式显示出来

那么前台页面JS如下

$.ajax({
type: "POST",
url: "Handler.ashx",
dataType: "json",
success: function(data){var table = $("<table border='1'></table>");for (var i = 0; i < data.length; i++) {o1 = data[i];var row = $("<tr></tr>");for (key in o1){var td = $("<td></td>");td.text(o1[key].toString());td.appendTo(row);}row.appendTo(table);}table.appendTo($("#back"));
}
});  

由上例子 再讲两个Js知识点

1. 之前我们取Json里面的数据如果是返回的是数组的话是用data[i].name也可表示为data[i]["name"]

2. 如果要访问Js对象的所有属性那么遍历Js对象.

success: function(data){
$(data).each(function(i) {for(key in this) // 遍历Js对象的所有属性alert(data[i][key]);//这里就不能换成 data[i].key 否则key成了属性而不是上面的key变量});}

也有把前台Json数据传到后台后解析成DataTabel

本文转自 梦在旅途 博客园博客,原文链接:http://www.cnblogs.com/zuowj/archive/2013/01/06/2848370.html  ,如需转载请自行联系原作者

Jquery ajax 返回string类型加result.d原因相关推荐

  1. java:AXIS调用webService接口,返回String类型xml,并用dom4j简单解析xml

    一.使用axis调用webService接口,返回String类型xml 1.导入axis依赖 2.直接贴代码 /*** 调用webservice接口的方法,并返回String类型的xml* @par ...

  2. jquery ajax返回Internal server error 500错误解决方案

    jquery ajax返回Internal server error 500错误解决方案 参考文章: (1)jquery ajax返回Internal server error 500错误解决方案 ( ...

  3. ajax拒绝访问,带CORS的IE9 jQuery AJAX返回“访问被拒绝”

    带CORS的IE9 jQuery AJAX返回"访问被拒绝" 以下适用于IE以外的所有浏览器(我在IE 9中测试).jQuery.support.cors = true;... $ ...

  4. 定义银行账户类Account,有属性:卡号cid,余额balance,所属用户Customer 银行账户类Account有方法: (1)getInfo(),返回String类型,返回卡的详细信息

    //定义银行账户类Account,有属性:卡号cid,余额balance,所属用户Customer //银行账户类Account有方法: //(1)getInfo(),返回String类型,返回卡的详 ...

  5. JAVA 没有重载运算符,那么 String 类型的加法是怎么实现的,以及String类型不可变的原因和好处...

    1, JAVA 不具备 C++ 和 C# 一样的重载运算符 来实现类与类之间相互计算 的功能    这其实一定程度上让编程失去了代码的灵活性, 但是个人认为,这在一定程度上减少了代码异常的概率     ...

  6. string类型加减_测试人员应该知道的Redis知识(四) String

    一.概述 完整的说,应该是Binary-safe string,二进制安全字符串.从官网内容我们可以看到,String类型是最简单的一种数据类型,和Memcached的类型一致,一个key对应一个va ...

  7. (thinkphp、jQuery)ajax返回json数据

    Thinkphp部分代码: <?php namespace Yxg\Controller;use Think\Controller;class IndexController extends C ...

  8. 深入理解Spring MVC Controller返回String类型导致中文乱码的问题。

    代码 在Controller层写下如下的测试代码: @GetMappingpublic String test() {return "这是一个中文句子";} 调试 在return返 ...

  9. mysql int 判断_PHP通过PDO查MySQL查询int字段返回string类型,解决方案

    虽说PHP是弱类型的语言,但不代表没类型,乱转也是个问题,因为要进行数据比较,判断,还要和其它语言数据交互.这个问题一定要解决的.但网上的标准答案似乎没提驱动问题,此文结合作者经验详细说明. 1.PD ...

最新文章

  1. Java中比较对象的两个接口Comparable接口和Comparator接口
  2. jieba库 python2.7 安装_Python中文分词工具大合集:安装、使用和测试
  3. STL中map/vector的删除元素操作
  4. python那么慢为什么还有人用-为什么Python如此慢
  5. 有备无患的Linux操作系统备份方法
  6. Poj2449 Remmarguts' Date 【A*搜索】K短路
  7. 线程池三种队列使用,SynchronousQueue,LinkedBlockingQueue,ArrayBlockingQueue
  8. delare和typeset
  9. Swift多线程:GCD进阶,单例、信号量、任务组
  10. java core 作者_java core dump分析实战
  11. Win11系统线程异常未处理怎么办?Win11系统线程异常未处理解决方法
  12. 人工智能的主要风险因素有哪些?
  13. linux系统gaussian09,高斯(Gaussian)软件linux下安装
  14. 计算机主板测评,性能测试及评测室总结
  15. ffmpeg wav 转 mp3 以及其他音频转换
  16. 如何在服务器上还原数据库文件,SQL Server 使用入门教程(bak文件还原数据库)...
  17. 怎么查看自己CSDN博客的具体排名数?
  18. 硅烷PEG硅烷,Silane-PEG-Silane
  19. 零基础学爬虫大概多久?
  20. springboot2.3整合mybatis-plus3.3.2较为详细的教程

热门文章

  1. 谷歌兄弟公司Wing将于10月开始试点无人机配送
  2. 【数据结构与算法】图论基础与图存储结构
  3. Tensorflow—tensorboard网络结构
  4. 哈工大等实现人工肌肉重大突破登上 Science!多国科学家联合实现全新驱动机理...
  5. 制胜人工智能时代——企业人工智能应用现状分析(第三版)
  6. 日益谨慎的谷歌AI,会在自我限制中越走越慢吗?
  7. 中国芯片将靠此超车!RISC-V架构神在哪全解构【附下载】
  8. 脑科学研究:对于学习来说,休息可能与练习同样重要...
  9. 年度回顾:2018年的人工智能/机器学习惊喜及预测19年的走势
  10. 2018中国自动驾驶市场专题分析