Rumah pembangunan bahagian belakang tutorial php 如何利用ajax实现页面加载和内容的删除

如何利用ajax实现页面加载和内容的删除

Mar 12, 2017 am 10:06 AM
ajax

   ajax最大的好处就在于加载和删除的时候不会跳转页面,现在的网页大多都会选择用ajax来写,相比嵌入PHP代码来说减少了代码量,同时加载页面也会比较快,

 下面是用ajax以数据库fruit表为例写的加载页面和水果的删除,刚开始用ajax可能写起来还是会比较手生,就当是练习好了

如何利用ajax实现页面加载和内容的删除

这是fruit表

 下面就是首页的代码了,先建一个php文件 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>
Salin selepas log masuk

我选择的是在页面只显示fruit表中的水果名称 价格和产地这三列,下面我们就要写加载的处理页面了,建一个php文件,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;
?>
Salin selepas log masuk

加载页面代码写完之后就可以正式的写ajax了,这些是要写在main.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='button'  ids='"+lie[0]+"' class='sc' value='删除'/></td></tr>"

            }
          $("#tb").html(str);
        }
    })
</script>
Salin selepas log masuk

注意:在写ajax的时候要特别注意里面的分号和逗号,我自己总是把逗号写成分号,结果无法输出,在检查一遍代码无误后,才发现是逗号写错了,这是件非常令人头疼的事情

写完加载页面之后我们要开始写删除页面了 建一个php文件 shanchu.php,删除页面是非常简单的 和之前直接嵌入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";
}
Salin selepas log masuk

接下来在我要重新写一个ajax的时候会发现,写完之后不运行,因为在加载页面的时候删除里面的 class不识别,这就需要我把删除放到加载的ajax里面了 同时把加载封装成一个方法,删除的时候调用一下就可以

<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='button'  ids='" + lie[0] + "' class='sc' value='删除'/></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>
Salin selepas log masuk

这样写起来就没有问题了。

 

 

 

 

Atas ialah kandungan terperinci 如何利用ajax实现页面加载和内容的删除. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk menyelesaikan ralat 403 yang dihadapi oleh permintaan jQuery AJAX Bagaimana untuk menyelesaikan ralat 403 yang dihadapi oleh permintaan jQuery AJAX Feb 20, 2024 am 10:07 AM

Bagaimana untuk menyelesaikan ralat 403 yang dihadapi oleh permintaan jQuery AJAX

Bagaimana untuk menyelesaikan ralat permintaan jQuery AJAX 403 Bagaimana untuk menyelesaikan ralat permintaan jQuery AJAX 403 Feb 19, 2024 pm 05:55 PM

Bagaimana untuk menyelesaikan ralat permintaan jQuery AJAX 403

Bagaimana untuk mendapatkan pembolehubah daripada kaedah PHP menggunakan Ajax? Bagaimana untuk mendapatkan pembolehubah daripada kaedah PHP menggunakan Ajax? Mar 09, 2024 pm 05:36 PM

Bagaimana untuk mendapatkan pembolehubah daripada kaedah PHP menggunakan Ajax?

PHP lwn. Ajax: Penyelesaian untuk mencipta kandungan yang dimuatkan secara dinamik PHP lwn. Ajax: Penyelesaian untuk mencipta kandungan yang dimuatkan secara dinamik Jun 06, 2024 pm 01:12 PM

PHP lwn. Ajax: Penyelesaian untuk mencipta kandungan yang dimuatkan secara dinamik

Bagaimana untuk menyelesaikan masalah jQuery AJAX ralat 403? Bagaimana untuk menyelesaikan masalah jQuery AJAX ralat 403? Feb 23, 2024 pm 04:27 PM

Bagaimana untuk menyelesaikan masalah jQuery AJAX ralat 403?

Memahami Rangka Kerja Ajax: Terokai Lima Rangka Kerja Biasa Memahami Rangka Kerja Ajax: Terokai Lima Rangka Kerja Biasa Jan 26, 2024 am 09:28 AM

Memahami Rangka Kerja Ajax: Terokai Lima Rangka Kerja Biasa

Apakah versi ajax? Apakah versi ajax? Nov 22, 2023 pm 02:00 PM

Apakah versi ajax?

Pertukaran data tak segerak menggunakan fungsi Ajax Pertukaran data tak segerak menggunakan fungsi Ajax Jan 26, 2024 am 09:41 AM

Pertukaran data tak segerak menggunakan fungsi Ajax

See all articles