Share ajax quick deletion operation without jumping the page (beautiful style can be added)-PHP Tutorial-php.cn

Share ajax quick deletion operation without jumping the page (beautiful style can be added)

高洛峰

Release： 2023-03-06 14:38:02

Original

1231 people have browsed it

Share ajax quick page without jumpingDeleteoperation (beautiful style can be added)

The deletion we talked about before was to use embedded php code to jump to another page, thus The deletion speed is reduced, but the use of ajax we are talking about today can not only achieve quick deletion without jumping the page, but also add special effects to beautify the page.

Code, let’s do the main page first

<!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=&#39;button&#39; code=&#39;"+lie[0]+"&#39; value=&#39;删除&#39; class=&#39;sc&#39; /></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>

Copy after login

In the home page, ajax references the loading page of

<?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;

Copy after login

The effect is as shown below

分享ajax不跳转页面的快速删除操作（可添加美观样式）

Then we delete the processing page

<?php
include("../LZY.class.php");
$db = new LZY();
$code = $_POST["code"];
$sql = "delete from nation where code=&#39;{$code}&#39;";
if($db->Query($sql,0))
{
	echo "OK";
}
else
{
	echo "NO";
}

Copy after login

　分享ajax不跳转页面的快速删除操作（可添加美观样式）

Using ajax to delete is so simple. . . .

The above is the detailed content of Share ajax quick deletion operation without jumping the page (beautiful style can be added). For more information, please follow other related articles on the PHP Chinese website!