ajax删除数据（不跳转页面）

Posted 2020-09-04 小艾—21克的爱

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax删除数据（不跳转页面）相关的知识，希望对你有一定的参考价值。

以前我们讲的删除是利用嵌入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删除数据（不跳转页面）的主要内容，如果未能解决你的问题，请参考以下文章

为啥我的ajax请求返回的页面不跳转

关于form表单提交数据后不跳转页面+ajax接收返回值的处理

使用ajax+jquery+php访问mysql数据库，并且达到不跳转页面的效果。。。

javaweb利用ajax使登录窗口不跳转页面实现对账号密码的判断

jsp 如何实现提交表单但不跳转到提交页面

javaweb历史上最简单的使用Ajax判断用户名是否被注册（不跳转页面奥！）