コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ ウェブフロントエンド jsチュートリアル jquery と json_jquery の組み合わせを説明する例

jquery と json_jquery の組み合わせを説明する例

May 16, 2016 pm 03:21 PM
jquery json

AJAX を介してネットワーク コンテンツの非同期送信を削減します。一方、JSON は送信コンテンツを純粋なデータに削減し、jQuery の組み込み AJAX 関数を使用してデータを JSON 形式で直接取得し、クライアント上のデータ コントロールに直接バインドします。最適を達成します。
1. HTML ページをデザインする

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

<!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 リクエスト ファイルを作成します

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

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

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 形式のデータを取得します

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

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

<%@ 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 の組み合わせに関する記事を皆さんが十分に学習するのに役立つことを願っています。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

人気の記事

スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？
3週間前 By DDD
レポ：チームメイトを復活させる方法
3週間前 By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法
3週間前 By 尊渡假赌尊渡假赌尊渡假赌
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
3週間前 By 王林
2つのポイント博物館：すべての展示とそれらを見つける場所
3週間前 By 尊渡假赌尊渡假赌尊渡假赌
もっと見る

ホットツール Tags

コード&IT
オーディオ
仕事
マーケティング
AI検出器
チャットボット
デザイン&アート

人気の記事

スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？
3週間前 By DDD
レポ：チームメイトを復活させる方法
3週間前 By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法
3週間前 By 尊渡假赌尊渡假赌尊渡假赌
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
3週間前 By 王林
2つのポイント博物館：すべての展示とそれらを見つける場所
3週間前 By 尊渡假赌尊渡假赌尊渡假赌
もっと見る

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？
7126
9
Java チュートリアル
1534
14
Laravel チュートリアル
1256
25
PHP チュートリアル
1205
29
CakePHP チュートリアル
1153
46
もっと見る
Related knowledge
PHP 配列を JSON に変換するためのパフォーマンス最適化のヒント PHP 配列を JSON に変換するためのパフォーマンス最適化のヒント May 04, 2024 pm 06:15 PM

PHP 配列を JSON に変換するためのパフォーマンス最適化のヒント

Jackson ライブラリのアノテーションは、JSON のシリアル化と逆シリアル化をどのように制御しますか? Jackson ライブラリのアノテーションは、JSON のシリアル化と逆シリアル化をどのように制御しますか? May 06, 2024 pm 10:09 PM

Jackson ライブラリのアノテーションは、JSON のシリアル化と逆シリアル化をどのように制御しますか?

jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する Feb 28, 2024 pm 09:06 PM

jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する

PHPを深く理解する：JSON Unicodeを中国語に変換する実装方法 PHPを深く理解する：JSON Unicodeを中国語に変換する実装方法 Mar 05, 2024 pm 02:48 PM

PHPを深く理解する：JSON Unicodeを中国語に変換する実装方法

PHP 配列を JSON に変換するための簡単なヒント PHP 配列を JSON に変換するための簡単なヒント May 03, 2024 pm 06:33 PM

PHP 配列を JSON に変換するための簡単なヒント

PHP チュートリアル: JSON Unicode を漢字に変換する方法 PHP チュートリアル: JSON Unicode を漢字に変換する方法 Mar 05, 2024 pm 06:36 PM

PHP チュートリアル: JSON Unicode を漢字に変換する方法

Java JSON 処理の頂点を征服する: 複雑なデータを解析して作成する Java JSON 処理の頂点を征服する: 複雑なデータを解析して作成する Mar 09, 2024 am 09:13 AM

Java JSON 処理の頂点を征服する: 複雑なデータを解析して作成する

PHP 配列を JSON に変換する際の問題と解決策 PHP 配列を JSON に変換する際の問題と解決策 May 01, 2024 pm 01:30 PM

PHP 配列を JSON に変換する際の問題と解決策

See all articles