Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der Schritte zum Löschen von Daten und Anzeigen von Datenvorgängen mit Ajax

Detaillierte Erläuterung der Schritte zum Löschen von Daten und Anzeigen von Datenvorgängen mit Ajax

php中世界最好的语言Original: 2018-04-02 11:20:532022Durchsuche

Dieses Mal werde ich Ihnen die Schritte zum Löschen von Daten und zum Anzeigen von Daten mit Ajax ausführlich erläutern ein Blick.

1. Suchen Sie eine Tabelle in der Datenbank:

Farbtabelle

2 Seite

Der Code der Hauptseite verwendet tbody;

Die Funktion von TBODY ist:

kann das Herunterladen von Tabellenzweigen steuern und dadurch die Download-Geschwindigkeit erhöhen .

(Die Webseite wird geöffnet, nachdem alle Inhalte der Tabelle heruntergeladen wurden, bevor sie angezeigt wird. Zweig-Downloads können einen Teil des Inhalts zuerst anzeigen, was die Wartezeit des Benutzers verkürzt.

Die Zweck der Verwendung von TBODY Es ist möglich, zu verhindern, dass diese enthaltenen Codes zusammen angezeigt werden, nachdem die gesamte Tabelle analysiert wurde. Das heißt, wenn mehrere Zeilen vorhanden sind, können Sie eine Zeile zuerst anzeigen, wenn Sie eine TBODY-Zeile erhalten 🎜>

BODY ist HTML. Der Textkörper, eine HTML-Datei, hat nur einen BODY und es können mehrere TBODYs in TABLE vorhanden sein. Das

TBODY-Tag kann die Tabelle steuern, die in separaten Zeilen heruntergeladen werden soll. Dies ist praktischer, wenn der Tabelleninhalt umfangreich ist und in separaten Zeilen heruntergeladen werden muss.

Zum Beispiel:

Das Folgende ist der zitierte Inhalt: head1head2 wird zuerst angezeigt angezeigt, dann foot1foot2

Hinweis:

*1 Das TBODY-Element wird nicht im Browser gerendert

*2 Fügen Sie in verschiedenen Zeilen keine TBODY-Tags zu den Zeilen hinzu, in denen sich die einzelnen Zellen befinden nicht sichtbar, da der Inhalt der Tabelle relativ klein ist

kann nur verwendet werden, wenn die Datenmenge größer ist. Die Rückruffunktion ist nur sichtbar > ist leer und wird später zurückgeschrieben;

Dann wird die Ladeseite angezeigt:

Durchlaufen Sie das Array

, um den Inhalt der Tabelle anzuzeigen, insbesondere:

<!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>
  <script src="jquery-1.11.2.min.js"></script>
</head>
<body>
<h1>显示数据</h1>
<table width="100%" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td>代号</td>
    <td>名称</td>
    <td>操作</td>
  </tr>
  <tbody id="td">
  </tbody>
</table>
</body>
</html>
<script>
  $.ajax({
    url:"jiazai.php",
//    显示所有的数据不用写data
  dataType:"TEXT",
    success:function(data)
    {
    }
  });
</script>

Schauen wir uns die Ausgabe an:

Am Ende befindet sich eine zusätzliche vertikale Linie. Entfernen Sie die vertikale Linie:

Schauen Sie noch einmal:

Jetzt schreiben wir die Rückruffunktion:

<?php
include ("db.class.php");
$db = new db();
$sql = "select * from min";
$arr = $db->Query($sql);
//遍历
$str="";
foreach ($arr as $v)
{
  $str = $str.implode("-",$v)."|";
  //用-把$v拼起来,拼出来是1-红2-蓝,用|分割，拼出来是1-红|2-蓝|
}
echo $str;

Schauen Sie sich nach dem Schreiben die nächste Seite an:

3. Als nächstes können Sie „Löschen“ schreiben:

$str = substr($str,0,strlen($str)-1);
//截取字符串：从第0个开始，截取它的长度-1
//strlen获取字符串长度

Fügen Sie zunächst eine Löschschaltfläche in der letzten Zelle hinzu und übergeben Sie einen Primärschlüsselwert:

Fügen Sie ein Ereignis zur Schaltfläche „Löschen“ hinzu und rufen Sie die Ajax-Methode auf:

<script>
  $.ajax({
    url:"jiazai.php",
//    显示所有的数据不用写data
  dataType:"TEXT",
    success:function(data)
    {
      var str = "";
      var hang = data.split("|");
      //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>操作</td></tr>";
      }
      $("#td").html(str);
      //找到td把html代码扔进去
    }
  });
</script>

Asynchron und synchron Unterschied:

Bei der Synchronisierung muss auf das Rückgabeergebnis gewartet werden, bevor fortgefahren wird. Bei der Asynchronität muss nicht gewartet werden. Im Allgemeinen müssen Sie das asynchrone Ergebnis überwachen.

Bei der Synchronisierung handelt es sich um eine Warteschlange in einer geraden Linie Linie, asynchron ist nicht in einer Warteschlange Jeder geht seinen eigenen Weg

"</td><td>" +
          "<input type=&#39;button&#39; ids=&#39;"+lie[0]+"&#39; class=&#39;sc&#39; value=&#39;删除&#39; />" +
          //ids里面存上主键值
          "</td></tr>";

Die Rückruffunktion und so weiter zurückkommen und schreiben;

Weiter löschen die Verarbeitungsseite:

Hier entlang:

Zum Löschen klicken, die Seite wird nach dem Löschen nicht aktualisiert,

若是让他自动加载数据，需要把加载数据的代码封装成一个方法，删除的时候调用此方法；就哦可了

主页面代码：

<!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>
  <script src="jquery-1.11.2.min.js"></script>
</head>
<body>
<h1>显示数据</h1>
<table width="100%" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td>代号</td>
    <td>名称</td>
    <td>操作</td>
  </tr>
  <tbody id="td">
  </tbody>
</table>
</body>
</html>
<script>
  //调用load方法
  load();
  //把加载数据封装成一个方法
  function load()
  {
    $.ajax({
      url: "jiazai.php",
//    显示所有的数据不用写data
      dataType: "TEXT",
      success: function (data) {
        var str = "";
        var hang = data.split("|");
        //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>" +
            "<input type=&#39;button&#39; ids=&#39;" + lie[0] + "&#39; class=&#39;sc&#39; value=&#39;删除&#39; />" +
            //ids里面存上主键值
            "</td></tr>";
        }
        $("#td").html(str);
        //找到td把html代码扔进去
        //给删除按钮加上事件
        $(".sc").click(function () {
          var ids = $(this).attr("ids");
          $.ajax({
            url: "shanchu.php",
            data: {ids: ids},
            dataType: "TEXT",
            type: "POST",
            success: function (d) {
              if (d.trim() == "ok") {
                alert("删除成功");
                //调用加载数据的方法
                load();
              }
              else {
                alert("删除失败");
              }
            }
          });
        })
      }
    });
  }
</script>

删除页面代码：

<?php
include ("db.class.php");
$db = new db();
$ids = $_POST["ids"];
$sql = "delete from min WHERE ids=&#39;{$ids}&#39;";
if($db ->Query($sql,0))
{
  echo "ok";
}
else{
  echo "no";
}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

In Verbindung stehende Artikel

Mehr sehen