Maison >interface Web >js tutoriel >Explication détaillée des étapes de suppression de données et d'affichage des données par Ajax

Explication détaillée des étapes de suppression de données et d'affichage des données par Ajax

php中世界最好的语言original: 2018-04-02 11:20:532018parcourir

Cette fois, je vais vous donner une explication détaillée des étapes de suppression de données et d'affichage des données par Ajax. Quelles sont les précautions pour la suppression de données et l'affichage des données par Ajax. Voici des cas pratiques, prenons. un regard.

1. Rechercher une table dans la base de données :

Table des couleurs

2. page

Le code de la page principale utilise tbody

La fonction de TBODY est :

peut contrôler le téléchargement des branches de table, augmentant ainsi la vitesse de téléchargement. .

(La page Web est ouverte une fois que tout le contenu du tableau a été téléchargé avant son affichage. Les téléchargements de branche peuvent d'abord afficher une partie du contenu, ce qui réduira le temps d'attente de l'utilisateur.

Le but de l'utilisation de TBODY Il est possible d'empêcher ces codes inclus d'être affichés ensemble après l'analyse de la table entière, c'est-à-dire que s'il y a plusieurs lignes, alors si vous obtenez une ligne TBODY, vous pouvez d'abord afficher une ligne <.>

BODY est HTML. Le corps du texte, un fichier HTML, n'a qu'un seul BODY, et il peut y avoir plusieurs TBODY dans TABLE La balise

TBODY peut contrôler le téléchargement du tableau dans des lignes séparées. C'est plus pratique lorsque le contenu du tableau est volumineux et doit être téléchargé dans des lignes séparées. Ajoutez et,

Par exemple :

Voici le contenu cité : head1head2 est affiché en premier, puis. affiché, puis foot1foot2

Remarque :

*1 L'élément TBODY ne sera pas rendu dans le navigateur

*2. lignes différentes, n'ajoutez pas la balise TBODY à la ligne où se trouve chaque cellule

Conseil : Les balises valides contenues dans l'élément TBODY sont : TD, TH, TR Rappel spécial que l'effet courant de cet exemple. le code ne sera pas vu car le contenu du tableau est relativement petit.

ne peut être utilisé que lorsque la quantité de données est importante et l'effet ne peut être vu que lorsque les tableaux sont davantage imbriqués.

est vide et sera réécrit ultérieurement ;

Puis la page de chargement :

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

Affichage :

Parcourir le tableau

pour afficher le contenu de la table, notamment :

Jetons un coup d'œil au résultat :

Il y a une ligne verticale supplémentaire à la fin, supprimez la ligne verticale :

Regardez à nouveau :

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

Écrivons maintenant la fonction de rappel :

Après avoir écrit, regardez la page suivante :

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

3. Ensuite, vous pouvez écrire delete :

Ajoutez d'abord un bouton Supprimer dans la dernière cellule et transmettez une valeur de clé primaire :

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

Ajoutez un événement au bouton Supprimer et appelez la méthode Ajax :

Asynchrone et synchrone La différence :

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

La synchronisation doit attendre le résultat de retour avant de continuer, l'asynchrone n'a pas besoin d'attendre, généralement vous devez surveiller le résultat asynchrone

La synchronisation est une file d'attente dans une ligne droite, asynchrone n'est pas dans une file d'attente Chacun suit son propre chemin

La fonction de rappel et ainsi de suite revenez et écrivez

Continuez ; pour supprimer la page de traitement :

Par ici Regardez :

Cliquez pour supprimer, la page ne sera pas rafraîchie après suppression,

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

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

主页面代码：

<!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中文网其它相关文章！

Articles Liés

Voir plus