Partagez l'opération de suppression rapide ajax sans sauter la page (un beau style peut être ajouté)-tutoriel php-php.cn

Partagez l'opération de suppression rapide ajax sans sauter la page (un beau style peut être ajouté)

高洛峰

Libérer： 2023-03-06 14:38:02

original

1181 Les gens l'ont consulté

Partager l'opération rapide de suppression d'une page sans ajax (peut ajouter de beaux styles)

La suppression dont nous avons parlé auparavant consistait à utiliser le code php intégré pour passer à une autre page, Ainsi, la vitesse de suppression est réduite, mais l'utilisation d'ajax dont nous parlons aujourd'hui permet non seulement d'obtenir une suppression rapide sans sauter de page, mais également d'ajouter des effets spéciaux pour embellir la page.

Code, faisons d'abord la page principale

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

Copier après la connexion

Dans la page d'accueil, ajax fait référence à la page de chargement de

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

Copier après la connexion

L'effet est comme indiqué ci-dessous

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

Ensuite, nous supprimons la page de traitement

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

Copier après la connexion

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