So verwenden Sie Ajax zum Löschen von Daten und zum Anzeigen von Details-js-Tutorial-php.cn

So verwenden Sie Ajax zum Löschen von Daten und zum Anzeigen von Details

php中世界最好的语言

Freigeben： 2018-04-02 10:37:03

Original

3152 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie Ajax zum Löschen von Daten und zum Anzeigen von Details verwenden. Was sind die Vorsichtsmaßnahmen für die Verwendung von Ajax zum Löschen von Daten und zum Anzeigen von Details? sehen.

Verwenden Sie Bootstrap, JQuery und Ajax, um einige Daten anzuzeigen, fügen Sie eine Löschfunktion hinzu und klicken Sie, um die Detailfunktion für das Modalfeld aufzurufen

Homepage 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=&#39;button&#39; class=&#39;btn btn-info btn-sm sc&#39; code=&#39;"+lie[0]+"&#39;>删除</button><button type=&#39;button&#39; class=&#39;btn btn-primary btn-sm xq&#39; code=&#39;"+lie[0]+"&#39;>查看</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>

Nach dem Login kopieren

Datenseite jiazai.php laden

<?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;

Nach dem Login kopieren

Verarbeitungsseite shanchu.php löschen

<?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";
}

Nach dem Login kopieren

Sehen Sie sich die Detailseite xiangqing.php an

<?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);

Nach dem Login kopieren

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben Informationen, bitte achten Sie auf andere chinesische PHP-Websites Verwandte Artikel!

Empfohlene Lektüre:

jQuery+Ajax ermittelt, ob der eingegebene Bestätigungscode erfolgreich ist

Eine domänenübergreifende Ajax-Anfrage kann kein Cookie erstellen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Ajax zum Löschen von Daten und zum Anzeigen von Details. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!