Use ajax to load pages and delete content-JS Tutorial-php.cn

Use ajax to load pages and delete content

PHPz

Release： 2017-03-12 17:33:05

Original

1031 people have browsed it

The biggest advantage of ajax is that the page will not jump when loading and delete. Most of the current web pages will choose to use ajax to write, compared to embedding PHP code The amount of code is reduced, and the page loading will be faster.

The following is the loading page and fruit deletion written using ajax using the database fruit table as an example. Writing with ajax may still be a bit awkward at first, so just think of it as practice

This is the fruit table

The following is the code for the home page. First create a php file 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>

Copy after login

I chose to display only the three columns of fruit name, price and origin in the fruit table on the page. Next we will write the loaded processing page and create a php file, 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;
?>

Copy after login

After the loading page code is written, you can officially write ajax. These are to be written in 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=&#39;button&#39;  ids=&#39;"+lie[0]+"&#39; class=&#39;sc&#39; value=&#39;删除&#39;/></td></tr>"

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

Copy after login

Note: When writing ajax, pay special attention to the semicolons and commas inside. I always write commas as semicolons, and the result cannot be output. I found out after checking that the code is correct. The comma is wrong, this is a very troublesome thing

After writing the loading page, we have to start writing the delete page Create a php file shanchu.php. Deleting the page is very simple and it is almost the same as directly embedding php before

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

Copy after login

Next I will write a new one When using ajax, you will find that it will not run after writing, because the class inside is not recognized when you delete it when loading the page. This requires me to put the deletion into the loaded ajax and encapsulate the loading into a method, which is called when deleting. It can be done in one click

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

Copy after login

There will be no problem in writing this way.

The above is the detailed content of Use ajax to load pages and delete content. For more information, please follow other related articles on the PHP Chinese website!