Home > Article > Web Front-end > Ajax implements data deletion and view details functions
Ajax implements data deletion and view details functions
- 韦小宝Original
- 2018-01-01 18:26:062046browse
This article mainly introduces the functions of data deletion and viewing details through ajax, which is a good reference and value for learning ajax. Let’s follow the editor and take a look at this article about how ajax implements data deletion and view details functions.
Use bootstrap, jquery and ajax to display some data, add deletion functions and click to pop up the modal box details. Function
Main page main.php
<!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>
<link type="text/css" href="../FENGZHUANG/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" /> //引入bootstrap的css文件
<script src="../FENGZHUANG/jquery-3.1.1.min.js"></script> //先引入jquery的js文件
<script src="../FENGZHUANG/bootstrap/js/bootstrap.min.js"></script> //再引入其它的js文件
<style type="text/css">
.xq{ margin-left:30px}
</style>
</head>
<body>
<p class="page-header">
<h1>显示数据
</h1>
</p>
<table class="table table-hover">
<thead>
<tr>
<th width="30%">代号</th>
<th width="30%">名称</th>
<th width="40%">操作</th>
</tr>
</thead>
<tbody id="tb">
//用js向其中添加内容
</tbody>
</table>
<!-- 模态框（Modal） -->
<p class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<p class="modal-dialog">
<p class="modal-content">
<p class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">详细信息</h4>
</p>
<p class="modal-body" id="nr">
</p>
<p class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</p>
</p><!-- /.modal-content -->
</p><!-- /.modal -->
</p>
</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><button type='button' class='btn btn-info btn-sm sc' code='"+lie[0]+"'>删除</button><button type='button' class='btn btn-primary btn-sm xq' code='"+lie[0]+"'>查看</button></td></tr>";
}
$("#tb").html(str); //向tbody中输出内容
addshanchu();
addxiangqing();
}
});
}
//给删除按钮加事件的方法
function addshanchu()
{
//删除事件
$(".sc").click(function(){
var code = $(this).attr("code"); //获取删除按钮所在的数据的code
$.ajax({
url:"shanchu.php",
data:{code:code},
dataType:"TEXT",
type:"POST",
success: function(d){
if(d.trim()=="OK")
{
alert("删除成功");
Load(); //删除完需要加载数据
}
else
{
alert("删除失败");
}
}
});
})
}
//给查看详情加事件的方法
function addxiangqing()
{
$(".xq").click(function(){
//显示模态框
$('#myModal').modal('show');
//在模态框里面显示内容
var code = $(this).attr("code"); //获取哪一条数据
$.ajax({
url:"xiangqing.php",
data:{code:code},
dataType:"TEXT",
type:"POST",
success:function(data){
var lie = data.split("^");
var str = "<p>民族代号："+lie[0]+"</p><p>民族名称："+lie[1]+"</p>";
$("#nr").html(str);
}
});
})
}
</script>
</html>
Load data page jiazai.php
<?php
include("../FENGZHUANG/DBDA.class.php");
$db = new DBDA();
$sql = "select * from nation order by code ASC";
$arr = $db->Query($sql);
// 下面实现的字符串是类似这样的n001^汉族|n002^回族|n003^苗族
$str = "";返回主页面的数据是TEXT型，得转换一下
foreach($arr as $v)
{
$str = $str.implode("^",$v)."|"; //拼接字符串
}
$str = substr($str,0,strlen($str)-1); //去掉末尾的|字符。
echo $str;
Delete processing page shanchu.php
<?php
include("../FENGZHUANG/DBDA.class.php");
$db = new DBDA();
$code = $_POST["code"];
$sql = "delete from nation where code='{$code}'";
if($db->Query($sql,0))
{
echo "OK";
}
else
{
echo "NO";
} View details page xiangqing.php
<?php
$code = $_POST["code"];
include("../fengzhuang/DBDA.class.php");
$db = new DBDA();
$sql = "select * from nation where code='{$code}'";
echo $db->StrQuery($sql);The above is all the content of this article, I hope it will be helpful to everyone’s learning! !
Related recommendations:
In-depth understanding of the XHR object in the first article of the ajax series
JSON data storage format for Ajax interaction with users
About multiple ajax request issues
The above is the detailed content of Ajax implements data deletion and view details functions. For more information, please follow other related articles on the PHP Chinese website!