`

jQuery ajax删除

阅读更多

jQuery ajax删除

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>jQuery学习-ajax删除</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
        h1{color:Green;}
        body{ background-color:#EEEEEE ; }
        .list{
                background:#EEEEEE none repeat scroll 0 0;
                border-top:1px solid #CCCCCC;
                padding:5px 10px;
                width:300px;
             }
        .del{
                color:Blue;
                display:block;
                float:right;
                width:35px;
            }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".del").click(function() {
                var $p = $(this).parent();
                var $this = $(this);
                $.ajax({
                    type: "post",
                    url: "http://hyipaying.com/demo/2010/10/delete.aspx",
                    //得到id
                    data: { id: $this.attr("id").replace('del-', '') },
                    beforeSend: function() {
                        //发送请求前改变背景色
                        $p.css("backgroundColor", "#FB6C6C");
                    },
                    success: function() {
                        //删除成功
                        $p.slideUp(300, function() {
                            //移除父级div
                            $p.remove();
                        });
                    }
                });
		//阻止浏览器默认事件
		return false;
            });
        });
       
    </script>
</head>
<body>
    <div>
 
        <h1>jQuery ajax删除</h1>
        <div class="list">
            <a id="del-1" class="del" href="#">删除</a>
            <strong>jQuery学习,jQuery框架学习</strong>
        </div>
            <div class="list">
            <a id="del-2" class="del" href="#">删除</a>
            <strong>jQuery学习,jQuery框架学习</strong>
        </div>
        <div class="list">
            <a id="del-3" class="del" href="#">删除</a>
            <strong>jQuery学习,jQuery框架学习</strong>
        </div>
        <div class="list">
            <a id="del-4" class="del" href="#">删除</a>
            <strong>jQuery学习,jQuery框架学习</strong>
        </div>
        <div class="list">
            <a id="del-5" class="del" href="#">删除</a>
            <strong>jQuery学习,jQuery框架学习</strong>
        </div>
    
    </div>
</body>
</html>
"
 
分享到:
评论

相关推荐

    asp+jquery ajax实例源码,添加,删除,修改,分页

    综上所述,这个"asp+jquery ajax实例源码"展示了如何利用ASP作为服务器端语言处理数据,结合jQuery的AJAX功能,实现无刷新的交互体验,优化用户在添加、删除、修改和分页操作中的浏览感受。通过学习和理解这个实例,...

    Struts2+jQuery ajax的一个商品小系统

    在这个商品系统中,可能使用jQuery的Ajax功能来实现商品的添加、删除或更新,这些操作在后台处理后,只更新部分页面内容,提高用户体验。 商品系统的实现可能包括以下关键组件: 1. **数据库模型**:定义商品实体...

    Jquery Ajax动态增删改查

    在Web开发中,jQuery AJAX是实现页面数据动态更新的关键技术,尤其在构建交互性强的Web应用时不可或缺。AJAX(Asynchronous JavaScript and XML)允许在不刷新整个页面的情况下与服务器交换数据并局部更新页面,提高...

    jquery、ajax学习电子书.zip

    《jQuery与Ajax学习指南》是一本专为初学者和有一定JavaScript基础的开发者设计的电子书,旨在帮助读者深入理解和熟练掌握这两个在实际Web开发中不可或缺的技术。jQuery是一个强大的JavaScript库,它极大地简化了DOM...

    jQuery AJAX表格控件源码

    它利用jQuery库的强大功能,结合AJAX技术,实现在不刷新整个页面的情况下进行数据的加载、编辑和删除,提升用户体验。本文将深入探讨这个初版的jQuery AJAX表格控件的源码,分析其核心功能和设计思路。 首先,我们...

    Jquery和ajax结合使用的小例子

    **jQuery和Ajax结合使用是Web开发中的常见技术组合,它能帮助开发者实现页面无刷新的数据交互,提升用户体验。Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下更新部分网页内容的技术...

    利用jquery以及ajax实现树结构

    本教程将探讨如何利用jQuery和AJAX技术来实现这样的树形结构,并且这个项目可以直接在MyEclipse环境中运行。 首先,我们需要理解jQuery和AJAX的基本概念。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、...

    jQuery Ajax 全解析.pdf

    通过使用jQuery,开发者可以轻松地实现DOM元素的选择、创建、更新和删除等功能,同时还能方便地处理各种事件,如点击、滑动等。 #### 三、Ajax简介 Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载...

    jQuery AJAX表格控件(初版)源码

    在这个控件中,jQuery和AJAX的结合用于实现表格数据的动态加载、编辑和删除,使得用户可以无需刷新页面就能进行操作。 该控件的核心功能包括: 1. 数据获取:通过AJAX请求从服务器获取表格数据,通常使用GET或POST...

    jquery 的ajax用法

    **jQuery的Ajax用法详解** 在Web开发中,Ajax(Asynchronous JavaScript and XML)技术允许我们在不刷新整个页面的情况下与服务器进行数据交互,极大地提升了用户体验。jQuery库简化了JavaScript中的Ajax操作,使得...

    Ajax和Jquery

    **Ajax和jQuery** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新。这种方式可以让网页保持交互...

    jquery+AJAX小小项目

    **jQuery + AJAX 小型项目详解** 在Web开发中,jQuery和AJAX是两种非常重要的技术,它们使得前端与后端的数据交互变得更加便捷和高效。本项目主要展示了如何利用jQuery库来实现AJAX的增删改查功能,帮助开发者更好...

    jquery ajax无刷新技术

    **jQuery AJAX 无刷新技术详解** 在Web开发中,AJAX(Asynchronous JavaScript and XML)是一种创建动态网页的技术,允许在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容。jQuery库使得AJAX操作...

    JQuery DoM和ajax 操作

    1. **$.ajax()**: 这是jQuery中最全面的AJAX函数,允许我们自定义请求的所有参数,如URL、类型(GET或POST)、数据、回调函数等。 2. **$.get()** 和 **$.post()**: 这两个简化版的函数分别用于GET和POST请求,适合...

    JQuery AJAX目录浏览与编辑的实现.rar

    在IT领域,jQuery和AJAX是两个非常关键的技术,它们在构建动态、交互性强的Web应用程序中发挥着重要作用。这个“JQuery AJAX目录浏览与编辑的实现”压缩包文件很显然是一个教学资源或者代码示例,它展示了如何利用...

    jQuery ajax态删除评论功能.rar

    jQuery ajax态删除评论功能,配合动态的ASP/PHP程序,即可完成真正的留言删除功能,这里只是模拟了前端的ajax功能,这里只是把评论所在Div给隐藏了,那么jquery如何隐藏的呢?请下载这个例子一看究竟.

    jquery Ajax

    **jQuery AJAX** 是一个强大的JavaScript库,用于在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。这个技术在现代网页开发中扮演着至关重要的角色,极大地提升了用户体验。通过AJAX,我们可以实现异步...

    ajax 插入记录,删除记录,修改记录

    在这个主题中,我们将深入探讨如何使用Ajax进行记录的插入、删除和修改操作。 **1. Ajax的基本原理** Ajax的核心是JavaScript对象XMLHttpRequest,它允许在后台与服务器进行通信。通过创建一个XMLHttpRequest实例,...

    jQuery之ajax删除详解

    **jQuery的Ajax删除详解** Ajax(Asynchronous JavaScript and XML)技术允许前端与后端进行异步通信,无需刷新整个页面,实现局部数据更新。在jQuery中,使用Ajax接口可以极大地简化这一过程。本文将深入讲解如何...

    一个页面实现Ajax效果的增删改查-JQuery+Json版

    本项目"一个页面实现Ajax效果的增删改查-JQuery+Json版"正是利用了这一技术,结合jQuery库和JSON数据格式,为用户提供了一个在一个页面上完成数据增、删、改、查功能的示例。 **jQuery** 是一个轻量级的JavaScript...

Global site tag (gtag.js) - Google Analytics