Ajax implementation of page loading and content deletion

Time:2019-12-11

The biggest advantage of AJAX is that it won’t jump to the page when loading and deleting. Nowadays, most web pages choose to write with Ajax. Compared with embedded PHP code, it reduces the amount of code, and loading the page will be faster. Here is the deletion of the loading page and fruit written with Ajax as an example of the fruit table of the database. At the beginning, it may be easier to write with Ajax, so you should It’s practice.

This is the fruit table:

Here is the code of the home page. First, create a PHP file, main.php

<body>

<h2>Content loading</h2>
<table cellpadding="0" cellspacing="0" border="1" width="100%">
 <tr>
  <td>Fruit name</td>
  <td>Fruit price</td>
  <td>Fruit producing area</td>
  <td>Operation</td>
 </tr>
 <tbody>

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

I chose to display only the three columns of fruit name price and place of origin in the fruit table on the page. Next, we will write the loading processing page and create a PHP file, jiasaiym.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). "| // each line is connected with" | ", so that one more" | "
}
$STR = substr ($STR, 0, strlen ($STR) - 1); // delete the last extra "|" by intercepting the string
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 >" + lie [2] + "< / td > < td >" + lie [3] + "< td > < td > < input type ='button 'IDS ='" + lie [0] + "'class ='sc' value = 'Delete' / > < td > < tr >

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

Be careful:When writing Ajax, I should pay special attention to the semicolons and commas. I always write commas as as semicolons, and the results can’t be output. After checking the code again, I found that the comma was written wrong, which is a very headache.  

After writing the load page, we will start to write the delete page. Create a PHP file, shanchu.php. Deleting the page is very simple, similar to embedding PHP directly 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, when I want to write an Ajax again, I will find that it will not run after writing, because the class in the page is not recognized when it is loaded, which requires me to put the deletion in the loaded Ajax, and encapsulate the load into a method, which can be called when it is deleted.

<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 = 'Delete' / >

    }
    $("#tb").html(str);
    //Delete page
    $(".sc").click(function(){
     var ids=$(this).attr("ids");
    $.ajax({
     url: "shanchu.php",
     data: {ids: ids},
     type: "POST",
     dataType: "TEXT",
     Success: function (AA) {// space removal
      if (aa.trim() == "OK") {
       Alert ("deletion succeeded");
       Load();
      }
      else {
       Alert ("delete failed");
      }
     }
    })
    })
   }
  })
 }
</script>

In this way, there is no problem in writing.

The above is the whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.