Ajax implements data deletion and view details functions
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1377
52
Is it true that you can be blocked and deleted on WeChat and permanently unable to be added?
Apr 08, 2024 am 11:41 AM
1. First of all, it is false to block and delete someone permanently and not add them permanently. If you want to add the other party after you have blocked them and deleted them, you only need the other party's consent. 2. If a user blocks someone, the other party will not be able to send messages to the user, view the user's circle of friends, or make calls with the user. 3. Blocking does not mean deleting the other party from the user's WeChat contact list. 4. If the user deletes the other party from the user's WeChat contact list after blocking them, there is no way to recover after deletion. 5. If the user wants to add the other party as a friend again, the other party needs to agree and add the user again.
Check out the steps to delete a logged-in device on Douyin
Mar 26, 2024 am 09:01 AM
1. First, click to open the Douyin app and click [Me]. 2. Click the three-dot icon in the upper right corner. 3. Click to enter [Settings]. 4. Click to open [Account and Security]. 5. Select and click [Log in to device management]. 6. Finally, click to select the device and click [Remove].
How to completely delete TikTok chat history
May 07, 2024 am 11:14 AM
1. Open the Douyin app, click [Message] at the bottom of the interface, and click the chat conversation entry that needs to be deleted. 2. Long press any chat record, click [Multiple Select], and check the chat records you want to delete. 3. Click the [Delete] button in the lower right corner and select [Confirm deletion] in the pop-up window to permanently delete these records.
How to send files to others on TikTok? How to delete files sent to others?
Mar 22, 2024 am 08:30 AM
On Douyin, users can not only share their life details and talents, but also interact with other users. In this process, sometimes we need to send files to other users, such as pictures, videos, etc. So, how to send files to others on Douyin? 1. How to send files to others on Douyin? 1. Open Douyin and enter the chat interface where you want to send files. 2. Click the "+" sign in the chat interface and select "File". 3. In the file options, you can choose to send pictures, videos, audio and other files. After selecting the file you want to send, click "Send". 4. Wait for the other party to accept your file. Once the other party accepts it, the file will be transferred successfully. 2. How to delete files sent to others on Douyin? 1. Open Douyin and enter the text you sent.
How can I retrieve someone else's deleted comment on Xiaohongshu? Will it be displayed if someone else's comment is deleted?
Mar 21, 2024 pm 10:46 PM
Xiaohongshu is a popular social e-commerce platform, and interactive comments between users are an indispensable method of communication on the platform. Occasionally, we may find that our comments have been deleted by others, which can be confusing. 1. How can I retrieve someone else’s deleted comments on Xiaohongshu? When you find that your comments have been deleted, you can first try to directly search for relevant posts or products on the platform to see if you can still find the comment. If the comment is still displayed after being deleted, it may have been deleted by the original post owner. At this time, you can try to contact the original post owner to ask the reason for deleting the comment and request to restore the comment. If a comment has been completely deleted and cannot be found on the original post, the chances of it being reinstated on the platform are relatively slim. You can try other ways
How to check your own ID on Xianyu_Introduction to how to check your personal nickname on Xianyu
Mar 22, 2024 am 08:21 AM
As a trading platform, Xianyu requires you to register and log in to your account before using it. Users can set an ID name for their account. What if they want to check what their ID is? Let’s find out together below! Introduction to how to view personal nicknames on Xianyu. First, start the Xianyu app. After entering the homepage, switch to the page of selling idle, messages, and me, and click the [My] option in the lower right corner. 2. Then on my page we need to click [Avatar] in the upper left corner; 2. Then when we go to the personal homepage page we can see different information, we need to click the [Edit Information] button here; 4. Finally click We can see it later on the page where we edit information;
PHP Practical Tip: Remove the last semicolon in your code
Mar 27, 2024 pm 02:24 PM
Practical PHP Tips: Delete the Last Semicolon in the Code When writing PHP code, you often encounter situations where you need to delete the last semicolon in the code. This may be because copy-pasting introduces extra semicolons, or to optimize code style and structure. In this article, we will introduce some methods to remove the last semicolon in PHP code and provide specific code examples. Method 1: Use the substr function The substr function can return a substring of a specified length from a string. we can
Where to check music rankings on NetEase Cloud Music_How to check music rankings on NetEase Cloud Music
Mar 25, 2024 am 11:40 AM
1. After turning on the phone, select NetEase Cloud Music. 2. After entering the homepage, you can see the [Ranking List] and click to enter. 3. In the ranking list, you can select any list and click [New Song List]. 4. Select your favorite song and click on it. 5. Return to the previous page to see more lists.
