How to use ajax to delete data and view details
This time I will show you how to use ajax to delete data and view details. What are the precautions for using ajax to delete data and view details. The following is a practical case, let's take a look.
Use bootstrap, jquery and ajax to display some data, add a delete function and click to pop up the modal box details function
Home page Face 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 the 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);
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
jQuery+Ajax determines whether the entered verification code passes
Ajax cross-domain request cannot cookie
The above is the detailed content of How to use ajax to delete data and view details. 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

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

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

0.What does this article do? We propose DepthFM: a versatile and fast state-of-the-art generative monocular depth estimation model. In addition to traditional depth estimation tasks, DepthFM also demonstrates state-of-the-art capabilities in downstream tasks such as depth inpainting. DepthFM is efficient and can synthesize depth maps within a few inference steps. Let’s read about this work together ~ 1. Paper information title: DepthFM: FastMonocularDepthEstimationwithFlowMatching Author: MingGui, JohannesS.Fischer, UlrichPrestel, PingchuanMa, Dmytr

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.

The performance of JAX, promoted by Google, has surpassed that of Pytorch and TensorFlow in recent benchmark tests, ranking first in 7 indicators. And the test was not done on the TPU with the best JAX performance. Although among developers, Pytorch is still more popular than Tensorflow. But in the future, perhaps more large models will be trained and run based on the JAX platform. Models Recently, the Keras team benchmarked three backends (TensorFlow, JAX, PyTorch) with the native PyTorch implementation and Keras2 with TensorFlow. First, they select a set of mainstream

Facing lag, slow mobile data connection on iPhone? Typically, the strength of cellular internet on your phone depends on several factors such as region, cellular network type, roaming type, etc. There are some things you can do to get a faster, more reliable cellular Internet connection. Fix 1 – Force Restart iPhone Sometimes, force restarting your device just resets a lot of things, including the cellular connection. Step 1 – Just press the volume up key once and release. Next, press the Volume Down key and release it again. Step 2 – The next part of the process is to hold the button on the right side. Let the iPhone finish restarting. Enable cellular data and check network speed. Check again Fix 2 – Change data mode While 5G offers better network speeds, it works better when the signal is weaker

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.

The latest video of Tesla's robot Optimus is released, and it can already work in the factory. At normal speed, it sorts batteries (Tesla's 4680 batteries) like this: The official also released what it looks like at 20x speed - on a small "workstation", picking and picking and picking: This time it is released One of the highlights of the video is that Optimus completes this work in the factory, completely autonomously, without human intervention throughout the process. And from the perspective of Optimus, it can also pick up and place the crooked battery, focusing on automatic error correction: Regarding Optimus's hand, NVIDIA scientist Jim Fan gave a high evaluation: Optimus's hand is the world's five-fingered robot. One of the most dexterous. Its hands are not only tactile

I cry to death. The world is madly building big models. The data on the Internet is not enough. It is not enough at all. The training model looks like "The Hunger Games", and AI researchers around the world are worrying about how to feed these data voracious eaters. This problem is particularly prominent in multi-modal tasks. At a time when nothing could be done, a start-up team from the Department of Renmin University of China used its own new model to become the first in China to make "model-generated data feed itself" a reality. Moreover, it is a two-pronged approach on the understanding side and the generation side. Both sides can generate high-quality, multi-modal new data and provide data feedback to the model itself. What is a model? Awaker 1.0, a large multi-modal model that just appeared on the Zhongguancun Forum. Who is the team? Sophon engine. Founded by Gao Yizhao, a doctoral student at Renmin University’s Hillhouse School of Artificial Intelligence.

New SOTA for multimodal document understanding capabilities! Alibaba's mPLUG team released the latest open source work mPLUG-DocOwl1.5, which proposed a series of solutions to address the four major challenges of high-resolution image text recognition, general document structure understanding, instruction following, and introduction of external knowledge. Without further ado, let’s look at the effects first. One-click recognition and conversion of charts with complex structures into Markdown format: Charts of different styles are available: More detailed text recognition and positioning can also be easily handled: Detailed explanations of document understanding can also be given: You know, "Document Understanding" is currently An important scenario for the implementation of large language models. There are many products on the market to assist document reading. Some of them mainly use OCR systems for text recognition and cooperate with LLM for text processing.
