Ajax implementiert das Laden von Seiten und das Löschen von Inhalten-js-Tutorial-php.cn

Ajax implementiert das Laden von Seiten und das Löschen von Inhalten

亚连

Freigeben： 2018-05-22 16:13:05

Original

1947 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich die relevanten Informationen von Ajax zum Implementieren des Seitenladens und zum Löschen von Inhalten vorgestellt. Es hat einen gewissen Referenzwert.

Der größte Vorteil von Ajax ist, dass die Seite Beim Laden und Löschen wird bei den meisten Webseiten nicht gesprungen. Im Vergleich zum Einbetten von PHP-Code wird die Codemenge reduziert Nehmen Sie die Ladeseite und das Löschen von Früchten als Beispiel. Das Schreiben mit Ajax kann zunächst etwas umständlich sein, also betrachten Sie es einfach als Übung.

Dies ist die Obsttabelle:

Das Folgende ist der Code für die Homepage. Erstellen Sie zunächst eine PHP-Datei main.php

<body>

<h2>内容加载</h2>
<table cellpadding="0" cellspacing="0" border="1" width="100%">
 <tr>
  <td>水果名称</td>
  <td>水果价格</td>
  <td>水果产地</td>
  <td>操作</td>
 </tr>
 <tbody id="tb">

 </tbody>
</table>
</body>

Nach dem Login kopieren

Ich habe mich dafür entschieden, nur die drei Spalten Fruchtname, Preis und Herkunft in der Fruchttabelle auf der Seite anzuzeigen. Als nächstes schreiben wir die geladene Verarbeitungsseite und erstellen eine PHP-Datei , jiazaiym.php

 <?php
include("DADB.class.php");
$db=new DADB();
$sql="select * from fruit ";
$arr=$db->Query($sql);
$str="";
foreach($arr as $v)
{
 $str=$str.implode("^",$v)."|"; //每一行之间用“|”连接，这样最后就会多出一个“|”
}
$str=substr($str,0,strlen($str)-1); //把最后多出的“|”用截取字符串的方式删去
echo $str;
?>

Nach dem Login kopieren

Nachdem der Ladeseitencode geschrieben wurde, können Sie offiziell Ajax schreiben. Diese sollten in main.php geschrieben werden.

<script type="text/javascript">
 $.ajax({
  url:"jiazaiym.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[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td><input type=&#39;button&#39; ids=&#39;"+lie[0]+"&#39; class=&#39;sc&#39; value=&#39;删除&#39;/></td></tr>"

   }
   $("#tb").html(str);
  }
 })
</script>

Nach dem Login kopieren

Hinweis: Achten Sie beim Schreiben von Ajax besonders auf die Semikolons und Kommas, ich selbst Das Komma ist Immer als Semikolon geschrieben und das Ergebnis kann nicht ausgegeben werden. Nachdem ich überprüft habe, ob der Code korrekt ist, stelle ich fest, dass das Komma falsch geschrieben ist.

Nachdem wir die Ladeseite geschrieben haben, müssen wir mit dem Schreiben der Löschseite beginnen. Das Löschen der Seite ist sehr einfach und entspricht fast dem direkten Einbetten von PHP.

<?php
$ids=$_POST["ids"];
include("DADB.class.php");
$db=new DADB();
$sql="delete from fruit where ids={$ids}";
if($db->Query($sql,0))
{
 echo"OK";
}
else{
 echo"flase";
}

Nach dem Login kopieren

Wenn ich das nächste Mal einen Ajax neu schreiben möchte, werde ich feststellen, dass er nach dem Schreiben nicht ausgeführt wird, da es nicht möglich ist, die darin enthaltene Klasse zu löschen Beim Laden der Seite muss ich den Löschvorgang in den geladenen Ajax einfügen und gleichzeitig den Ladevorgang in eine Methode kapseln, die beim Löschen aufgerufen werden kann.

<script type="text/javascript">
 Load();
 function Load() {
  $.ajax({
   url: "jiazaiym.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[1] + "</td><td>" + lie[2] + "</td><td>" + lie[3] + "</td><td><input type=&#39;button&#39; ids=&#39;" + lie[0] + "&#39; class=&#39;sc&#39; value=&#39;删除&#39;/></td></tr>"

    }
    $("#tb").html(str);
    //删除页面
    $(".sc").click(function(){
     var ids=$(this).attr("ids");
    $.ajax({
     url: "shanchu.php",
     data: {ids: ids},
     type: "POST",
     dataType: "TEXT",
     success: function (aa) { //去空格
      if (aa.trim() == "OK") {
       alert("删除成功");
       Load();
      }
      else {
       alert("删除失败");
      }
     }
    })
    })
   }
  })
 }
</script>

Nach dem Login kopieren

Das oben Gesagte habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

Detaillierte Erläuterung der Schritte zur Implementierung von Echtzeit-Nachrichten-Push in PHP basierend auf Anti-Ajax Push

Interviewfragen zu AJAX (mit Antworten)

Eine detaillierte Analyse der Verwendung von AJAX (Code eingefügt)

Das obige ist der detaillierte Inhalt vonAjax implementiert das Laden von Seiten und das Löschen von Inhalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!