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 id="详细信息">详细信息</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);

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

関連する推奨事項:

ajax シリーズの最初の記事で XHR オブジェクトを深く理解する

Ajax とユーザーの対話のための JSON データストレージ形式

ajax の複数リクエストの問題について

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

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化：現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

javascriptの分解：それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

pythonまたはjavascriptの方がいいですか？Apr 06, 2025 am 12:14 AM

Pythonはデータサイエンスや機械学習により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、簡潔な構文とリッチライブラリエコシステムで知られており、データ分析とWeb開発に適しています。 2。JavaScriptは、フロントエンド開発の中核です。 node.jsはサーバー側のプログラミングをサポートしており、フルスタック開発に適しています。

JavaScriptをインストールするにはどうすればよいですか？Apr 05, 2025 am 12:16 AM

JavaScriptは、最新のブラウザにすでに組み込まれているため、インストールを必要としません。開始するには、テキストエディターとブラウザのみが必要です。 1）ブラウザ環境では、タグを介してHTMLファイルを埋め込んで実行します。 2）node.js環境では、node.jsをダウンロードしてインストールした後、コマンドラインを介してJavaScriptファイルを実行します。

See all articles