详谈 Jquery Ajax 异步处理Json数据.

啥叫异步,啥叫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

详谈 Jquery Ajax 异步处理Json数据.的更多相关文章

jQuery Ajax异步处理Json数据详解
先我们来看一个官方的实例使用 AJAX 请求来获得 JSON 数据,并输出结果: $("button").click(function(){ $.getJSON("dem ...
jQuery异步获取json数据的2种方式
jQuery异步获取json数据有2种方式,一个是$.getJSON方法,一个是$.ajax方法.本篇体验使用这2种方式异步获取json数据,然后追加到页面. 在根目录下创建data.json文件: ...
jquery通过ajax方法获取json数据不执行success
1.jquery通过ajax方法获取json数据不执行success回调问题描述:jquery通过ajax方法获取json数据不执行success回调方法问题原因:json格式存在问题或不符合标准 ...
jquery通过ajax方法获取json数据不执行success回调
问题描述:jquery通过ajax方法获取json数据不执行success回调方法问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法解决方案:使json格式务必符合下述 ...
淘宝购物车页面智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
(转)springMVC框架下JQuery传递并解析Json数据
springMVC框架下JQuery传递并解析Json数据 json作为一种轻量级的数据交换格式,在前后台数据交换中占据着非常重要的地位.Json的语法非常简单,采用的是键值对表示形式.JSON 可以 ...
使用 jQuery Ajax 异步登录，并验证用户输入信息（maven）
使用 jQuery Ajax 异步登录,并验证用户输入信息(maven) 本篇内容: (1)上一篇是使用同步的请求实现登录,并由 Servlet 决定登陆后下一步做哪些事情,本篇使用 jQuery A ...
Jquery Ajax 异步设置Table中某列的值
可根据table中某列中的ID去改变某列的值! 只是参考,实际应用中不能这样做的,如果有很多行,频繁访问服务器,服务器是顶不住的! JS: $(document).ready(function () ...
jquery ajax调用返回json格式数据处理
Ajax请求默认的都是异步的如果想同步 async设置为false就可以(默认是true) var html = $.ajax({ url: "some.php", async: ...

随机推荐

iOS常见问题(1)
一.storyboard连线问题产生原因:将与storyboard关联的属性删除了,但是storyboard中还保持之前所关联的属性. 解决: 1.点击view controller 2.点击这排最 ...
【狼窝乀野狼】Serializer妙手回春
在我们很多程序中,需要将数据保存到本地,以便于下次打开还能看到原始数据.例如我们Xmind思维导图,例如我们的Power Designer等等,都是有保存一个隶属于自己的工程文件,那么今天我要说的就是 ...
怎么让LinearLayout充满ScrollView
ScrollView里只能放一个元素. 当ScrollView里的元素想填满ScrollView时,使用"fill_parent"是不管用的,必需为ScrollView设置: ...
MYSQL-实现ORACLE- row_number() over(partition by ) 分组排序功能
MYSQL-实现ORACLE- row_number() over(partition by ) 分组排序功能由于MYSQL没有提供类似ORACLE中OVER()这样丰富的分析函数. 所以在MYSQ ...
linux 下安装 rpm 格式的 mysql
在Linux操作系统下,安装MYSQL有两种方式: 一种tar安装方式, 另外一种是rpm安装方式. 这两种安装方式有什么区别呢?尽管我们在Linux下常用tar来压缩/解压缩文件,但MYSQL的ta ...
javamail邮件发送报错解决方案
如果你用myEclipse进行开发的话,运行时可能会出现以下的错误:Exception in thread "main" java.lang.NoClassDefFoundErro ...
css块级元素、行内元素
说说对html页面元素的排列认识: html中所有元素从上到下排列,所以需要css来对其中的元素进行排序.调节样式,并用js为其添加交互效果. css的排序.定位是相对块级元素而言的,margin/p ...
【unity3d游戏开发之基础篇】unity3d射线的原理用法以及一个利用射线实现简单拾取的小例子
原地址:http://www.cnblogs.com/xuling/archive/2013/03/04/2943154.html 最近开始研究U3D,它的强大就不多说了, 今天研究了研究射线相关东西 ...
ios iap 购买总是提示继续的解决方案
原地址:http://blog.csdn.net/kafeidev/article/details/8619984 ========================================== ...
灵魂有香气的女子IOS版本APP，近期将考虑开放源代码
实在太忙,灵魂有香气的女子这个App,断断续续开发了1个多月了,前后台自己独立完成, 由于接触swift没多久,还属于新手行列,不熟悉,希望大家给出意见, 根据意见,完善后将于近期将考虑开放swift ...

详谈 Jquery Ajax 异步处理Json数据.

详谈 Jquery Ajax 异步处理Json数据.的更多相关文章

随机推荐

热门专题