您的位置：首页 > Web前端 > JQuery

Ajax：后台jquery实现ajax无刷新删除数据及demo

2016-03-29 20:59 831 查看
　　


　　上图是后台管理的新闻展示页面，现在删除数据的时候会整个页面刷新一遍，感觉很不友好，理想状态是点击右侧的删除，局部刷新删除这条数据即可。网上这方面的资料还是不多，所以写一篇总结。

　　那么问题来了，局部刷新技术是ajax，用jquery实现ajax更加方便有效，所以先决定使用jquery+ajax完成（最后会介绍一下js的ajax原理）。

　　1）修改删除功能的a链接，修改为<a class='del {$row['id']}' num='{$row['id']}' href='javascript:'>删除</a>，代码如下

php页面如下

<?php
foreach($pdo->query($sqlNews) as $row){

echo "<tr id='tr{$row['id']}'>";
echo "<td>{$row['id']}</td>";
echo "<td>{$row['title']}</td>";

echo "<td>{$row['abstract']}</td>";
echo "<td>{$row['level1']}</td>";
echo "<td>{$row['level2']}</td>";
echo "<td>{$row['level3']}</td>";

if($row['shelf']){
echo "<td>上墙</td>";
}else{
echo "<td>下墙</td>";
}

echo "<td>".date('Y-m-d',$row['regtime'])."</td>";
echo "<td><a href='edit.php?id={$row['id']}'>修改</a></td>";
// echo "<td><a href='delete.php?id={$row['id']}&image={$row['imgsrc']}'>删除</a></td>";
echo "<td><a class='del {$row['id']}' num='{$row['id']}' href='javascript:'>删除</a></td>";
echo "</tr>";
}


　　2)Jquery点击事件响应删除的a链接，具体代码如下

jquery代码如下：

<script type="text/javascript">

$(function(){
//按钮单击时执行
$(".del").click(function(){
num =$(this).attr('num');
htmlobj=$.ajax({url:"delete.php?id="+num,async:false});
if (htmlobj.responseText=="success") {
$("#tr"+num).hide();
}
});
});
</script>


　　3）后台响应的代码如下

<?php

$id=$_GET['id'];
$sqlNews="delete from news where id={$id}";
if($pdo->exec($sqlNews)){
echo "success";
}else{
echo "failed";
}
?>


　　下面单独介绍一下jquery+ajax 和 js+ajax的小demo

　　1）jquery+ajax 的小demo

<!DOCTYPE html>
<html>
<head>
<meta charset='utf8'>
<script src="jquery.min.js" />

<script>

$(document).ready(function(){
})
</script>

</head>

<body>

<h3 id="test">请点击下面的按钮，通过 jQuery AJAX 改变这段文本。</h3>
<button id="btn1" type="button">获得外部的内容</button>

</body>

<script type="text/javascript">

$(function(){
//按钮单击时执行
$("#btn1").click(function(){

//取Ajax返回结果
//为了简单，这里简单地从文件中读取内容作为返回数据
htmlobj=$.ajax({url:"a.txt",async:false});
//显示Ajax返回结果
$("#test").html(htmlobj.responseText);
});
});
</script>
</html>


　　2）js+ajax的小demo

<html>
<head>
<meta charset = 'utf-8'>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
var txt,x,i;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("title");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;
}
}
xmlhttp.open("GET","books.xml",true);
xmlhttp.send();
}
</script>
</head>

<body>

<h2>My Book Collection:</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">获得我的图书收藏列表</button>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航