以前我们讲的删除是利用嵌入php代码，跳转到另一个页面，从而降低了删除速度，但我们今天讲的利用ajax不仅可以达到不跳页面快速删除，并且能添加特效来美化页面。

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

上面的 AJAX 应用程序包含一个 div 和一个按钮。

div 部分用于显示来自服务器的信息。当按钮被点击时，它负责调用名为 loadXMLDoc() 的函数：

<html>

<body>

<div id="myDiv"><h3>Let AJAX change this text</h3></div>

<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>

</html>
<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="../jquery-1.11.2.min.js"></script>

</head>

<body>

<h1>显示数据</h1>

<table width="100%" border="1" cellpadding="0" cellspacing="0">

    <tr>

        <td>代号</td>

        <td>名称</td>

        <td>操作</td>

    </tr>

    <tbody id="tb">

    </tbody>

</table>

</body>

<script type="text/javascript">

//加载数据

Load();

//加载数据的方法

function Load()

{

$.ajax({

        url:"jiazai.php",

        dataType:"TEXT",

        success: function(data){

                var str = "";

                var hang = data.split("|");

                for(var i=0;i<hang.length;i++)

                {

                    var lie = hang[i].split("^");

                    str = str+"<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td><input type='button' code='"+lie[0]+"' value='删除' class='sc' /></td></tr>";

                }

                $("#tb").html(str);

                //删除事件

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

                    var code = $(this).attr("code");

                    $.ajax({

                        url:"shanchu.php",

                        data:{code:code},

                        dataType:"TEXT",

                        type:"POST",

                        success: function(d){

                            if(d.trim()=="OK")

                            {

                                alert("删除成功");

                                Load();

                            }

                            else

                            {

                                alert("删除失败");

                            }

                        }

                        });

                    })

            }

    });

}

</script>

</html>

主页中，ajax引用的加载页面

<?php

include("../LZY.class.php");

$db = new LZY();

$sql = "select * from nation";

$arr = $db->Query($sql);

$str = "";

foreach($arr as $v)

{

    $str = $str.implode("^",$v)."|";

}

$str = substr($str,0,strlen($str)-1);

echo $str;

效果如下图

接着我们删除处理页面

<?php

include("../LZY.class.php");

$db = new LZY();

$code = $_POST["code"];

$sql = "delete from nation where code='{$code}'";

if($db->Query($sql,0))

{

    echo "OK";

}

else

{

    echo "NO";

}

利用ajax做删除页面就是这么简单。

ajax删除数据（不跳转页面）的更多相关文章

  1. 一般删除网页数据和jquery下使用Ajax删除数据的区别

    1. 一般删除网页数据 就是指用户在点击删除的时候,会跳转到DeleteUser.ashx一般处理程序中,并且通过get传参的方式传递一个id的参数,然后在后台处理 <a href='Delet ...

  2. MVC使用jQuery.ajax()删除数据

    jQuery.ajax()可以简写为$.ajax().以前有写过MVC删除的实现,如<MVC实现删除数据库记录> http://www.cnblogs.com/insus/p/336804 ...

  3. ajax删除数据后刷新页面

    代码如图: 理解: 发送请求后删除name 属性为 name 的data;用rem .remove删除: 删除后找到页面上app的数量:定义page = len/12+1; 找到当前页是哪一页,如果l ...

  4. ASP.NET中POST提交数据并跳转页面

    需求:先Post提交数据,然后跳转到目标页面 找了好久才发现这个神奇的类HttpHelper.原理很简单,利用html的from表单拼接,然后执行 使用方法: NameValueCollection ...

  5. ASP.NET中POST数据并跳转页面

    需求:先Post提交数据,然后跳转到目标页面 找了好久才发现这个神奇的类HttpHelper.原理很简单,利用html的from表单拼接,然后执行 使用方法: NameValueCollection ...

  6. ajax 删除数据无刷新

    //html页面 <!doctype html><head> <title></title> <meta http-equiv="Con ...

  7. ASP.NET 中 POST 数据并跳转页面(译自 Redirect and POST in ASP.NET)

    本文翻译自 Samer Abu Rabie 的 <Redirect and POST in ASP.NET> 简介        在实际项目中,我们会遇到这样一种应用场景:我们需要与第三方 ...

  8. AJAX 删除数据

    var json = { "id":"12", "name":"admin"}$.ajax({ type: " ...

  9. ajax提交session超时跳转页面使用全局的方法来处理

    来自:http://www.jb51.net/article/43770.htm 如果是ajax提交,超时时从服务器发出的跳转命令就不会起作用,所以如果是session超时,而且是在ajax请求,就在 ...

随机推荐

  1. The MySQL server is running with the --skip-grant-tables option so it cannot execute this statement

    skip-grant-tables下 GRANT ALL PRIVILEGES ON *.* TO helei IDENTIFIED BY 'MANAGER' WITH GRANT OPTION; 执 ...

  2. WMWARE下/sbin/scsi_id 返回值为空

    [root@HE1 ~]# /sbin/scsi_id -g -u /dev/sdb 第一种是从VMWARE层面去解决,用文本编辑器修改vmx文件,在vmx文件中任意位置(通常在最后)添加如下行: d ...

  3. Nancy简单实战之NancyMusicStore(四)：实现购物车

    前言 上一篇,我们完成了商品的详情和商品的管理,这一篇我们来完成最后的一个购物车功能. 购物车,不外乎这几个功能:添加商品到购物车,删除购物车中的商品,对购物车中的商品进行结算. MVC MusicS ...

  4. 数据结构实习-迷宫（基于Qt实现）

    预览效果: Maze.pro文件 #------------------------------------------------- # # Project created by QtCreator ...

  5. 【python基础】 Tkinter 之 几何管理器

    Tkinter支持三种几何管理器:网格管理器,包管理器,位置管理器 提示:由于每个管理器都有自己放置小构件的风格,最好不要在同一个容器中的小构件使用多个管理器.可以使用框架作为子容器以获取期望的布局. ...

  6. Fourier分析基础（二）——由级数导出连续Fourier变换

    此处推导参考(照抄) A First Course in Wavelets with Fourier Analysis Second Edition, Albert Boggess& Fran ...

  7. [转载] A successful Git branching model/GIT分支管理是一门艺术

    转载自:http://www.cnblogs.com/baiyw/p/3303125.html 英文原文:http://www.nvie.com/posts/a-successful-git-bran ...

  8. 学习计划——巩固基础+进阶练习

    时间:2016/3/23---24 内容:如何用CSS进行网页布局  课程复习 目标:完成一个demo+完成一篇学习心得博客 时间:2016/3/25---26 内容:网页布局基础  课程复习 目标: ...

  9. Linux实战教学笔记12:linux三剑客之sed命令精讲

    第十二节 linux三剑客之sed命令精讲 标签(空格分隔): Linux实战教学笔记-陈思齐 ---更多资料点我查看 1,前言 我们都知道,在Linux中一切皆文件,比如配置文件,日志文件,启动文件 ...

  10. Javascript前端面试题

    在网上看到了一些Javascript的面试题就整理了下来,后续看到再继续补充. 面试题按类型来分,主要涉及到"技术"与"非技术"两大类,技术类别下涉及到的子类别 ...