开发者社区> 杰克.陈> 正文

使用Jquery的Ajax实现无刷新更新,修改,删除页面

简介: 原文:使用Jquery的Ajax实现无刷新更新,修改,删除页面   本文将向大家讲述一下最近工作的一些总结,主要包括了以下内容,注册界面以及详细信息界面的编辑。主要是介绍了AJAX技术,因为我觉得其他方面没什么好介绍的。
+关注继续查看
原文:使用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()就行了。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
蓝色主机删除临时页面教程
对于大多数新手站长而言,购买主机后,在使用的过程中或多或少会遇到一些技术上的问题,例如不知如何删除临时页面,关于此问题,接下来BueHost主机指南为大家详细介绍BueHost主机如何删除临时页面,具体操作步骤如下:
375 0
ajaxfileupload.js插件结合一般处理文件实现Ajax无刷新上传
先上几张图更直观展示一下要实现的功能,本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPOI2.0实现数据读取。
1118 0
使用selenium实现前程无忧简历自动刷新
image.png 使用过前程无忧,智联招聘等这些招聘网站的都知道,网站都会有一个简历刷新功能,hr那边检索简历都时候网站会根据求职者简历的刷新时间来进行排序,所以如果你想要你的简历排在前列,让hr一眼看见的话,那就勤刷新,隔段时间刷新一次,或者花钱购买网站提供的增值服务,帮你置顶。
1936 0
+关注
杰克.陈
一个安静的程序猿~
10427
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载