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

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<meta>
<title>无标题文档</title>
<link> //引入bootstrap的css文件
<script></script> //先引入jquery的js文件
<script></script> //再引入其它的js文件
<style>
.xq{ margin-left:30px}
</style>


<p>
 </p><h1>显示数据
 </h1>

                 //用js向其中添加内容  

代号	名称	操作

 

 

  

  ×   

详细信息

     

  

  

  关闭   

    <script> //加载数据 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>"+lie[1]+"<td><button type=&#39;button&#39; class=&#39;btn btn-info btn-sm sc&#39; code=&#39;"+lie[0]+"&#39;>删除<button type=&#39;button&#39; class=&#39;btn btn-primary btn-sm xq&#39; code=&#39;"+lie[0]+"&#39;>查看"; } $("#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(){ //显示模态框 $(&#39;#myModal&#39;).modal(&#39;show&#39;); //在模态框里面显示内容 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>民族名称："+lie[1]+""; $("#nr").html(str); } }); }) } </script>

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=&#39;{$code}&#39;";
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=&#39;{$code}&#39;";
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!