検索

ホームページ >ウェブフロントエンド >jsチュートリアル >Ajax のデータ削除とデータ操作の表示手順の詳細な説明

Ajax のデータ削除とデータ操作の表示手順の詳細な説明

php中世界最好的语言
php中世界最好的语言オリジナル
2018-04-02 11:20:531986ブラウズ

今回は、Ajax のデータ削除とデータ操作の注意事項 について詳しく説明します。実際のケースを見てみましょう。

1. データベース内のテーブルを検索します:

カラーテーブル

メインページのコードは TBODY 関数を使用します。ブランチダウンロードにより、ダウンロード速度が向上します。

(テーブルのすべてのコンテンツがダウンロードされて表示されて初めて Web ページが開きます。ブランチダウンロードの場合、コンテンツの一部を最初に表示することができ、ユーザーの待ち時間を短縮できます。

使用目的TBODY はこれらを含めるためです。つまり、テーブル全体を解析した後にコードをまとめて表示する必要はありません。つまり、TBODY 行を取得したら、最初に 1 行を表示できます。 BODY は HTML のテキスト本体です。TABLE には複数の TBODY を含めることができます。テーブルの内容が大きい場合は、TBODY を使用してテーブルのダウンロードを制御できます。ブランチのダウンロードが必要な箇所に合計を追加します。

例:

以下は引用された内容です: head1head2 が最初に表示され、次に foot1foot2 が表示されます

注:

*1 はレンダリングされません。ブラウザ内で

*2. 異なる行のセルが結合される場合、各セルはどこにありますか? 行に TBODY タグを追加しないでください

ヒント: TBODY 要素に含まれる有効なタグは次のとおりです: TD、TH、TR 特別なヒント: このサンプル コードを実行すると、テーブルの内容が比較的小さいため、効果はわかりません。

データ内のみです。効果は、ボリュームが大きく、メインのテーブルが多数ある場合にのみ確認できます。ページコード: 

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

写真:

コールバック関数

は空です。後で書き戻します

その後、読み込みページ:

表示:

配列を走査し、その内容を表示します。テーブル、具体的には: 

<?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;
出力が何であるかを見てみましょう:

最後に余分な垂直線があります。垂直線を削除してください: 

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

もう一度来て見てください:

コールバック関数を書きます: 

<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>
書いたら、次のページを見てください:

3. 次に、書き込みと削除を行うことができます:

最初に最後のセルに削除ボタンを追加し、主キー値を渡します。 : 

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

削除ボタンにイベントを追加し、Ajax メソッドを呼び出します:

**

非同期と同期の違い:

同期には結果が返されるのを待つ必要があります。非同期を待つ必要はありません。一般に、非同期の結果を監視する必要があります

同期は直線状のキューであり、非同期は同じキュー上になく、誰もが独自の方法で進みます

**

 //给删除按钮加上事件
      $(".sc").click(function(){
        var ids = $(this).attr("ids");
        $.ajax({
          url:"shanchu.php",
          data:{ids:ids},
          dataType:"TEXT",
          type:"POST",
          success:function (d) {
            
          }
        });
      })
コールバック関数などが書き戻されます。

処理中のページ: 

<?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";
}
次のように見てください:

クリックして削除します。削除後、ページは更新されません。

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

主页面代码：

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

推荐阅读：

Ajax不刷新页面的情况下实现分页查询

ajax分页查询图文详解

以上がAjax のデータ削除とデータ操作の表示手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php ajax html 封装 回调函数 事件 异步 table tbody td tr th 数据库
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：SpringMVC+Ajax が HTML 文字列のスプライシングを実装する方法次の記事：SpringMVC+Ajax が HTML 文字列のスプライシングを実装する方法

関連記事

続きを見る