牛腩新闻发布系统总结---（ajax方法、真假分页和盒子模型）

最新推荐文章于 2020-01-08 17:30:06 发布

Michael-杨楠

最新推荐文章于 2020-01-08 17:30:06 发布

阅读量396

点赞数 1

文章标签： ajax异步操作方法真假分页盒子模型

本文链接：https://blog.csdn.net/tgbyn/article/details/79640751

版权

牛腩新闻发布系统专栏收录该内容

4 篇文章 0 订阅

订阅专栏

内容：

一、ajax异步更改数据总结：

1、ajax是异步的JavaScript和xml，他可以在不更新网页的情况下，从后台加载（获取）数据，并显示在网页上

2、主要方法：

(1)：load() 方法从服务器加载数据，并把返回的数据放入被选元素中

语法：$(选择器).load(地址，[参数]，[回调函数]）

参数：可选。是键：值的形式

回调函数：参数可以是返回的结果，调用的状态，XMLHttpRequest对象。只写一个参数，是返回的结果

例如： $("#feeds").load("feeds.php", {limit: 25}, function(){}

(2)：$.get() 方法通过 HTTPGET 请求从服务器上请求数据

语法：$.get(地址，[可选参数],[回调函数] )

回调函数：参数可以是返回的结果，调用的状态，XMLHttpRequest对象。只写一个参数，是返回的结果

例如：$.get("default.ashx",{id:id,name:name},function(data){});

(3)：$.post() 方法通过 HTTPPOST 请求从服务器上请求数据。

语法：$.post(地址，[参数]，[回调函数]）

参数：可选。是键：值的形式

回调函数：参数可以是返回的结果，调用的状态，XMLHttpRequest对象。只写一个参数，是返回的结果

例子：$.post("default.ashx",{id:id,name:name},function(data){});

(4)：$.ajax() 方法通过 HTTP 请求加载远程数据，是jQuery底层Ajax的实现。

语法：$.ajax(type,url,dataType,success)

常用的参数：

type：请求方法（POST,GET），默认为GET

url：地址

dataType：服务器返回的数据类型（XML,html,script,json,text,Json）。一般返回json类型

success：成功时的回调函数

例子：

$.ajax({

type:"post",

url:"default.ashx",

data:{id:id,name:name},

dataType:"json",

timeout:10000

success:function(data){ alert("ajax_test"},

error:function(XMLHttpRequest, textStatus, errorThrown){ }

})

想了解更多请查看《jQuery 1.10.3 在线手册》

二、真假分页总结

（1）真分页

真分页用到一个控件：AspNetPager

第一步，建立存储过程

ALTER PROCEDURE [dbo].[procNewsSelectPage]
@start integer,
@end integer    
AS
BEGIN
    with temptbl as (
    select ROW_NUMBER () over(order by id desc) as row,* from news T)
    select * from temptbl  where row between @start and @end 
    set nocount on; 
END

其中用到了公用表达式的语句，这篇博客有介绍：with...as（）

第二步：DAL层：根据传入的两个参数调用存储过程

        public DataTable SelectPage(string  start, string  end)
        {
            DataTable dt = new DataTable();
            string cmdText = "procNewsSelectPage";

            SqlParameter[] paras = new SqlParameter[]{
                        new SqlParameter ("@start",start),
                        new SqlParameter ("@end",end)};
            dt = sqlhelper.ExecuteQuery(cmdText, paras, CommandType.StoredProcedure);
            return dt;
        }

第三步：web层

<webdiyer:AspNetPager ID="ANP" runat="server" OnPageChanged="ANP_PageChanged"  PageSize="5" CssClass="ANP" CustomInfoTextAlign="Left" CurrentPageButtonPosition="Center">
            </webdiyer:AspNetPager>

 protected void Page_Load(object sender, EventArgs e)
        {

            //判断session里面是否存在管理员
            if (Session["admin"] != null && Session["admin"].ToString() == "niunan")
            {
                //已登录
                if (!Page.IsPostBack)
                {
                    //设定分页控制总的记录条数（总的记录条数/每页的记录条数Pagesize=页数）
                    ANP.RecordCount = new NewsManager().SelectAll().Rows.Count;


                    //页面第一次夹杂是，绑定类别列表
                    BindNews();
                }

            }
            else
            {

                //未登录
                Response.Redirect("login.aspx");
            }
                        if (!Page.IsPostBack )
            {
                BindNews();
            }
           }
           #region 绑定新闻列表
    private void BindNews()
        {
            repNews.DataSource = new NewsManager().SelectPage(ANP.StartRecordIndex.ToString(), ANP.EndRecordIndex.ToString());
            repNews.DataBind();
        }
        #endregion

        protected void ANP_PageChanged(object sender, EventArgs e)
        {
            BindNews();
        }

（2）假分页：

假分页主要依赖GridView控件自身来实现的

1、添加GridView控件

2、绑定数据源

protected void Page_Load(object sender, EventArgs e)
{
     if (!Page.IsPostBack)
      {
            BindNews();
      }
}

private void BindNews()
 {
  GridView1.DataSource = new NewsManager().SelectAll();     //查询所有数据并绑定
  GridView1.DataBind();
  }
protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
       GridView1.PageIndex  = e.NewPageIndex;
       BindNews();
 }