jquery与json的结合

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

//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>

<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; margin: 0px !important; padding: 0px !important; outline: 0px !important; border: 0px !important; vertical-align: baseline !important; font-size: 1em !important; border-radius: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; width: auto !important; box-sizing: content-box !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; min-height: auto !important; background: none !important;">>

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;

}

转载于:https://www.cnblogs.com/telwanggs/p/5305596.html

jquery与json的结合相关推荐

jquery遍历json与数组方法总结each()
在jquery中遍历数组或json数组我们使用最多的方法是each这个函数了或使用foreach,for也是可以实现的,下面我来给大家详细介绍jquery遍历json与数组实现. 代码如下复制代码先 ...
jquery java json转字符串_用jQuery以及JSON包将表单数据转为JSON字符串
用jQuery以及JSON包将表单数据转为JSON字符串 [日期:2013-01-10] 来源:Linux社区作者:Linux [字体:大中小] 提供一个将表单数据转为json对象,再转为字符串 ...
jquery 对 Json 的各种遍历
原文链接: http://caibaojian.com/jquery-each-json.html 概述 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式, ...
ajax+php+jq+面向对象,php+jquery+ajax+json的一个最简单实例
html页面: $(function(){ $("#send").click(function(){ var cont = $("input").seriali ...
struts2 ajax html,Struts2+Jquery+Ajax+Json
现在使用Json来封装并且传递数据的情形是越来越多了,可怎么样在Struts2中来使用Jquery+Ajax+Json来协同工作呢?在网上查了下就那几个例子被转过来转过去的,还有很多例子根本行不通,这 ...
对JSON的一点认识和理解以及JQuery处理JSON
JSON(JavaScript Object Notation)javscript对象标记,是一种轻量级的数据交换格式.具体的详细基础知识可以参考JSON官网http:/www.json.org/. ...
jquery ajax json转换出错Invalid JSON
ajax中json转换采用jQuery.parseJSON(json), 1.4版本后的jQuery.parseJSON(json)传入一个畸形的JSON字符串会抛出一个异常. 比如下面的都是畸形的J ...
jq处理返回来json_（转）JQuery处理json与ajax返回JSON实例
son数据是一种经型的实时数据交互的数据存储方法,使用到最多的应该是ajax与json配合使用了,下面我来给大家介绍jquery处理json数据方法. 一.JSON的一些基础知识. JSON中对象通过 ...
php jquery api文档,使用PHP、jQuery和JSON创建公共API
使用PHP.jQuery和JSON创建公共API 本章教程将为大家展示一个使用PHP.jQuery和JSON创建公共API的简单方法. 首先,我们需要一个连接数据库的文件 connection.php ...
jQuery读取JSON数据（jQuery调用JSON数据学习第二天）
在初步了解JSON数据格式之后,接下来学习jQuery框架下,如何读取一个JSON数据. 由于JSON格式是JavaScript的原生态格式,因此,使用jQuery访问JSON数据时十分方便的,只需要 ...

jquery与json的结合

jquery与json的结合相关推荐

最新文章

热门文章