Heim > Artikel > Web-Frontend > Verwenden Sie Ajax, um Seiten zu laden und Inhalte zu löschen

Verwenden Sie Ajax, um Seiten zu laden und Inhalte zu löschen

PHPzOriginal: 2017-03-12 17:33:051033Durchsuche

Der größte Vorteil von Ajax besteht darin, dass die Seite beim Laden und Löschen nicht springt. Die meisten heutigen Webseiten verwenden im Vergleich zum Einbetten von PHP-Code Ajax Die Menge an Code wird reduziert und das Laden der Seite wird schneller.

Das Folgende ist die Ladeseite und das Löschen von Früchten, die mit Ajax unter Verwendung der Datenbank-Fruchttabelle geschrieben wurden Ein Beispiel. Das Schreiben mit Ajax mag anfangs noch etwas umständlich sein, also stellen Sie es sich einfach als Übung

vor 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>

Ich habe mich dafür entschieden, nur die drei Spalten Fruchtname, Preis und Herkunft in der Fruchttabelle auf der Seite anzuzeigen. Als nächstes werden wir die geladene Verarbeitungsseite schreiben 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;
?>

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

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

Hinweis: Achten Sie beim Schreiben von Ajax besonders auf die darin enthaltenen Semikolons und Kommas, und das Ergebnis kann nicht sein Ausgabe. Nachdem der Code korrekt war, stellte ich fest, dass das Komma falsch geschrieben war, was sehr problematisch war

Nachdem wir die Ladeseite geschrieben haben, beginnen wir mit dem Schreiben der PHP-Datei shanchu.php. Das Löschen der Seite ähnelt dem direkten Einbetten von PHP 🎜>

Wenn ich als nächstes einen Ajax neu schreiben möchte, werde ich feststellen, dass er nach dem Schreiben nicht ausgeführt wird, da die darin enthaltene Klasse beim Löschen der Seite beim Laden der Seite nicht erkannt wird. Dazu muss ich den Löschvorgang in den geladenen Ajax einfügen und gleichzeitig den Ladevorgang in eine Methode kapseln, die Sie beim Löschen aufrufen können

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

Es ist kein Problem, es so zu schreiben.

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

Das obige ist der detaillierte Inhalt vonVerwenden Sie Ajax, um Seiten zu laden und Inhalte zu löschen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

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

Vorheriger Artikel：AlloyTouch Endlosschleifen-Auswahl-Plug-inNächster Artikel：AlloyTouch Endlosschleifen-Auswahl-Plug-in

In Verbindung stehende Artikel

Mehr sehen