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 이메일의 로그인 입구는 어디에 있나요?

7491

Cakephp 튜토리얼

1377

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

WeChat에서 차단 및 삭제되어 영구적으로 추가될 수 없다는 것이 사실인가요? Apr 08, 2024 am 11:41 AM

1. 우선, 누군가를 영구 차단 및 삭제하고 영구 추가하지 않는 것은 허위입니다. 상대방을 차단하고 삭제한 후 추가하려면 상대방의 동의만 있으면 됩니다. 2. 사용자가 누군가를 차단하면 상대방은 해당 사용자에게 메시지를 보낼 수 없고, 사용자의 친구 서클을 볼 수 없으며, 사용자와 통화할 수 없습니다. 3. 차단은 사용자의 WeChat 연락처 목록에서 상대방을 삭제하는 것을 의미하지 않습니다. 4. 상대방을 차단한 후 자신의 위챗 연락처 목록에서 상대방을 삭제한 경우, 삭제 후 복구할 수 있는 방법이 없습니다. 5. 상대방을 다시 친구로 추가하려면 상대방이 동의한 후 다시 친구를 추가해야 합니다.

Douyin에 로그인된 장치를 삭제하는 단계를 확인하세요. Mar 26, 2024 am 09:01 AM

1. 먼저 클릭하여 Douyin 앱을 열고 [나]를 클릭하세요. 2. 오른쪽 상단에 있는 점 3개 아이콘을 클릭하세요. 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을 열고 보낸 문자를 입력하세요.

Xiaohongshu에서 다른 사람이 삭제한 댓글을 어떻게 검색할 수 있나요? 다른 사람의 댓글이 삭제되면 표시되나요? Mar 21, 2024 pm 10:46 PM

Xiaohongshu는 인기 있는 소셜 전자상거래 플랫폼으로, 사용자 간의 쌍방향 댓글은 플랫폼에서 없어서는 안될 커뮤니케이션 방법입니다. 때때로 우리의 댓글이 다른 사람에 의해 삭제되어 혼란스러울 수 있습니다. 1. Xiaohongshu에서 다른 사람이 삭제한 댓글을 어떻게 검색할 수 있나요? 댓글이 삭제된 것을 발견하면 먼저 플랫폼에서 관련 게시물이나 제품을 직접 검색하여 해당 댓글을 찾을 수 있는지 확인할 수 있습니다. 삭제 후에도 댓글이 계속 표시된다면 원래 게시물 소유자가 삭제했을 수 있습니다. 이때 원래 게시물 소유자에게 연락하여 댓글 삭제 이유를 문의하고 댓글 복원을 요청할 수 있습니다. 댓글이 완전히 삭제되어 원래 게시물에서 찾을 수 없는 경우, 해당 댓글이 플랫폼에 복원될 가능성은 상대적으로 희박합니다. 다른 방법을 시도해 볼 수 있습니다.

Xianyu에서 자신의 ID를 확인하는 방법_Xianyu에서 개인 닉네임을 확인하는 방법 소개 Mar 22, 2024 am 08:21 AM

Xianyu는 거래 플랫폼으로서 사용하기 전에 계정에 등록하고 로그인해야 합니다. 사용자는 자신의 계정에 대한 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 버전

뜨거운 주제