Heim Web-Frontend js-Tutorial Ajax implementiert Funktionen zum Löschen von Daten und zum Anzeigen von Details

Ajax implementiert Funktionen zum Löschen von Daten und zum Anzeigen von Details

Jan 01, 2018 pm 06:26 PM
ajax 删除 查看

In diesem Artikel werden hauptsächlich die Funktionen zum Löschen von Daten und zum Anzeigen von Details über Ajax vorgestellt. Dies ist eine gute Referenz und ein guter Wert für das Erlernen von Ajax. Folgen wir dem Editor und werfen wir einen Blick auf die Funktionen von Ajax zum Löschen von Daten und zum Anzeigen von Details. Verwenden Sie Bootstrap, JQuery und Ajax, um einige Daten anzuzeigen, fügen Sie die Löschfunktion hinzu und klicken Sie, um sie anzuzeigen Modalbox-Details. Funktion

Hauptseite 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(){
 //显示模态框
 $(&#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><p>民族名称:"+lie[1]+"</p>";
  $("#nr").html(str);
  }
 });
 })
}
</script>
</html>
Nach dem Login kopieren

Seite Ladedaten 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;
Nach dem Login kopieren

Verarbeitungsseite löschen 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";
}
Nach dem Login kopieren

Sehen Sie sich die Detailseite xiangqing.php an

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er wird hilfreich sein zum Lernen aller! !

<?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
Verwandte Empfehlungen:

Detailliertes Verständnis des XHR-Objekts im ersten Artikel der Ajax-Reihe

JSON-Datenspeicherformat für die Ajax-Interaktion mit Benutzern

Über mehrere Ajax-Anfrageprobleme

Das obige ist der detaillierte Inhalt vonAjax implementiert Funktionen 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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Stimmt es, dass Sie auf WeChat blockiert und gelöscht werden können und dauerhaft nicht hinzugefügt werden können? Stimmt es, dass Sie auf WeChat blockiert und gelöscht werden können und dauerhaft nicht hinzugefügt werden können? Apr 08, 2024 am 11:41 AM

1. Zunächst einmal ist es falsch, jemanden dauerhaft zu blockieren und zu löschen und ihn nicht dauerhaft hinzuzufügen. Wenn Sie die andere Partei hinzufügen möchten, nachdem Sie sie blockiert und gelöscht haben, benötigen Sie lediglich die Zustimmung der anderen Partei. 2. Wenn ein Benutzer jemanden blockiert, kann die andere Partei keine Nachrichten an den Benutzer senden, den Freundeskreis des Benutzers anzeigen oder mit dem Benutzer telefonieren. 3. Das Blockieren bedeutet nicht, dass die andere Partei aus der WeChat-Kontaktliste des Benutzers gelöscht wird. 4. Wenn der Benutzer den anderen Teilnehmer aus der WeChat-Kontaktliste des Benutzers löscht, nachdem er ihn blockiert hat, gibt es nach dem Löschen keine Möglichkeit, ihn wiederherzustellen. 5. Wenn der Benutzer die andere Partei erneut als Freund hinzufügen möchte, muss die andere Partei zustimmen und den Benutzer erneut hinzufügen.

Sehen Sie sich die Schritte zum Löschen eines angemeldeten Geräts auf Douyin an Sehen Sie sich die Schritte zum Löschen eines angemeldeten Geräts auf Douyin an Mar 26, 2024 am 09:01 AM

1. Öffnen Sie zunächst die Douyin-App und klicken Sie auf [Ich]. 2. Klicken Sie auf das Dreipunktsymbol in der oberen rechten Ecke. 3. Klicken Sie, um [Einstellungen] aufzurufen. 4. Klicken Sie, um [Konto und Sicherheit] zu öffnen. 5. Wählen Sie [Bei der Geräteverwaltung anmelden] aus und klicken Sie darauf. 6. Klicken Sie abschließend auf das Gerät, um es auszuwählen, und klicken Sie auf [Entfernen].

So löschen Sie den TikTok-Chatverlauf vollständig So löschen Sie den TikTok-Chatverlauf vollständig May 07, 2024 am 11:14 AM

1. Öffnen Sie die Douyin-App, klicken Sie unten in der Benutzeroberfläche auf [Nachricht] und dann auf den Chat-Konversationseintrag, der gelöscht werden muss. 2. Drücken Sie lange auf einen beliebigen Chat-Datensatz, klicken Sie auf [Mehrfachauswahl] und markieren Sie die Chat-Datensätze, die Sie löschen möchten. 3. Klicken Sie auf die Schaltfläche [Löschen] in der unteren rechten Ecke und wählen Sie im Popup-Fenster [Löschen bestätigen] aus, um diese Datensätze dauerhaft zu löschen.

Wie sende ich Dateien an andere auf TikTok? Wie lösche ich an andere gesendete Dateien? Wie sende ich Dateien an andere auf TikTok? Wie lösche ich an andere gesendete Dateien? Mar 22, 2024 am 08:30 AM

Auf Douyin können Benutzer nicht nur ihre Lebensdetails und Talente teilen, sondern auch mit anderen Benutzern interagieren. In diesem Prozess müssen wir manchmal Dateien wie Bilder, Videos usw. an andere Benutzer senden. Wie kann man also auf Douyin Dateien an andere senden? 1. Wie kann ich auf Douyin Dateien an andere senden? 1. Öffnen Sie Douyin und rufen Sie die Chat-Oberfläche auf, an die Sie Dateien senden möchten. 2. Klicken Sie in der Chat-Oberfläche auf das „+“-Zeichen und wählen Sie „Datei“. 3. In den Dateioptionen können Sie auswählen, ob Sie Bilder, Videos, Audiodateien und andere Dateien senden möchten. Nachdem Sie die Datei ausgewählt haben, die Sie senden möchten, klicken Sie auf „Senden“. 4. Warten Sie, bis die andere Partei Ihre Datei akzeptiert. Sobald die andere Partei sie akzeptiert, wird die Datei erfolgreich übertragen. 2. Wie lösche ich Dateien, die auf Douyin an andere gesendet wurden? 1. Öffnen Sie Douyin und geben Sie den von Ihnen gesendeten Text ein.

Wie kann ich den gelöschten Kommentar einer anderen Person zu Xiaohongshu wiederherstellen? Wird es angezeigt, wenn der Kommentar einer anderen Person gelöscht wird? Wie kann ich den gelöschten Kommentar einer anderen Person zu Xiaohongshu wiederherstellen? Wird es angezeigt, wenn der Kommentar einer anderen Person gelöscht wird? Mar 21, 2024 pm 10:46 PM

Xiaohongshu ist eine beliebte Social-E-Commerce-Plattform und interaktive Kommentare zwischen Benutzern sind eine unverzichtbare Kommunikationsmethode auf der Plattform. Gelegentlich stellen wir möglicherweise fest, dass unsere Kommentare von anderen gelöscht wurden, was verwirrend sein kann. 1. Wie kann ich die gelöschten Kommentare einer anderen Person zu Xiaohongshu wiederherstellen? Wenn Sie feststellen, dass Ihre Kommentare gelöscht wurden, können Sie zunächst versuchen, direkt nach relevanten Beiträgen oder Produkten auf der Plattform zu suchen, um zu sehen, ob Sie den Kommentar noch finden können. Wenn der Kommentar nach dem Löschen immer noch angezeigt wird, wurde er möglicherweise vom ursprünglichen Beitragseigentümer gelöscht. Sie können jetzt versuchen, den ursprünglichen Beitragseigentümer zu kontaktieren, um ihn nach dem Grund für das Löschen des Kommentars zu fragen und die Wiederherstellung des Kommentars zu beantragen. Wenn ein Kommentar vollständig gelöscht wurde und nicht im ursprünglichen Beitrag gefunden werden kann, sind die Chancen, dass er wieder auf der Plattform eingestellt wird, relativ gering. Sie können andere Wege ausprobieren

So überprüfen Sie Ihren eigenen Ausweis auf Xianyu_Einführung, wie Sie Ihren persönlichen Spitznamen auf Xianyu überprüfen können So überprüfen Sie Ihren eigenen Ausweis auf Xianyu_Einführung, wie Sie Ihren persönlichen Spitznamen auf Xianyu überprüfen können Mar 22, 2024 am 08:21 AM

Als Handelsplattform müssen Sie sich bei Xianyu registrieren und anmelden, bevor Sie es nutzen können. Was ist, wenn Sie überprüfen möchten, wie ihre ID lautet? Finden wir es unten gemeinsam heraus! Eine Einführung zum Überprüfen Ihres persönlichen Spitznamens auf Xianyu. Starten Sie zunächst die Xianyu-App. Wechseln Sie nach dem Aufrufen der Startseite zur Seite „Leerlauf“, „Nachrichten“ und „Ich“ und klicken Sie in der unteren rechten Ecke auf die Option „Mein“. 2. Dann müssen wir auf meiner Seite in der oberen linken Ecke auf [Avatar] klicken. 2. Wenn wir dann zur persönlichen Startseite gehen, müssen wir hier auf die Schaltfläche [Informationen bearbeiten] klicken. 4. Klicken Sie abschließend auf Wir können es später auf der Seite sehen, auf der wir Informationen bearbeiten;

Wo kann man die Musik-Rankings auf NetEase Cloud Music überprüfen? So überprüfen Sie die Musik-Rankings auf NetEase Cloud Music Wo kann man die Musik-Rankings auf NetEase Cloud Music überprüfen? So überprüfen Sie die Musik-Rankings auf NetEase Cloud Music Mar 25, 2024 am 11:40 AM

1. Wählen Sie nach dem Einschalten des Telefons NetEase Cloud Music aus. 2. Nachdem Sie die Homepage aufgerufen haben, können Sie die [Rangliste] sehen und zum Betreten klicken. 3. In der Rangliste können Sie eine beliebige Liste auswählen und auf [Neue Songliste] klicken. 4. Wählen Sie Ihr Lieblingslied aus und klicken Sie darauf. 5. Kehren Sie zur vorherigen Seite zurück, um weitere Listen anzuzeigen.

PHP-Praxistipp: Entfernen Sie das letzte Semikolon in Ihrem Code PHP-Praxistipp: Entfernen Sie das letzte Semikolon in Ihrem Code Mar 27, 2024 pm 02:24 PM

Praktische PHP-Tipps: Letztes Semikolon im Code löschen Beim Schreiben von PHP-Code kommt es häufig vor, dass Sie das letzte Semikolon im Code löschen müssen. Dies kann daran liegen, dass beim Kopieren und Einfügen zusätzliche Semikolons eingeführt werden oder dass Codestil und -struktur optimiert werden sollen. In diesem Artikel stellen wir einige Methoden zum Entfernen des letzten Semikolons im PHP-Code vor und stellen spezifische Codebeispiele bereit. Methode 1: Verwenden der Substr-Funktion Die Substr-Funktion kann einen Teilstring einer angegebenen Länge aus einem String zurückgeben. wir können

See all articles