Home >Web Front-end >JS Tutorial >Use ajax to load pages and delete content

Use ajax to load pages and delete content

PHPzOriginal: 2017-03-12 17:33:051078browse

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>

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

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>

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

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：AlloyTouch infinite loop select plug-inNext article：AlloyTouch infinite loop select plug-in

See more

Use ajax to load pages and delete content

Related articles