JQuery Ajax 实现翻页无刷新

为了提高网站的用户体验，最近在网上找了一些资料，做了一个Ajax实现的无刷新的翻页，在此跟大家一起共享一下，有不足之处还望大家多多指教！一下分四个点给大家讲解。

 

1.在页面中导入JQuery的jquery-1.3.2.min.js文件。

2.页面代码

 

代码

1 <% @ Page Language = " C# " AutoEventWireup = " true " CodeBehind = " TurnPage.aspx.cs " Inherits = " WebApplication1.ShowInfoList " %>
2
3   <! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
4   < html xmlns = " http://www.w3.org/1999/xhtml " >
5   < head runat = " server " >
6 < title > 显示列表 </ title >
7 < link type = " text/css " href = " css/pagination.css " />
8 < script type = " text/javascript " src = " jquery-1.3.2.min.js " ></ script >
9 < script type = " text/javascript " src = " showdata.js " ></ script >
10   </ head >
11   < body >
12 < form id = " form1 " runat = " server " >
13 < div >
14 < asp:Literal ID = " ltr_show " runat = " server " >
15 < table style = " width:400px; " id = " tbshow " >
16 < tr >< td > 标题 </ td >< td > 版本 </ td >< td > 时间 </ td ></ tr ></ table >
17 </ asp:Literal >
18 < br />
19 < a id = " uppage " href = " # " > 上一页 </ a >& nbsp; & nbsp; & nbsp; & nbsp; < a id = " downpage " href = " # " > 下一页 </ a >
20 </ div >
21 </ form >
22   </ body >
23   </ html >
24
25  

 

 

3.编写一个js文件showdata.js，当然也可以将它里面的js直接写在页面上

js代码如下：

 

代码

1 $().ready( function (){
2   var indexs = 1 ;
3 Init(indexs);
4 $( " #uppage " ).click( function (){ if (indexs > 1 ){indexs -- }Init(indexs);});
5 $( " #downpage " ).click( function (){indexs ++ ;Init(indexs);});
6 });
7   function Init(ind)
8 {
9 $.ajax({
10 type: " GET " ,
11 dataType: " json " ,
12 url: " JsonGetDataList.aspx " , // 目标地址(页面代码会在下面呈上)
13   data: " pageindex= " + ind,
14 success: function (json){
15 var result = json.ShowData;
16 var tbody = "" ;
17 $( " #tbshow tr:gt(0) " ).remove();
18 $.each(result, function (i, n){
19 var tr = " <tr><td> " + n.Title + " </td><td> " + n.Version + " </td><td> " + n.AddTime + " </td></tr> " ;
20 tbody += tr;
21 });
22 $( " #tbshow tr:gt(0):odd " ).attr( " class " , " odd " );
23 $( " #tbshow tr:gt(0):even " ).attr( " class " , " even " );
24 $( " #tbshow " ).append(tbody);
25 }});
26 }
27
28

 

 

 

4. JsonGetDataList.aspx.cs文件代码如下：(JsonGetDataList.aspx页面无代码，只需有一个<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JsonGetDataList.aspx.cs" Inherits="WebApplication1.JsonGetDataList" %> 就行了)

 

代码

1 using System;
2 using System.Collections;
3 using System.Configuration;
4 using System.Data;
5 using System.Linq;
6 using System.Web;
7 using System.Web.Security;
8 using System.Web.UI;
9 using System.Web.UI.HtmlControls;
10 using System.Web.UI.WebControls;
11 using System.Web.UI.WebControls.WebParts;
12 using System.Xml.Linq;
13 using System.Data.SqlClient;
14 using System.Text;
15 using System.IO;
16 using Newtonsoft.Json;
17 using System.Data.OleDb;
18
19 namespace WebApplication1
20 {
21 public partial class JsonGetDataList : System.Web.UI.Page
22 {
23 private string constr = System.Web.Configuration.WebConfigurationManager.ConnectionStrings[ " myConn " ].ToString(); // 数据库连接字符串
24 protected void Page_Load( object sender, EventArgs e)
25 {
26 ShowData();
27 }
28 private void ShowData()
29 {
30 // 去掉页面缓存
31 Page.Response.Buffer = true ;
32 Page.Response.ExpiresAbsolute = DateTime.Now.AddDays( - 1 );
33 Page.Response.AddHeader( " pragma " , " no-cache " );
34 Page.Response.AddHeader( " cache-control " , "" );
35 Page.Response.CacheControl = " no-cache " ;
36 Response.ContentType = " text/plain " ;
37 int pageindex = string .IsNullOrEmpty(Request.QueryString[ " pageindex " ]) ? 1 :Convert.ToInt32(Request.QueryString[ " pageindex " ]);
38 DataSet ds = GetList(pageindex);
39 string jsonData = DataTableToJSON(ds.Tables[ 0 ], " ShowData " );
40 // 输入json格式数据
41 Response.Write(jsonData);
42 }
43 /// <summary>
44 /// 分页获取数据列表
45 /// </summary>
46 private DataSet GetList( int pageindex)
47 {
48 // 创建数据库连接池
49 OleDbConnection co = new OleDbConnection(constr);
50 // 打开连接池
51 co.Open();
52 OleDbCommand commands;
53 commands = new OleDbCommand( " select count(*) from teachermaterial " , co);
54 // 数据总记录数
55 int totalcounts = Convert.ToInt32(commands.ExecuteScalar());
56 // 自定义每页大小为5条数据
57 int pagesize = 5 ;
58 // 总记录数
59 int totalpages;
60 if (totalcounts % pagesize > 0 )
61 totalpages = totalcounts / pagesize + 1 ;
62 else
63 totalpages = totalcounts / pagesize;
64 if (pageindex > totalpages)
65 pageindex = totalpages;
66 DataSet ds = new DataSet();
67 commands = new OleDbCommand( " select top 5 * from teachermaterial where id not in (select top (5*( " + pageindex + " -1)) id from teachermaterial) " , co);
68 OleDbDataAdapter adapter = new OleDbDataAdapter(commands);
69 adapter.Fill(ds, " ds " );
70 co.Dispose();
71 return ds;
72 }
73 /// <summary>
74 /// 数据表转换成JSON字符
75 /// </summary>
76 /// <param name="dt"> 数据表对象 </param>
77 /// <param name="dtName"> 数据表名称 </param>
78 public static string DataTableToJSON(DataTable dt, string dtName)
79 {
80 StringBuilder sb = new StringBuilder();
81 StringWriter sw = new StringWriter(sb);
82
83 using (JsonWriter jw = new JsonTextWriter(sw))
84 {
85 JsonSerializer ser = new JsonSerializer();
86 jw.WriteStartObject();
87 jw.WritePropertyName(dtName);
88 jw.WriteStartArray();
89
90 if (dt != null )
91 {
92 foreach (DataRow dr in dt.Rows)
93 {
94 jw.WriteStartObject();
95
96 foreach (DataColumn dc in dt.Columns)
97 {
98 jw.WritePropertyName(dc.ColumnName);
99 ser.Serialize(jw, dr[dc].ToString());
100 }
101
102 jw.WriteEndObject();
103 }
104 }
105
106 jw.WriteEndArray();
107 jw.WriteEndObject();
108
109 sw.Close();
110 jw.Close();
111
112 }
113
114 return sb.ToString();
115 }
116 }
117 }
118
119
120
121

 

 

 

 

5.看效果了， o(∩_∩)o 哈哈，大功告成

转载于:https://www.cnblogs.com/tobenumberone/archive/2010/07/21/1782099.html