Ajaxでデータ削除機能と詳細表示機能を実装-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Ajaxでデータ削除機能と詳細表示機能を実装

韦小宝

Jan 01, 2018 pm 06:26 PM

ajax 消去チェック

この記事では、ajax を介したデータの削除と詳細の表示の機能を主に紹介します。これは、ajax を学習するための良い参考と価値があります。エディターに従って、ajax がデータ削除と詳細表示機能を実装する方法についてこの記事を見てみましょう

ブートストラップ、jquery、および ajax を使用してデータを表示し、削除機能を追加し、クリックしてモーダルボックスの詳細機能をポップアップ表示します

ホームページ Main.php

<!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>
<link type="text/css" href="../FENGZHUANG/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" /> //引入bootstrap的css文件
<script src="../FENGZHUANG/jquery-3.1.1.min.js"></script> //先引入jquery的js文件
<script src="../FENGZHUANG/bootstrap/js/bootstrap.min.js"></script> //再引入其它的js文件
<style type="text/css">
.xq{ margin-left:30px}
</style>
</head>
<body>
<p class="page-header">
 <h1>显示数据
 </h1>
</p>
<table class="table table-hover">
 <thead>
 <tr>
 <th width="30%">代号</th>
 <th width="30%">名称</th>
 <th width="40%">操作</th>
 </tr>
 </thead>
 <tbody id="tb">
 //用js向其中添加内容
 </tbody>
</table>
<!-- 模态框（Modal） -->
<p class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <p class="modal-dialog">
 <p class="modal-content">
  <p class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  <h4 class="modal-title" id="myModalLabel">详细信息</h4>
  </p>
  <p class="modal-body" id="nr">

  </p>
  <p class="modal-footer">

  <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

  </p>
 </p><!-- /.modal-content -->
 </p><!-- /.modal -->
</p>
</body>
<script type="text/javascript">
//加载数据
Load();
//加载数据的方法
function Load()
{
$.ajax({
 url:"jiazai.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[0]+"</td><td>"+lie[1]+"</td><td><button type=&#39;button&#39; class=&#39;btn btn-info btn-sm sc&#39; code=&#39;"+lie[0]+"&#39;>删除</button><button type=&#39;button&#39; class=&#39;btn btn-primary btn-sm xq&#39; code=&#39;"+lie[0]+"&#39;>查看</button></td></tr>";
  }
  $("#tb").html(str); //向tbody中输出内容
  addshanchu();
  addxiangqing();
  }
 });
}
//给删除按钮加事件的方法
function addshanchu()
{
//删除事件
  $(".sc").click(function(){
   var code = $(this).attr("code"); //获取删除按钮所在的数据的code
   $.ajax({
   url:"shanchu.php",
   data:{code:code},
   dataType:"TEXT",
   type:"POST",
   success: function(d){
    if(d.trim()=="OK")
    {
    alert("删除成功");
    Load(); //删除完需要加载数据
    }
    else
    {
    alert("删除失败");
    }
   }
   });
   })
}
//给查看详情加事件的方法
function addxiangqing()
{
 $(".xq").click(function(){
 //显示模态框
 $(&#39;#myModal&#39;).modal(&#39;show&#39;);
 //在模态框里面显示内容
 var code = $(this).attr("code"); //获取哪一条数据
 $.ajax({
  url:"xiangqing.php",
  data:{code:code},
  dataType:"TEXT",
  type:"POST",
  success:function(data){
  var lie = data.split("^"); 
  var str = "<p>民族代号："+lie[0]+"</p><p>民族名称："+lie[1]+"</p>";
  $("#nr").html(str);
  }
 });
 })
}
</script>
</html>

ログイン後にコピー

データ読み込みページ jiazai.php

<?php
include("../FENGZHUANG/DBDA.class.php");
$db = new DBDA();
$sql = "select * from nation order by code ASC";
$arr = $db->Query($sql);
// 下面实现的字符串是类似这样的n001^汉族|n002^回族|n003^苗族
$str = "";返回主页面的数据是TEXT型，得转换一下
foreach($arr as $v)
{
 $str = $str.implode("^",$v)."|"; //拼接字符串
}
$str = substr($str,0,strlen($str)-1); //去掉末尾的|字符。
echo $str;

ログイン後にコピー

削除処理ページ shanchu.php

<?php
include("../FENGZHUANG/DBDA.class.php");
$db = new DBDA();
$code = $_POST["code"];
$sql = "delete from nation where code=&#39;{$code}&#39;";
if($db->Query($sql,0))
{
 echo "OK";
}
else
{
 echo "NO";
}

ログイン後にコピー

詳細ページを見るxiangqing.php

<?php
$code = $_POST["code"];
include("../fengzhuang/DBDA.class.php");
$db = new DBDA();
$sql = "select * from nation where code=&#39;{$code}&#39;";
echo $db->StrQuery($sql);

ログイン後にコピー

この記事の内容は以上です。皆さんの学習に役立つことを願っています。！

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7480

CakePHP チュートリアル

1377

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

WeChat でブロックされたり削除されたり、永久に追加できなくなったりする可能性があるというのは本当ですか? Apr 08, 2024 am 11:41 AM

1. まず、相手を永久にブロックして削除して永久に追加しないのは間違いで、ブロックして削除した後に相手を追加したい場合は、相手の同意だけが必要です。 2. ユーザーが誰かをブロックすると、相手はユーザーにメッセージを送信したり、ユーザーの友達サークルを表示したり、ユーザーと通話したりすることができなくなります。 3. ブロックとは、ユーザーの WeChat 連絡先リストから相手を削除することを意味するものではありません。 4. ユーザーが相手をブロックした後、ユーザーの WeChat 連絡先リストから相手を削除した場合、削除後に回復する方法はありません。 5. ユーザーが相手を再度友達として追加したい場合は、相手が同意してユーザーを再度追加する必要があります。

Douyin でログインしたデバイスを削除する手順を確認してください。 Mar 26, 2024 am 09:01 AM

1. まず、Douyin アプリをクリックして開き、[Me] をクリックします。 2. 右上隅にある三点アイコンをクリックします。 3. クリックして[設定]に入ります。 4. [アカウントとセキュリティ]をクリックして開きます。 5. [デバイス管理にログイン]を選択してクリックします。 6. 最後に、デバイスをクリックして選択し、[削除]をクリックします。

TikTokのチャット履歴を完全に削除する方法 May 07, 2024 am 11:14 AM

1. Douyin アプリを開き、インターフェイスの下部にある [メッセージ] をクリックし、削除する必要があるチャット会話エントリをクリックします。 2. 任意のチャット記録を長押しし、[複数選択]をクリックし、削除したいチャット記録にチェックを入れます。 3. 右下隅の [削除] ボタンをクリックし、ポップアップウィンドウで [削除の確認] を選択して、これらのレコードを完全に削除します。

TikTokで他の人にファイルを送信するにはどうすればよいですか?他の人に送信したファイルを削除するにはどうすればよいですか? Mar 22, 2024 am 08:30 AM

Douyin では、ユーザーは自分の人生の詳細や才能を共有するだけでなく、他のユーザーと交流することもできます。このプロセスでは、写真やビデオなどのファイルを他のユーザーに送信する必要がある場合があります。では、Douyin で他の人にファイルを送信するにはどうすればよいでしょうか? 1.Douyin で他の人にファイルを送信するにはどうすればよいですか? 1. Douyin を開き、ファイルを送信するチャットインターフェイスに入ります。 2. チャットインターフェイスの「+」記号をクリックし、「ファイル」を選択します。 3. ファイルオプションで、写真、ビデオ、オーディオ、その他のファイルの送信を選択できます。送信したいファイルを選択後、「送信」をクリックします。 4. 相手がファイルを受け入れるまで待ちます。相手がそれを受け入れると、ファイルは正常に転送されます。 2.Douyin で他の人に送信したファイルを削除するにはどうすればよいですか? 1. Douyin を開き、送信したテキストを入力します。

小紅書に関する他の人の削除されたコメントを取得するにはどうすればよいですか?他の人のコメントを削除した場合も表示されますか？ Mar 21, 2024 pm 10:46 PM

小紅書は人気のあるソーシャル電子商取引プラットフォームであり、ユーザー間のインタラクティブなコメントはプラットフォーム上でのコミュニケーション手段として不可欠です。場合によっては、自分のコメントが他の人によって削除されていることがわかり、混乱することがあります。 1. 小紅書で他の人が削除したコメントを取得するにはどうすればよいですか?コメントが削除されたことに気付いた場合は、まずプラットフォーム上で関連する投稿や製品を直接検索して、コメントがまだ見つかるかどうかを確認してください。コメントが削除された後も表示される場合は、元の投稿の所有者によって削除された可能性があります。この時点で、元の投稿の所有者に連絡して、コメントを削除した理由を尋ね、コメントの復元をリクエストしてみてください。コメントが完全に削除され、元の投稿で見つからない場合、プラットフォーム上でコメントが復元される可能性は比較的低いです。他の方法を試すこともできます

Xianyuで自分のIDを確認する方法_Xianyuで自分のニックネームを確認する方法の紹介 Mar 22, 2024 am 08:21 AM

Xianyu は取引プラットフォームなので、使用する前にアカウントに登録してログインする必要があります。ユーザーは自分のアカウントに ID 名を設定できます。自分の ID が何であるかを確認したい場合はどうすればよいですか?以下で一緒に調べてみましょう！ Xianyuで個人のニックネームを表示する方法の紹介. まず、Xianyuアプリを起動し、ホームページに入ったら、アイドル販売、メッセージ販売、私のページに切り替えて、右下の[私の]オプションをクリックしてください。 2. 次に、マイページの左上隅にある [アバター] をクリックする必要があります; 2. 次に、個人のホームページページに移動すると、さまざまな情報が表示されます。ここで [情報の編集] ボタンをクリックする必要があります; 4.最後に、「後で情報を編集するページで確認できます」をクリックします。

NetEase Cloud Musicで音楽ランキングを確認する場所_NetEase Cloud Musicで音楽ランキングを確認する方法 Mar 25, 2024 am 11:40 AM

1. 電話の電源を入れた後、NetEase Cloud Music を選択します。 2. ホームページに入ると「ランキング一覧」が表示されますので、クリックしてエントリーしてください。 3. ランキングリストで任意のリストを選択し、[新しい曲リスト]をクリックします。 4. お気に入りの曲を選択してクリックします。 5. 前のページに戻って、さらにリストを表示します。

PHP の実践的なヒント: コードの最後のセミコロンを削除する Mar 27, 2024 pm 02:24 PM

PHP の実践的なヒント: コード内の最後のセミコロンを削除する PHP コードを作成するとき、コード内の最後のセミコロンを削除する必要がある状況によく遭遇します。これは、コピー＆ペーストにより余分なセミコロンが導入されるため、またはコードスタイルと構造を最適化するためである可能性があります。この記事では、PHP コードの最後のセミコロンを削除するいくつかの方法と具体的なコード例を紹介します。方法 1: substr 関数を使用する substr 関数は、文字列から指定された長さの部分文字列を返すことができます。我々はできる

See all articles

Ajaxでデータ削除機能と詳細表示機能を実装

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック