Jquery Ajax 处理Json数据
来源:互联网 发布:表情微笑知乎 编辑:程序博客网 时间:2024/05/21 11:23
- 啥叫异步,啥叫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
- 这里我把DataTabel软成Json和Json转成DataTabel写成一个例子.下载地址如下
0 0
- JQuery, ajax处理json数据
- Jquery Ajax 处理Json数据
- Jquery Ajax 处理Json数据
- Jquery Ajax 处理Json数据
- 详谈 Jquery Ajax 异步处理Json数据.
- 详谈 Jquery Ajax 异步处理Json数据.
- Jquery ajax 访问Servlet 处理 Json 数据
- 详谈 Jquery Ajax 异步处理Json数据.
- 详谈 Jquery Ajax异步处理Json数据.
- 详谈 Jquery Ajax 异步处理Json数据.
- 详谈 Jquery Ajax 异步处理Json数据.
- 详谈 JQuery Ajax异步处理Json数据
- 详谈 Jquery Ajax 异步处理Json数据
- 详谈 Jquery Ajax异步处理Json数据
- jquery ajax 处理PHP JSON数据eval
- 详谈 Jquery Ajax 异步处理Json数据
- Jquery ajax 访问Servlet 处理 Json 数据
- 详谈 Jquery Ajax 异步处理Json数据.
- Android微信支付爬坑
- iOS 获取IP地址
- 第十二周-OJ-C进制转换
- 空间复杂度和时间复杂度
- NSArray和NSMutableArray
- Jquery Ajax 处理Json数据
- Java使用poi读取Excel文件例子
- 310. Minimum Height Trees
- java中的ReentrantLock和synchronized两种锁定机制的对比
- 怎么理解矩阵的秩
- 模态视图1-底部弹出分享按钮
- ubuntu for windows10 子系统升级
- 让运维工程师不再蓝瘦、香菇
- OutputStreamWriter