Jquery.ajax的使用-优快云博客

本文通过两个具体案例展示了如何利用jQuery进行AJAX调用并与JSON数据进行交互。第一个案例介绍了如何从XML中提取指定的数据；第二个案例则演示了如何从前端获取数据并将其序列化为JSON格式，再通过AJAX发送到服务器端，以及如何在服务器端解析JSON数据并返回。

简单案例1、简单操作XML

$("#btn").bind("click", function() { $.ajax({ type: "post", url: "http://www.cnblogs.com/rss", //url: "http://localhost:8080/Jquery-test/default.aspx?id=sdf", datatype: "json", //data: 'id=' + "sdf", beforeSend: function(XMLHttpRequest) { $("#GetMsg").html("正在加载数据,请稍后.."); }, success: function(data, textStatus) { //var abc = data.getElementsById("divMsg"); $("#GetMsg").html(''); $("item", data).each(function(i, t) { if ($(this).children("author").text() == "Gnie") $("#GetMsg").append("<li>" + $(this).children("title").text() + "</li>"); }); $.post("Handler.ashx", { Action: "post", rss: "" + data + "" }, function(dt, txtstatus) { alert(dt); }); }, complete: function(XMLHttpRequest, textStatus) { }, error: function() { } }); });

简单案例2、jquery+json

前台： <!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> <mce:script type="text/javascript" src="../JS/jquery-1.3.min.js" mce_src="JS/jquery-1.3.min.js"></mce:script> <mce:script type="text/javascript" src="../JS/json2.js" mce_src="JS/json2.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> <form id="form1" runat="server"> <div> <table> <tr> <td>姓名：</td> <td><input type="text" id="TName" /></td> </tr> <tr> <td>住址：</td> <td><input type="text" id="TAddress"/></td> </tr> <tr> <td>年龄：</td> <td><input type="text" id="TAge" /></td> </tr> </table> <table> <tr> <td><input type="button" onclick="GetValue();" value="加载数据"></td> <td><input type="button" value="更新数据" onclick="SetValue()"></td> </tr> </table> </div> </form> </body> </html>后台：using System; using System.Collections; 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.Xml.Linq; using System.Runtime.Serialization.Json; using System.ServiceModel.Dispatcher; using System.Text; using System.Web.Script.Serialization; using System.IO; using System.Runtime.Serialization;namespace WebDemo.AjaxTest { public partial class Process : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!Request.Params.AllKeys.Contains("JsonStr")) { GetData(); } else { LoadData(); } } /// <summary> /// 从客户端加载数据 /// </summary> private void LoadData() { string str = Request.Params["JsonStr"]; DataContractJsonSerializer serializer = new DataContractJsonSerializer(typeof(Model.User)); MemoryStream ms=new MemoryStream(System.Text.Encoding.UTF8.GetBytes(str.ToCharArray())); Model.User user = (Model.User)serializer.ReadObject(ms); ms.Close(); } /// <summary> /// 向客户端发送数据 /// </summary> private void GetData() { Model.User user = new Model.User(); user.Address = "上海市闵行区"; user.Age = 26; user.Name = "Windstore"; string resultStr; //方式一：System.Runtime.Serialization.Json Assembly:System.ServiceModel.Web DataContractJsonSerializer serializer = new DataContractJsonSerializer(typeof(Model.User)); MemoryStream stream = new MemoryStream(); serializer.WriteObject(stream, user); stream.Position = 0; StreamReader sr = new StreamReader(stream); resultStr = sr.ReadToEnd(); sr.Close(); stream.Close(); //方式二：System.ServiceModel.Dispatcher.JsonQueryStringConverter Assembly:System.ServiceModel //JsonQueryStringConverter convert = new JsonQueryStringConverter(); //resultStr = convert.ConvertValueToString(user, typeof(Model.User)); //方式三：System.Web.Script.Serialization //StringBuilder sb = new StringBuilder(); //JavaScriptSerializer jsServilizer = new JavaScriptSerializer(); //jsServilizer.Serialize(user, sb); //resultStr = sb.ToString(); Response.ContentType = "application/json"; Response.Write(resultStr); Response.Flush(); Response.End(); } } }Model类：using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Runtime.Serialization;namespace WebDemo.Model { /// <summary> /// 用户实体 /// </summary> [DataContract] public class User { #region 私有字段 private string named; private string addressd; private int aged; #endregion #region 公共属性 /// <summary> /// 姓名 /// </summary> [DataMember] public string Name { get { return named; } set { named = value; } } /// <summary> /// 家庭住址 /// </summary> [DataMember] public string Address { get { return addressd; } set { addressd = value; } } /// <summary> /// 年龄 /// </summary> [DataMember] public int Age { get { return aged; } set { aged = value; } } #endregion }

json序列化反序列化作用简单总结：

我觉得你可以这样子来理解下，比如你有一个网站，可以给你提供远程对象访问，此时加入有一个user对象，当然在你远程的机器上这个user对象访问是没问题的，现在你想在本地也能使用这个user对象，那现在就可以让序列化和反序列化上场啦，你可以通过一个服务去访问这个user对象，然后这个服务返回给你一个user对象序列化后的xml或者json，当在你本地访问的时候你就可以反序列化这个xml或者json，放序列化成user对象...