<div class=del><a href = 'del.php?id=260&username=jason'>删除</a></div>
<div class=del><a href = 'del.php?id=259&username=jason'>删除</a></div>
更改成
<div class=del><a href = 'javascript:' userid="261" username="jason">删除</a></div><div class=del><a href = 'javascript:' userid="260" username="jason">删除</a></div>
<div class=del><a href = 'javascript:' userid="259" username="jason">删除</a></div>
<script>
$(function(){
$(".del a").click(function(){
var userid = $(this).attr('userid')
var username= $(this).attr('username')
$.ajax({
type: "GET",
url: "del.php",
data: {id:userid , username:username},
dataType: "json",
success: function(data){
if(data.status){ //如果成功
$(this).parent().remove()
}
}
})
})
})
</script>
每个元素单击时可以触发一个事件，发送一个ajax请求，从服务端把这条数据删除，如果删除成功，在客户端再把这个dom节点删掉。
<div class=del><a href = 'del.php?id=261&username=jason'>删除</a></div><div class=del><a href = 'del.php?id=260&username=jason'>删除</a></div>
<div class=del><a href = 'del.php?id=259&username=jason'>删除</a></div> // 这里使用 jQuery
// 绑定单击事件
$('div').click(function() {
// 获取删除的URL
const url = $(this).attr('href')
$.ajax({
url: url,
data: {},
type: 'POST',
dataType: 'JSON',
success: function(r) {
if (!r.state) return alert('删除异常')
alert('已删除')
return $(this).remove() // 删除成功，移除dom节点。
},
error: function() {
return alert('网络异常')
}
})
}) // 服务端可以这样写。
$id = $_GET['id']
$sql = 'DELETE FROM tablename WHERE id = ' . $id // 组装你的SQL语句。
根据结果返回相应的JSON
return json_encode(['state' => true, 'text' => '删除成功'])
第一种方法，在你的代码基础上：1、假设左边tree的html结构：
<ul id="tree">
<li><a href="javascript:void(0)" link="format.html">课表查询</a></li>
<li><a href="javascript:void(0)" link="1.html">信息修改</a></li>
</ul>
//注意以上a元素的link属性代表中间将要显示的页面的名称,根据需要自行修改
2、引入jquery库，在head之间添加如下代码：
$(function(){
var $tree_a = $("#tree").find("a")//获取tree中的a元素集合
var $main = $("#main")//获取中间部分元素
$tree_a.on("click", function(){
$main.empty()//初始化
var $frame =$("<iframe></iframe>")//定义框架对象
var $this = $(this)//当前被点击的tree的a
$frame.attr({//设置中间部分框架的属性
"src": $this.attr("link"),//框架引入的页面地址
"name": "main_frame",//框架名称
"width": $main.width() || "100%",//框架宽度
"height": $main.height() || "100%",//框架高度
"frameborder": "0",//框架边框
"scrolling": "auto"//框架滚动条设置
})
$frame.appendTo($main)//将框架插入到中间部分
})
})
第二种方法，改变你的代码结构：
1、修改html结构，将中间部分更改为iframe
将
<div id="main" style="width:82%background:yellowheight:500pxfloat:left">中间</div>
</div>
这段代码修改为
<ifame name="main" src="" id="main" frameborder="0" width="82%" height="500px" scrolling="auto"></iframe>
2、修改左侧tree的a元素
<a target="main" href="...">课表查询</a>
......
有问题请留言
