Home >Web Front-end >JS Tutorial >Detailed explanation of the steps of Ajax deleting data and viewing data operations

Detailed explanation of the steps of Ajax deleting data and viewing data operations

php中世界最好的语言Original: 2018-04-02 11:20:532022browse

This time I will bring you a detailed explanation of the steps of Ajax deleting data and viewing data operations. What are the precautions for Ajax deleting data and viewing data operations? The following is a practical case, let's take a look.

1. Find a table in the database:

Color table

2. Main page

The code of the main page uses tbody;

The function of TBODY is:

can control the downloading of tables in separate rows, thereby increasing the download speed.

(The web page is opened after all the contents of the table are downloaded before it is displayed. For branch downloads, part of the content can be displayed first, which will reduce the user's waiting time.

The purpose of using TBODY It is possible to prevent these included codes from being displayed together after the entire table is parsed. That is to say, if there are multiple rows, then if you get a TBODY row, you can display one row first.

BODY is HTML. Text body, an HTML file, has only one BODY, and there can be multiple TBODYs in TABLE. The

TBODY tag can control the table to be downloaded in separate rows. It is more practical when the table content is large and needs to be downloaded in separate rows. Add and,

For example:

The following is the quoted content: head1head2 is displayed first, then displayed, and then foot1foot2

Note:

*1. The TBODY element will not be rendered in the browser

*2. When merging cells between different rows, do not add the TBODY tag to the row where each cell is located

Tips: The valid tags contained in the TBODY element are: TD, TH, TR. Special reminder: The running effect of this example code will not be seen because the content in the table is relatively small.

Only when the amount of data is large And the effect can only be seen when there are more nested tables.

Main page code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>无标题文档</title>
  <script src="jquery-1.11.2.min.js"></script>
</head>
<body>
<h1>显示数据</h1>
<table width="100%" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td>代号</td>
    <td>名称</td>
    <td>操作</td>
  </tr>
  <tbody id="td">
  </tbody>
</table>
</body>
</html>
<script>
  $.ajax({
    url:"jiazai.php",
//    显示所有的数据不用写data
  dataType:"TEXT",
    success:function(data)
    {
    }
  });
</script>

Picture:

##Callback function. It is empty, come back and write it later;

Then comes the loading page:

Display:

Traverse the array and display the contents of the table, specifically:

<?php
include ("db.class.php");
$db = new db();
$sql = "select * from min";
$arr = $db->Query($sql);
//遍历
$str="";
foreach ($arr as $v)
{
  $str = $str.implode("-",$v)."|";
  //用-把$v拼起来,拼出来是1-红2-蓝,用|分割，拼出来是1-红|2-蓝|
}
echo $str;

Let’s take a look at the output:

There is an extra vertical line at the end, remove the vertical line:

$str = substr($str,0,strlen($str)-1);
//截取字符串：从第0个开始，截取它的长度-1
//strlen获取字符串长度

Come again Look:

Now let’s write the callback function:

<script>
  $.ajax({
    url:"jiazai.php",
//    显示所有的数据不用写data
  dataType:"TEXT",
    success:function(data)
    {
      var str = "";
      var hang = data.split("|");
      //split拆分字符串
      for(var i = 0;i<hang.length;i++)
      {
        //通过循环取到每一行;拆分出列；
        var lie = hang[i].split("-");
        str = str+
          "<tr><td>"
          +lie[0]+
          "</td><td>"
          +lie[1]+
          "</td><td>操作</td></tr>";
      }
      $("#td").html(str);
      //找到td把html代码扔进去
    }
  });
</script>

After writing, look at the next page:

3. Next you can write delete:

First add a delete button in the last cell and pass a primary key value:

"</td><td>" +
          "<input type=&#39;button&#39; ids=&#39;"+lie[0]+"&#39; class=&#39;sc&#39; value=&#39;删除&#39; />" +
          //ids里面存上主键值
          "</td></tr>";

Add an event to the delete button and call the Ajax method:

The difference between asynchronous and synchronous:

Synchronization needs to wait for the return result before continuing. Asynchronous does not need to wait. Generally, you need to monitor the asynchronous results.

Synchronization is a queue in a straight line, and asynchronous is not in a queue.

 //给删除按钮加上事件
      $(".sc").click(function(){
        var ids = $(this).attr("ids");
        $.ajax({
          url:"shanchu.php",
          data:{ids:ids},
          dataType:"TEXT",
          type:"POST",
          success:function (d) {
            
          }
        });
      })

The callback function waits and comes back to write;

Continue to delete the processing page:

<?php
include ("db.class.php");
$db = new db();
$ids = $_POST["ids"];
$sql = "delete from min WHERE ids=&#39;{$ids}&#39;";
if($db ->Query($sql,0))
{
  echo "ok";
}
else{
  echo "no";
}

Look at it this way:

Click to delete, the page will not be refreshed after deletion,

若是让他自动加载数据，需要把加载数据的代码封装成一个方法，删除的时候调用此方法；就哦可了

主页面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>无标题文档</title>
  <script src="jquery-1.11.2.min.js"></script>
</head>
<body>
<h1>显示数据</h1>
<table width="100%" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td>代号</td>
    <td>名称</td>
    <td>操作</td>
  </tr>
  <tbody id="td">
  </tbody>
</table>
</body>
</html>
<script>
  //调用load方法
  load();
  //把加载数据封装成一个方法
  function load()
  {
    $.ajax({
      url: "jiazai.php",
//    显示所有的数据不用写data
      dataType: "TEXT",
      success: function (data) {
        var str = "";
        var hang = data.split("|");
        //split拆分字符串
        for (var i = 0; i < hang.length; i++) {
          //通过循环取到每一行;拆分出列；
          var lie = hang[i].split("-");
          str = str +
            "<tr><td>"
            + lie[0] +
            "</td><td>"
            + lie[1] +
            "</td><td>" +
            "<input type=&#39;button&#39; ids=&#39;" + lie[0] + "&#39; class=&#39;sc&#39; value=&#39;删除&#39; />" +
            //ids里面存上主键值
            "</td></tr>";
        }
        $("#td").html(str);
        //找到td把html代码扔进去
        //给删除按钮加上事件
        $(".sc").click(function () {
          var ids = $(this).attr("ids");
          $.ajax({
            url: "shanchu.php",
            data: {ids: ids},
            dataType: "TEXT",
            type: "POST",
            success: function (d) {
              if (d.trim() == "ok") {
                alert("删除成功");
                //调用加载数据的方法
                load();
              }
              else {
                alert("删除失败");
              }
            }
          });
        })
      }
    });
  }
</script>

删除页面代码：

<?php
include ("db.class.php");
$db = new db();
$ids = $_POST["ids"];
$sql = "delete from min WHERE ids=&#39;{$ids}&#39;";
if($db ->Query($sql,0))
{
  echo "ok";
}
else{
  echo "no";
}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Detailed explanation of the steps of Ajax deleting data and viewing data operations

Related articles