实例讲解jquery与json的结合


Posted in Javascript onJanuary 07, 2016

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

<!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> 
<title>test2</title> 
<script language="javascript" type="text/javascript" src="js/jquery-latest.pack.js"></script> 
<script language="javascript" type="text/javascript" src="js/PageDate.js"></script> 
 
</head> 
<body> 
<div> 
<div> 
<br /> 
<input id="first" type="button" value=" << " /><input id="previous" type="button"
value=" < " /><input id="next" type="button" value=" > " /><input id="last" type="button"
value=" >> " /> 
 <span id="pageinfo"></span> 
<ul id="datas"> 
<li id="template"> 
<span id="OrderID"> 
订单ID 
</span>/ 
<span id="CustomerID"> 
客户ID 
</span> 
<span id="EmployeeID"> 
雇员ID 
</span>/ 
<span id="OrderDate"> 
订购日期 
</span>/ 
<span id="ShippedDate"> 
发货日期 
</span>/ 
<span id="ShippedName"> 
货主名称 
</span>/ 
<span id="ShippedAddress"> 
货主地址 
</span>/ 
<span id="ShippedCity"> 
货主城市 
</span>/ 
<span id="more"> 
更多信息 
</span> 
</li> 
</ul> 
</div> 
<div id="load" style="left: 0px; position: absolute; top: 0px; background-color: red"> 
LOADING.... 
</div> 
<input type="hidden" id="pagecount" /> 
</div> 
</body> 
</html> 
////注:ID属性比较重要,用于数据绑定。

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("<a href=OrderInfo.aspx?id=" + n.OrderID + "&pageindex="+pageIndex+"> More</a>"); 
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格式数据 

<%@ WebHandler Language="C#" Class="jQueryJSON.Handler" %> 
 
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 
{ 
/// <summary> 
/// $codebehindclassname$ 的摘要说明 
/// </summary> 
[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("},"); 
} 
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<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的结合相关文章有所帮助。

Javascript 相关文章推荐
javascript之可拖动的iframe效果代码
Aug 01 Javascript
jquery实现奇偶行赋值不同css值
Feb 17 Javascript
JavaScript中json对象和string对象之间相互转化
Dec 26 Javascript
jquery制作居中遮罩层效果分享
Feb 21 Javascript
js 验证身份证信息有效性
Mar 28 Javascript
JS实现一个简单的日历
Feb 22 Javascript
Vuex之理解Mutations的用法实例
Apr 19 Javascript
vue路由嵌套的SPA实现步骤
Nov 06 Javascript
Angular PWA使用的Demo示例
Jan 31 Javascript
Vue发布项目实例讲解
Jul 17 Javascript
vue 解决数组赋值无法渲染在页面的问题
Oct 28 Javascript
JavaScript实现多个物体同时运动
Mar 12 Javascript
javascript仿百度输入框提示自动下拉补全
Jan 07 #Javascript
基于jquery实现表格无刷新分页
Jan 07 #Javascript
js密码强度检测
Jan 07 #Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
Jan 07 #Javascript
基于JavaScript实现通用tab选项卡(通用性强)
Jan 07 #Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
Jan 07 #Javascript
JavaScript设计模式初探
Jan 07 #Javascript
You might like
PHP中for与foreach的区别分析
2011/03/09 PHP
解决php接收shell返回的结果中文乱码问题
2014/01/23 PHP
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
2011/08/28 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
jquery选择器之层级过滤选择器详解
2014/01/27 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
2015/11/02 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
Webpack 服务器端代码打包的示例代码
2017/09/19 Javascript
详解自定义ajax支持跨域组件封装
2018/02/08 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
JavaScript仿京东秒杀倒计时
2020/03/17 Javascript
Python使用py2exe打包程序介绍
2014/11/20 Python
Python脚本实现DNSPod DNS动态解析域名
2015/02/14 Python
python分析apache访问日志脚本分享
2015/02/26 Python
windows下Python实现将pdf文件转化为png格式图片的方法
2017/07/21 Python
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
Keras中的多分类损失函数用法categorical_crossentropy
2020/06/11 Python
使用gunicorn部署django项目的问题
2020/12/30 Python
详解python3 GUI刷屏器(附源码)
2021/02/18 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
财务会计专业求职信范文
2013/12/31 职场文书
领导检查欢迎词
2014/01/14 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏