关于静态页面的js+ajax分页很迷惑求解！该怎么处理

关于静态页面的js+ajax分页很迷惑求解！
在最开始的时候我就是想实现一个分页的效果...不用无刷新的提交....
结果...问题出来了..
1.我不知道如何向后台提交值，如何把点击上一页或者下一页所得到的页数交给后台处理？
前台：
----------------------------------------------
<script src="js/common.js" type="text/javascript"></script>
<script type="text/javascript">
var xhr;
function gel(id) {
return document.getElementById(id);
}
window.onload = function () {
xhr = createXmlHttp;
}
function page(index) {
xhr.open("POST", "一般处理文件", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.readystatechange = getpage;
xhr.send("adi=" + index);
}
function getpage() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var res = xhr.responseText;
var resarr = res.split(",");
if (resarr[0] == "ok") {
//todo
}
}
}
}
</script>
<body>
<form id="form1" runat="server">
<table cellpadding="0" cellspacing="0" class="gc" border="1px">
<%=sb.ToString()%>
</table>
<div>
<input type="button" value="上一页" id="btnPre" class="btn" />
<input type="button" value="下一页" id="btnNext" class="btn" />
</div>
</form>
</body>
后台：
----------------------------------------------
public StringBuilder sb;
int pagecount = 1;
BooksManager Bm = new BooksManager();
protected void Page_Load(object sender, EventArgs e)
{
sb = new StringBuilder();
Bind(pagecount);
if (IsPostBack)
{
int page = Convert.ToInt32(Request.QueryString["Default.aspx"]);
Bind(page);
}
}

private void Bind(int pagecount)
{
DataTable dt = Bm.GetData(pagecount);
foreach (DataRow dr in dt.Rows)
{
sb = sb.Append("<tr><td>" + dr[0].ToString() + "</td>");
sb = sb.Append("<td>" + dr[1].ToString() + "</td>");
sb = sb.Append("<td>" + dr[2].ToString() + "</td></tr>");
}
}
}
--------------------------------------
实在想不出来了后来就想出想要用ajax去做..因为以前看到个ajax的例子我还记得些..是用一般处理程序做的...可是刚写了一般我就郁闷了..我还是不知道怎么把值传给后台去处理

迷茫中求解！

代码只写了一部分..因为想不到接下来怎么写于是就停在这里了...

------解决方案--------------------

HTML code


<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<MySqlDAL.PaginatedList<MySqlDAL.Person>>" %>
<script type="text/javascript">
    function changePage(flag, pages, totalPages) {
        if (totalPages != 0) {
            var tmp =   "self"      == flag ? pages :
                        "first"     == flag ? 0 :
                        "forward"   == flag ? (pages > 0 ? pages - 1 : 0) :
                        "last" == flag ? totalPages - 1 :
                        "next" == flag ? (pages == totalPages - 1 ? pages : parseInt(pages,10) + 1) : 0;
            ajaxLoad('divSearchList', '<%= Url.Content("~/Person/PersonList")%>', 'searchFlag=changePage&pages=' + tmp);
        }
    }
</script>
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td style="width:20%">Current Page : <%= Model.Pager.PageIndex + 1%></td>
                <td style="width:60%; text-align:center" align="center">
                    <a href="javascript:changePage('first','<%= Model.Pager.PageIndex %>','<%= Model.Pager.TotalPages %>');">|<<</a>&nbsp;
                    <a href="javascript:changePage('forward','<%= Model.Pager.PageIndex %>','<%= Model.Pager.TotalPages %>');">|<</a>&nbsp;&nbsp;
                    <%for (int i = 0; i < Model.Pager.TotalPages; i++ ) { %>
                      <a href="javascript:changePage('self','<%= i %>','<%= Model.Pager.TotalPages %>');"><%= i + 1 %></a>
                    <%} %>&nbsp;&nbsp;
                    <a href="javascript:changePage('next','<%= Model.Pager.PageIndex %>','<%= Model.Pager.TotalPages %>');">>|</a>&nbsp;
                    <a href="javascript:changePage('last','<%= Model.Pager.PageIndex %>','<%= Model.Pager.TotalPages %>');">>>|</a>
                </td>
                <td style="width:20%" align="right"><%= Model.Pager.TotalCount%> results</td>
           </tr>
        </table>
<%  foreach (var item in Model)
    {
        <table width="100%">
            <tr>
                <td></td>
                <td><%= Html.ActionLink(string.IsNullOrEmpty(item.Name), "Details", "control", new { id = item.ID }, null)%></td>
                <td><%= item.MobilePhone %></td>
            </tr>
        </table>
<% } %>

关于静态页面的js+ajax分页很迷惑求解！该怎么处理

相关推荐