实例讲解jquery与json的结合

前端之家收集整理的这篇文章主要介绍了实例讲解jquery与json的结合前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

1.设计htm页面

test2

IoUs" type="button" value=" < " />
    / / / / 名称 / / /
////注:ID属性比较重要,用于数据绑定。

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

$(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("<a href=OrderInfo.aspx?id=" + n.OrderID + "&pageindex="+pageIndex+">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"];
//if (context.Cache.Get(pageindex) != null)
// result = context.Cache.Get(pageindex).ToString();
//else
//{
// result = GetPageData(context.Request.Params["pageIndex"]);
// context.Cache.Add(
// pageindex,// result,// null,// DateTime.Now.AddMinutes(1),// System.Web.Caching.Cache.NoSlidingExpiration,// System.Web.Caching.CacheItemPriority.Default,// null);
//}
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("},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<dt.Columns.Count;j++)
{
Order.Add(dt.Columns[j].ColumnName,dt.Rows[i][j].ToString());
}
Orders.Add(Order);
}
content.Add(dt.TableName,Orders);
content.Write(writer);

writer = new IndentedJsonWriter();
content.Write(writer);

return writer.ToString();
}

public bool IsReusable
{
get
{
return false;
}
}
}
}

以上就是jquery与json的结合实例讲解,希望对大家充分学习jquery与json的结合相关文章有所帮助。

猜你在找的jQuery相关文章