ajax 基础2

连接数据库实现分页功能

  1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
  2 
  3 <!DOCTYPE html>
  4 
  5 <html xmlns="http://www.w3.org/1999/xhtml">
  6 <head runat="server">
  7     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8     <title></title>
  9     <style type="text/css">
 10         #table {
 11              100%;
 12             background-color: blue;
 13             text-align: center;
 14             font-weight: bold;
 15         }
 16     </style>
 17     <script src="jquery-1.7.2.min.js"></script>
 18 </head>
 19 <body>
 20     <form id="form1" runat="server">
 21         <div>
 22             <table id="table">
 23                 <thead style="color: white;">
 24                     <tr>
 25                         <td>用户名</td>
 26                         <td>密码</td>
 27                         <td>昵称</td>
 28                         <td>性别</td>
 29                         <td>生日</td>
 30                         <td>年龄</td>
 31                         <td>民族</td>
 32                         <td>班级</td>
 33                     </tr>
 34                 </thead>
 35                 <tbody style="background-color: white" id="tbody">
 36                     <asp:Repeater ID="Repeater1" runat="server">
 37                         <ItemTemplate>
 38                             <tr>
 39                                 <td><%#Eval("username") %></td>
 40                                 <td><%#Eval("password") %></td>
 41                                 <td><%#Eval("nick") %></td>
 42                                 <td><%#Eval("sexstar") %></td>
 43                                 <td><%#Eval("birthday") %></td>
 44                                 <td><%#Eval("age") %></td>
 45                                 <td><%#Eval("nationname") %></td>
 46                                 <td><%#Eval("classname") %></td>
 47                             </tr>
 48                         </ItemTemplate>
 49                     </asp:Repeater>
 50                 </tbody>
 51             </table>
 52             <input type="button" value="上一页" id="btn1" disabled="disabled" />
 53             <input type="button" value="下一页" id="btn2" />
 54             当前第<span id="span">1</span>页
 55         </div>
 56     </form>
 57 </body>
 58 </html>
 59 <script type="text/javascript">
 60     var pagecount = 3;
 61     var pagenumber = 1;
 62     document.getElementById("btn1").onclick = function () {
 63         document.getElementById("btn2").disabled = "";
 64         pagenumber--;
 65         Change(pagecount, pagenumber);
 66         if (pagenumber <= 1) {
 67             document.getElementById("btn1").disabled = "disabled";
 68         }
 69         else {
 70             document.getElementById("btn1").disabled = "";
 71         }
 72 
 73 
 74     };
 75     document.getElementById("btn2").onclick = function () {
 76 
 77         $.ajax({
 78             url: "ajax/Hand2.ashx",
 79             data: {},
 80             type: "post",
 81             dataType: "json",
 82             success: function (data1) {
 83 
 84                 document.getElementById("btn1").disabled = "";
 85                 pagenumber++;
 86                 Change(pagecount, pagenumber);
 87                 if (pagenumber >= parseInt(data1.aaa)) {
 88                     document.getElementById("btn2").disabled = "disabled";
 89                 }
 90                 else {
 91                     document.getElementById("btn2").disabled = "";
 92                 }
 93             }
 94         })
 95 
 96 
 97     };
 98     function Change(count, number) {
 99         $.ajax({
100             url: "ajax/Hand.ashx",
101             data: { "count": count, "number": number },
102             type: "post",
103             dataType: "json",
104             success: function (data) {
105                 document.getElementById("tbody").innerHTML = "";
106                 for (i in data) {
107                     var end = "<tr>";
108                     end += "<td>" + data[i].username + "</td>";
109                     end += "<td>" + data[i].password + "</td>";
110                     end += "<td>" + data[i].nickname + "</td>";
111                     end += "<td>" + data[i].sex + "</td>";
112                     end += "<td>" + data[i].birthday + "</td>";
113                     end += "<td>" + data[i].age + "</td>";
114                     end += "<td>" + data[i].nation + "</td>";
115                     end += "<td>" + data[i].class + "</td>";
116                     end += "</tr>";
117 
118                     document.getElementById("tbody").innerHTML += end;
119                 }
120                 document.getElementById("span").innerHTML = number;
121             }
122         });
123     }
124 
125 
126 </script>

 1 public partial class Default2 : System.Web.UI.Page
 2 {
 3     protected void Page_Load(object sender, EventArgs e)
 4     {
 5         if (!IsPostBack)
 6         {
 7             Repeater1.DataSource = new UsersData().select(3,1);
 8             Repeater1.DataBind();
 9         }
10     }
11 }

用Repeater绑定初始数据

 1 <%@ WebHandler Language="C#" Class="Hand" %>
 2 
 3 using System;
 4 using System.Web;
 5 using System.Collections.Generic;
 6 
 7 public class Hand : IHttpHandler {
 8     
 9     public void ProcessRequest (HttpContext context) {
10         int c = Convert.ToInt32(context.Request["count"]);
11         int n = Convert.ToInt32(context.Request["number"]);
12 
13         string json = "[";
14 
15         List<WindowsFormsApplication1.App_Code.Users> ulist = new WindowsFormsApplication1.App_Code.UsersData().select(c,n);
16         int count = 0;
17         foreach (WindowsFormsApplication1.App_Code.Users u in ulist)
18         {
19             if (count > 0)
20             {
21                 json += ",";
22             }
23             json += "{"username":"" + u.Username+ "","password":"" + u.Password+ "","nickname":"" + u.Nick + "","sex":"" + (u.Sex ? "男" : "女") + "","birthday":"" + u.Birthday.ToString("yyyy年MM月dd日") + "","nation":"" + u.NationName + "","class":"" + u.ClassName + "","age":"" + u.age + ""}";
24             count++;
25         }
26 
27         json += "]";
28         context.Response.Write(json);
29         context.Response.End();
30 
31     }
32  
33     public bool IsReusable {
34         get {
35             return false;
36         }
37     }
38 
39 }

Hand.ashx

 1 <%@ WebHandler Language="C#" Class="Hand2" %>
 2 
 3 using System;
 4 using System.Web;
 5 
 6 public class Hand2 : IHttpHandler {
 7     
 8     public void ProcessRequest (HttpContext context) {
 9         string json1;
10         System.Collections.Generic.List<WindowsFormsApplication1.App_Code.Users> Ulist = new WindowsFormsApplication1.App_Code.UsersData().Select();
11         int a = Ulist.Count;
12         string maxpage = (Math.Ceiling(a / 3.0)).ToString();
13         json1 = "{"aaa":"" + maxpage + ""}";
14         context.Response.Write(json1);
15         context.Response.End();
16     }
17  
18     public bool IsReusable {
19         get {
20             return false;
21         }
22     }
23 
24 }

Hand2.ashx

相关阅读:
反序列化中的对象逃逸——安洵杯2019 easy_serialize_php
html中内联元素和块级元素
 Spring Boot 中使用WebJars
@Valid Date 日期全局的格式化转换
 请使用“ MongoMappingContext＃setAutoIndexCreation（boolean）”或覆盖“MongoConfigurationSupport＃autoIndexCreation（）”以明确
 Windows netstat 查看端口、进程占用
 Spring中@Async注解执行异步任务 & @Async Could not find unique TaskExecutor bean; NoUniqueBeanDefinitionException;
Spring Data Mongodb的API及案例（exists、gt、in、is、orOperator 、regex、size）
在java中使用JMH（Java Microbenchmark Harness）做性能测试
 Http option 请求是怎么回事
原文地址：https://www.cnblogs.com/maxin991025-/p/6287581.html