`
jayyanzhang2010
  • 浏览: 377877 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

jquery与json的结合

jsonjQueryAjaxCacheSQL 
阅读更多
通过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=" >> " />
&nbsp;<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+">&nbsp;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; 
} 
} 
} 
}
分享到：
| JSON与JAVA的数据转换
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JQuery与Json的结合使用

    当jQuery与JSON结合使用时，它们能够实现数据的高效传输和动态页面更新，从而提升用户体验。 首先，我们来详细了解一下jQuery。jQuery的核心功能包括选择器（用于选取HTML元素）、DOM操作（如添加、删除或修改元素...

    jQuery读取json数据

    在实际应用中，我们可以结合jQuery的DOM操作方法，如`.html()`, `.append()`, `.attr()`等，将接收到的JSON数据动态地展示在网页上，实现动态更新和交互。 总之，jQuery读取JSON数据不仅提高了效率，也提升了代码的...

    jquery与json和ajax的结合

    ### jQuery与JSON及AJAX的结合应用 #### 一、引言 随着Web技术的发展，前端框架和库的出现极大地简化了开发流程。其中，jQuery因其简洁易用的特点，在前端开发领域占据了重要的地位。本文将详细介绍如何利用jQuery...

    jquery-json使用

    本文将深入探讨jQuery中的JSON使用，结合具体的示例代码JSONObjectDemo，帮助读者理解并掌握这一技能。 首先，JSON是一种基于JavaScript语法的数据格式，它可以表示复杂的数据结构，包括对象和数组。在jQuery中，...

    Jquery.json.js

    **jQuery与JSON的结合** `jquery.json.js`文件是jQuery的一个插件，它扩展了jQuery的功能，使其能够更好地处理JSON数据。这个插件可能包含了对JSON的解析和序列化的方法，使得在jQuery中操作JSON变得更加便捷。例如...

    jquery和json结合实现ajax

    以上就是使用jQuery和JSON结合实现AJAX的简单步骤。在实际开发中，还需要关注数据安全、性能优化等问题。例如，可以使用缓存策略减少不必要的请求，或者使用异步加载技术提高页面响应速度。通过这样的实践，你可以更...

    jquery1.7+jquery for json 2.3

    总结来说，jQuery 1.7与jQuery JSON 2.3插件的结合使用，为开发者提供了强大而全面的JSON处理能力，同时通过jQuery 1.7的改进，让JavaScript编程变得更高效、更易于维护。无论是处理DOM操作、事件绑定还是AJAX通信，...

    jquery.json-viewer示例

    **jQuery JSON Viewer 示例** jQuery JSON Viewer 是一个非常实用的JavaScript插件，用于将JSON对象以易于阅读和理解的格式展示出来...在实际开发中，结合此插件可以提升数据查看的效率，特别是在处理大量JSON数据时。

    JQuery操作json的例子

    总结起来，jQuery 提供了丰富的功能来处理 JSON 数据，包括获取、解析、遍历以及与 DOM 操作结合。理解这些操作对于开发高效的 Web 应用至关重要。通过实践和运用这些知识，开发者可以更高效地进行前后端数据交互，...

    简单的SSH+JQuery+JSON例子

    结合以上技术，一个简单的SSH+JQuery+JSON例子可能包含以下步骤： 1. 用户通过前端页面发送Ajax请求，请求由JQuery发起，数据格式为JSON。 2. Struts框架接收到请求，通过Action转发到Spring控制层。 3. Spring控制...

    Jquery ajax json 总结

    总结来说，JQuery AJAX 提供了与服务器异步交互的能力，而 JSON 则是高效的数据交换格式。两者结合使用，可以实现高效的前后端数据通信，提升用户体验，减少不必要的页面刷新。在实际项目中，了解并熟练掌握这两项...

    使用JQuery实现从JSON对象转换为form提交数据

    转换后的数据可以与jQuery的`$.ajax()`或`$.post()`方法结合，以异步方式发送到服务器。例如： ```javascript var jsonData = { name: 'John', age: 30 }; var formData = jsonToFormParams(jsonData); $.ajax...

    JqueryJson

    **jQuery与JSON的结合** 1. **AJAX与JSON**: jQuery的`$.ajax()`方法是进行异步数据请求的核心，它支持JSON作为数据格式。通过设置`dataType: 'json'`，jQuery会自动将服务器返回的JSON数据转化为JavaScript对象，...

    jquery与 json应用

    在Web开发中，jQuery与JSON的结合使用广泛，尤其是在进行异步数据交换时。 ### jQuery简介 jQuery由John Resig于2006年创建，其核心理念是"Write Less, Do More"。它通过提供简洁的API，使得JavaScript开发者能够...

    Jquery解析json

    在与jQuery结合使用时，Struts2可以作为后端处理用户的请求，并返回JSON格式的数据供前端jQuery解析使用。 #### JSON类库的选择与使用 为了生成和解析JSON数据，通常需要借助第三方的JSON类库。这里提到了使用来自...

    在jQuery中使用JSON（Struts2）

    当我们将jQuery与JSON结合使用时，可以创建高效、动态的Web应用程序。而Struts2是一个强大的MVC框架，常用于Java后端开发，它支持JSON响应，使得前端与后端的交互更加便捷。下面我们将深入探讨如何在jQuery中使用...

    ajax_struts_jquery_json级联菜单

    当服务器返回JSON数据后，jQuery解析这个JSON字符串，将其转换为JavaScript对象。然后，它遍历这些对象，动态地向HTML DOM（文档对象模型）添加新的选项，以构建级联菜单的子级部分。jQuery提供了丰富的DOM操作API，...

Magicbox
Global site tag (gtag.js) - Google Analytics