使用Jquery的Ajax實現無刷新更新，修改，刪除頁面

　　本文將向大家講述一下最近工作的一些總結，主要包括了以下內容，注冊界面以及詳細信息界面的編輯。主要是介紹了AJAX技術，因為我覺得其他方面沒什么好介紹的。首先是跟大家說一下Ajax的優點，假如你刪除了一個頁面的內容，你想當於點擊了一個按鈕，那么這個頁面必然發生了回發事件，也就是說，你的頁面必然被刷新了一次。以下是我從網上找來的一張Ajax的原理圖，本人PS技術太差了，所以索性從網上找算了。

　　其實我個人對於Ajax技術的理解並沒有上面圖那么復雜，我覺得Ajax就是首先發一個get或者post的請求給一個專門處理ajax數據訪問層的頁面，然后這個頁面再Response.wiret有用的數據回傳給要修改數據的頁面，就這么簡單。如下面的代碼，用jquery寫的。先發一個請求給一個專門的頁面，帶上ID值（當然這個根據具體的業務需求來定），然后在這個RefreshImage頁面Respon.write查詢出來的數據，然后再填充到相對應的DIV當中去。

 

 

置於RefreshImg是一個刷新的頁面，我把代碼放出來，其實很簡單。就是返回字符串。

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
public partial class register_RefreshImg : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

            string images = ShowImages(Request["idw"]);

            Response.Write(images); //輸出，相當於再次進行查詢操作，使用了下面的showImages方法


    }

    private string ShowImages(string images)
    {
        cs.Common.Web.BasePage bp = new cs.Common.Web.BasePage();
        //先查出CID對應的所有
        string sqlCid = "select * from t_sys_userupload where id='" + images + "'";
        DataSet setCid = bp.DataManager.Fill(sqlCid);
        string cid="";
        foreach (DataRow Row in setCid.Tables[0].Rows)
        {
            cid = Row["cid"].ToString();
            break;
        }

        string sql1 = "select * from t_sys_userupload where cid='" + cid + "'";
        DataSet ds1 = bp.DataManager.Fill(sql1);
        string s = "";
        if (ds1 != null && ds1.Tables.Count > 0 && ds1.Tables[0].Rows.Count > 0)
        {
            foreach (DataRow dr in ds1.Tables[0].Rows)
            {
                s += "<li ><img class='imgBorder' id='" + dr["id"].ToString() + "' src='" + dr["imageurl"].ToString() + "' border='0' /><a href='#'>" + (dr["title"].ToString().Length > 10 ? dr["title"].ToString().Substring(0, 7) + "..." : dr["title"].ToString()) + "</a><div style='right:1.5px;top:5px;'><a href='#' onclick=\"return deletes('" + dr["id"].ToString() + "')\"><img src=\"images/hide2.png\" width=\"20\" height=\"20\"></a></div></li>";
            }
        }
        return s;
    }
}

　　唯一需要注意的就是aspx頁面里不能有任何數據，只能有第一行，否則就會輸出其他的無關的東西。如下圖：

上面的只是一個示例而已，具體的刪除，更新，或者插入都是一個模式，還有一點需要注意，如果你使用了刪除，修改的AJAX的話，那么當頁面第一次載入時候的DOM將會無效。比如你刪除了一個圖片，然后向再修改其他圖片的話，那么就不會有用，唯一的辦法就是重新載入DOM，如下圖的onHover方法就是。

下面是OnHover的代碼，重新應用了DOM樹。

    //鼠標移上去展示邊框
    function onHover()
    {
        ////鼠標滑過
        $(".imgBorder").hover(function () {
            $(this).attr("style", "border:2px solid red")
        });

        //鼠標滑出
        $(".imgBorder").mouseout(function () {

            $(this).attr("style", "border:0px solid red")
        });

        $(".imgBorder").click(function () {



            $("#<%=hid_Product.ClientID%>").val($(this).attr("id")); //把ID賦入隱藏域
            //alert($("#<%=hid_Product.ClientID%>").val());
            window.open("ProductDetails.aspx?id=" + $(this).attr("id"), "產品修改界面", 'height=300,width=500,top=200,left=200,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no');
            //window.showModalDialog("ProductDetails.aspx?id=" + $(this).attr("id"),"", "dialogWidth=500px;dialogHeight=200px");
        });

    }

具體的修改和刪除我就不多累贅了，就是改一句SQL的問題。

還給大家補充最后一點，如果彈出窗口想要調用父窗口的方法，就用window.opener.xxx()就OK了，當然前提是你的窗口是用window.open方式打開的。

因為假如你想在彈出窗實現刷新彈出窗修改內容刷新父窗口內容，就要用到上述方法。

另外大家可能還會碰到一個小BUG，就是刪除操作以后，就算是不刷新頁面，頁面也會回到頂部，其實這個問題很簡單，只要在JS方法的最后加上一句return false就行了。然后這個方法onclientclick的時候return xxx()就行了。