ajax和json的应用,jqueryajaxjson综合应用实例

通过AJAX异步减少网络内容传输，而JSON则可以把传输内容缩减到纯数据；然后利用jQuery内置的AJAX功能直接获得JSON格式的数据；在客户端直接绑定到数据控件里面，从而达到最优。

1.设计htm页面

test2

2.使用jQuery编写AJAX请求文件

var pageIndex = 1

var pageCount = 0;

$(function() {

GetPageCount(); //取得分页总数

pageCount = parseInt($("#pagecount").val()); //分页总数放到变量pageCount里

$("#load").hide(); //隐藏loading提示

$("#template").hide(); //隐藏模板

ChangeState(0, 1); //设置翻页按钮的初始状态

bind(); //绑定第一页的数据

//第一页按钮click事件

$("#first").click(function() {

pageIndex = 1;

ChangeState(0, 1);

bind();

});

//上一页按钮click事件

$("#previous").click(function() {

pageIndex -= 1;

ChangeState( - 1, 1);

if (pageIndex <= 1) {

pageIndex = 1;

ChangeState(0, -1);

}

bind();

});

//下一页按钮click事件

$("#next").click(function() {

pageIndex += 1;

ChangeState(1, -1);

if (pageIndex >= pageCount) {

pageIndex = pageCount;

ChangeState( - 1, 0);

}

bind(pageIndex);

});

//最后一页按钮click事件

$("#last").click(function() {

pageIndex = pageCount;

ChangeState(1, 0);

bind(pageIndex);

});

});

//AJAX方法取得数据并显示到页面上

function bind() {

$("[@id=ready]").remove();

$("#load").show();

$.ajax({

type: "get",

//使用get方法访问后台

dataType: "json",

//返回json格式的数据

url: "Handler.ashx",

//要访问的后台地址

data: "pageIndex=" + pageIndex,

//要发送的数据

complete: function() {

$("#load").hide();

},

//AJAX请求完成时隐藏loading提示

success: function(msg) { //msg为返回的数据，在这里做数据绑定

var data = msg.table;

$.each(data,

function(i, n) {

var row = $("#template").clone();

row.find("#OrderID").text(n.OrderID);

row.find("#CustomerID").text(n.CustomerID);

row.find("#EmployeeID").text(n.EmployeeID);

row.find("#OrderDate").text(ChangeDate(n.OrderDate));

if (n.RequiredDate !== undefined) row.find("#ShippedDate").text(ChangeDate(n.RequiredDate));

row.find("#ShippedName").text(n.ShipName);

row.find("#ShippedAddress").text(n.ShipAddress);

row.find("#ShippedCity").text(n.ShipCity);

row.find("#more").html(" More");

row.attr("id", "ready"); //改变绑定好数据的行的id

row.appendTo("#datas"); //添加到模板的容器中

});

$("[@id=ready]").show();

SetPageInfo();

}

});

}

function ChangeDate(date) {

return date.replace("-", "/").replace("-", "/");

}

//设置第几页/共几页的信息

function SetPageInfo() {

$("#pageinfo").html(pageIndex + "/" + pageCount);

}

//AJAX方法取得分页总数

function GetPageCount() {

$.ajax({

type: "get",

dataType: "text",

url: "Handler.ashx",

data: "getPageCount=1",

async: false,

success: function(msg) {

$("#pagecount").val(msg);

}

});

}

//改变翻页按钮状态

function ChangeState(state1, state2) {

if (state1 == 1) {

document.getElementById("first").disabled = "";

document.getElementById("previous").disabled = "";

} else if (state1 == 0) {

document.getElementById("first").disabled = "disabled";

document.getElementById("previous").disabled = "disabled";

}

if (state2 == 1) {

document.getElementById("next").disabled = "";

document.getElementById("last").disabled = "";

} else if (state2 == 0) {

document.getElementById("next").disabled = "disabled";

document.getElementById("last").disabled = "disabled";

}

}

3.利用JSON三方控件在服务器端获取JSON格式数据

using System;

using System.Data;

using System.Web;

using System.Collections;

using System.Web.Services;

using System.Web.Services.Protocols;

using System.Configuration;

using System.Data.SqlClient;

using System.Text;

using System.Xml;

using NetServ.Net.Json;

namespace jQueryJSON

{

/// /// $codebehindclassname$ 的摘要说明

///

[WebService(Namespace = "http://tempuri.org/json/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

public class Handler : IHttpHandler

{

readonly int PageSize = int.Parse(ConfigurationManager.AppSettings["PageSize"]);

public void ProcessRequest(HttpContext context)

{

context.Response.ContentType = "text/plain";

//不让浏览器缓存

context.Response.Buffer = true;

context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);

context.Response.AddHeader("pragma", "no-cache");

context.Response.AddHeader("cache-control", "");

context.Response.CacheControl = "no-cache";

string result = "";

if (context.Request.Params["getPageCount"] != null) result = GetPageCount();

if (context.Request.Params["pageIndex"] != null)

{

string pageindex = context.Request.Params["pageIndex"];

result = GetPageData(context.Request.Params["pageIndex"]);

}

context.Response.Write(result);

}

private string GetPageData(string p)

{

int PageIndex = int.Parse(p);

string sql;

if (PageIndex == 1)

sql = "select top " + PageSize.ToString() + " * from Orders order by OrderID desc";

else

sql = "select top " + PageSize.ToString() + " * from Orders where OrderID not in(select top " + ((PageIndex - 1) * PageSize).ToString() + " OrderID from Orders order by OrderID desc) order by OrderID desc";

string dbfile = ConfigurationManager.ConnectionStrings["conn"].ToString();

SqlConnection conn = new SqlConnection(dbfile);

SqlDataAdapter da = new SqlDataAdapter(sql, conn);

DataTable dt = new DataTable("table");

da.Fill(dt);

return DataTableJson(dt);

}

private string GetPageCount()

{

string dbfile = ConfigurationManager.ConnectionStrings["conn"].ToString();

SqlConnection conn = new SqlConnection(dbfile);

SqlCommand cmd = new SqlCommand("select count(*) from Orders", conn);

conn.Open();

int rowcount = Convert.ToInt32(cmd.ExecuteScalar());

conn.Close();

return ((rowcount + PageSize - 1) / PageSize).ToString();

}

private string DataTable2Json(DataTable dt)

{

StringBuilder jsonBuilder = new StringBuilder();

jsonBuilder.Append("{\"");

jsonBuilder.Append(dt.TableName);

jsonBuilder.Append("\":[");

for (int i = 0; i < dt.Rows.Count; i++)

{

jsonBuilder.Append("{");

for (int j = 0; j < dt.Columns.Count; j++)

{

jsonBuilder.Append("\"");

jsonBuilder.Append(dt.Columns[j].ColumnName);

jsonBuilder.Append("\":\"");

jsonBuilder.Append(dt.Rows[i][j].ToString());

jsonBuilder.Append("\",");

}

jsonBuilder.Remove(jsonBuilder.Length - 1, 1);

jsonBuilder.Append("},");

}

jsonBuilder.Remove(jsonBuilder.Length - 1, 1);

jsonBuilder.Append("]");

jsonBuilder.Append("}");

return jsonBuilder.ToString();

}

private string DataTableJson(DataTable dt)

{

JsonWriter writer = new JsonWriter();

JsonObject content = new JsonObject();

JsonArray Orders = new JsonArray();

JsonObject Order;

JsonObject OrderItem = new JsonObject();

for (int i = 0; i < dt.Rows.Count; i++)

{

Order = new JsonObject();

for(int j =0;j

以上是jquery ajax json 综合应用实例。