Ajax implementation with jquery No refresh update, modify, delete page

Original: Ajax implementation with jquery No refresh update, modify, delete page

This article will tell you some of the recent work summary, including the following, the registration interface and the details of the editing interface. Mainly introduces the Ajax technology, because I think other aspects of nothing good to introduce. The first is to tell you the advantages of Ajax, if you delete the content of a page, you want to click on a button, then this page must have a postback event, that is, your page must be refreshed once. Below is I from the Internet to find an AJAX schematic diagram, I PS technology is too poor, so simply from the Internet to find out.

In fact, my personal understanding of Ajax technology is not as complex as above, I think Ajax is the first to send a GET or POST request to a special processing AJAX data Access Layer page, This page then Response.wiret useful data back to the page where you want to modify the data, which is simple. As in the following code, written in jquery. First send a request to a dedicated page, with the ID value (of course, according to the specific business needs to decide), and then in this refreshimage page respon.write query data, and then populate the corresponding Div.

Put Refreshimg is a refreshed page, I put the code out, in fact, very simple. is the return string.

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); The output, equivalent to the query operation again, uses the following Showimages method} private String Showimages (string images) {cs. Common.Web.BasePage BP = new CS.        Common.Web.BasePage ();        All string sqlcid = "SELECT * from T_sys_userupload where id= '" + Images + "'" is detected first; 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 ><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 () + "') \" ></a></div></li            > ";    }} return S; }}

The only thing to note is that there can be no data in the ASPX page, only the first line, otherwise it will output other irrelevant things. Such as:

The above is just an example, the specific deletion, update, or insert is a pattern, there is a point to note that if you use the deletion, modify the Ajax, then when the first time the page loaded DOM will be invalid. For example, if you delete a picture, and then modify the other images, then it will not be useful, the only way is to re-load the DOM, such as the Onhover method.

Here is the code for Onhover, which re-applies the DOM tree.

    //move the mouse over the display border    functionOnhover () {////mouse slide over$ (". Imgborder"). Hover (function () {            $( This). attr ("style", "border:2px solid Red")        }); //Mouse Slide Out$ (". Imgborder"). Mouseout (function () {            $( This). attr ("style", "border:0px solid Red")        }); $(". Imgborder"). Click (function () {            $("#<%=hid_product.clientid%>"). Val ($ ( This). attr ("id"));//assigning IDs to hidden fields            //Alert ($ ("#<%=hid_product.clientid%>"). Val ());window.open ("productdetails.aspx?id=" + $ ( This). attr ("id"), "Product Modification Interface", ' 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 ");        }); }

Specific changes and deletions I will not be more cumbersome, is to change a SQL question.

Also to add the last point, if the pop-up window wants to call the parent window method, use Window.opener.xxx () is OK, of course, if your window is opened in window.open way.

The above method is used if you want to refresh the contents of the parent window by refreshing the popup window.

In addition, you may also encounter a small bug, that is, after the deletion of the operation, even if the page is not refreshed, the page will return to the top, in fact, this problem is very simple, as long as the end of the JS method plus a return false on the line. Then this method OnClientClick return xxx () on the line.

Ajax implementation with jquery No refresh update, modify, delete page