Ajax boottstrap 은 웹 페이지 를 미화 하고 페이지 의 로 딩 삭제 와 자세 한 정 보 를 볼 수 있 습 니 다.

9753 단어 ajaxbootstrap
Bookstrap:페이지 미화:
부 트 스 트랩 은 트 위 터 가 내 놓 은 프론트 개발 용 공구 꾸러미 다.
트 위 터 의 디자이너 마크 오토 가 Jacob Thornton 과 합작 하여 개발 한 CSS/HTML 프레임 워 크 입 니 다.
Bootstrap 은 동적 CSS 언어 Less 로 작 성 된 우아 한 HTML 과 CSS 규범 을 제공 합 니 다.
부 트 스 트랩 은 출시 되 자마자 인 기 를 끌 었 고 GitHub 의 인기 오픈 소스 프로젝트 였 다.NASA 를 포함 한 MSNBC(마이크로소프트 전국 방송 사)의 Breaking News 는 모두 이 프로젝트 를 사용 했다.
정 의 된 클래스,즉 class 이름 만 인용 하면 이미 매우 아름 다운 스타일 의 웹 페이지 를 만 들 수 있 고 적응 을 지원 하 는 좋 은 프레임 워 크 입 니 다.
파일 호출:

<link href="dist/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css" />
 <script src="jquery-1.11.2.min.js"></script>
 <script src="dist/js/bootstrap.min.js"></script>
jquery 를 포함 하 는 여러 개의 JS 파일 을 참조 하려 면 jquery 파일 을 첫 번 째 에 두 어야 합 니 다.
다음은 표 의 미화 입 니 다.
줄무늬 표:

<table class="table table-striped">
 <thead>
 <tr>
  <td>  </td>
  <td>  </td>
  <td>  </td>
 </tr>
 </thead>
 <tbody id="td">
 </tbody>
</table>
자세 한 단 추 를 추가 하고 두 단추 스타일 을 바 꾸 어 미화 합 니 다.

$.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>" +
      "<button type='button' class='btn btn-info sc' ids='"+lie[0]+"'>    
</button><button type='button' class='btn btn-primary xq' ids='"+lie[0]+"'>    </button>" +
      //ids       
      "</td></tr>";
    }
    $("#td").html(str);
    //  td html     
    addshanchu();
    addxiangqing();
   }
  });
자세 한 클릭 이벤트 보기:

 //        
 function addxiangqing()
 {
  $(".xq").click(function(){
   $('#myModal').modal('show')
   //     
   var ids = $(this).attr("ids");
   $.ajax({
    url:"xiangqing.php",
    data:{ids:ids},
    dataType:"TEXT",
    type:"POST",
     success:function(data){
     //  
      var lie = data.split("^");
      var str = "<div>  :"+lie[0]+"</div><div>  :"+lie[1]"</div>";
      //    
      var str = "<div>  ："+lie[0]+"</div><div>  ："+lie[1]+"</div>";
      $("#nr").html(str);
   }
   });
   //            
  })
 }
그리고 자세 한 처리 페이지 입 니 다:

<?php
$ids = $_POST["ids"];
include ("db.class.php");
$db = new db();
$sql = "select * from min where ids = '{$ids}'";
echo $db->strQuery($sql);
여기에 맞 춤 법 문자열 과 호출 된 호출 을 패키지 파일 에 썼 기 때문에 strQuery 를 직접 참조 하면 됩 니 다.
그림:

페이지 전체 코드:
표 페이지:

<!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 href="dist/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css" />
 <script src="jquery-1.11.2.min.js"></script>
 <script src="dist/js/bootstrap.min.js"></script>
<style type="text/css">
 .xq{
  margin-left: 5px;
 }
</style>
</head>
<body>
<h1>    </h1>
<table class="table table-striped">
 <thead>
 <tr>
  <td>  </td>
  <td>  </td>
  <td>  </td>
 </tr>
 </thead>
 <tbody id="td">
 </tbody>
</table>
<!--   -->
<!--    （Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="myModalLabel">  </h4>
   </div>
   <div class="modal-body" id="nr">
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">  </button>
   </div>
  </div><!-- /.modal-content -->
 </div><!-- /.modal -->
</div>
</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>" +
      "<button type='button' class='btn btn-info sc' ids='"+lie[0]+"'>    </button><button type='button' class='btn btn-primary xq' ids='"+lie[0]+"'>    </button>" +
      //ids       
      "</td></tr>";
    }
    $("#td").html(str);
    //  td html     
    addshanchu();
    addxiangqing();
   }
  });
 }
 //        
 function addxiangqing()
 {
  $(".xq").click(function(){
   $('#myModal').modal('show')
   //     
   var ids = $(this).attr("ids");
   $.ajax({
    url:"xiangqing.php",
    data:{ids:ids},
    dataType:"TEXT",
    type:"POST",
     success:function(data){
     //  
      var lie = data.split("^");
//      var str = "<div>  :"+lie[0]+"</div><div>  :"+lie[1]"</div>";
      //    
      var str = "<div>  ："+lie[0]+"</div><div>  ："+lie[1]+"</div>";
      $("#nr").html(str);
   }
   });
   //            
  })
 }
 //          ：
 function addshanchu()
 {
  //         
  $(".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();
$sql = "select * from min";
$arr = $db->Query($sql);
//  
$str="";
foreach ($arr as $v)
{
 $str = $str.implode("-",$v)."|";
 // - $v   ,    1- 2- , |  ，    1- |2- |
}
$str = substr($str,0,strlen($str)-1);
//     ：  0   ，      -1
//strlen       
echo $str;
처리 페이지 삭제

<?php
include ("db.class.php");
$db = new db();
$ids = $_POST["ids"];
$sql = "delete from min WHERE ids='{$ids}'";
if($db ->Query($sql,0))
{
 echo "ok";
}
else{
 echo "no";
}
자세 한 처리 페이지:

<?php
$ids = $_POST["ids"];
include ("db.class.php");
$db = new db();
$sql = "select * from min where ids = '{$ids}'";
echo $db->strQuery($sql);
Bootstrap 으로 정상 적 으로 쓴 웹 페이지 보다 좀 아름 답 습 니 다.
위 에서 말 한 것 은 편집장 이 소개 한 Ajax boottstrap 이 웹 페이지 를 미화 하고 페이지 의 로 딩 삭제 와 상세 한 정 보 를 조회 하 는 데 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
안 드 로 이 드 사용자 정의 컨트롤 깊이 학습 안 드 로 이 드 생 성 랜 덤 인증 코드
Android TextView 에서 텍스트 클릭 으로 텍스트 이동(코드 간단)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage