Le bootstrap Ajax embellit les pages Web et permet le chargement, la suppression et l'affichage des détails des pages.-js tutoriel-php.cn

Le bootstrap Ajax embellit les pages Web et permet le chargement, la suppression et l'affichage des détails des pages.

PHPz

Libérer： 2018-10-15 16:18:03

original

1997 Les gens l'ont consulté

Bootstrap est une boîte à outils open source pour le développement front-end lancée par Twitter Bootstrap fournit des spécifications HTML et CSS élégantes, écrites dans le langage CSS dynamique Less. À travers cet article, je présenterai le bootstrap Ajax pour embellir les pages Web et réaliser les détails de chargement, de suppression et d'affichage des pages. Les amis dans le besoin peuvent se référer à

Bookstrap : Embellissez la page :

Bootstrap It est une boîte à outils open source pour le développement front-end lancée par Twitter.

Il a été développé par les concepteurs de Twitter Mark Otto et Jacob Thornton et est un framework CSS/HTML.

Bootstrap fournit des spécifications HTML et CSS élégantes, écrites dans le langage CSS dynamique Less.

Bootstrap est très populaire depuis son lancement et est un projet open source populaire sur GitHub, y compris le Breaking News MSNBC (Microsoft National Broadcasting Company) de la NASA.

Il vous suffit de référencer certaines classes définies, c'est-à-dire les noms de classes, pour créer une page Web avec un très beau style. Il prend également en charge l'auto-adaptation et constitue un très bon framework.

Fichier d'appel :

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

Copier après la connexion

[Recommandations vidéo associées : Tutoriel Bootstrap]

Si vous souhaitez référencer l'un des multiples fichiers JS contenant jquery, le fichier jquery doit être placé en premier

L'étape suivante consiste à embellir le tableau

Tableau rayé :

<table class="table table-striped">
 <thead>
 <tr>
  <td>代号</td>
  <td>名称</td>
  <td>操作</td>
 </tr>
 </thead>
 <tbody id="td">
 </tbody>
</table>

Copier après la connexion

Ajouter un bouton de détail et changer les styles des deux boutons pour embellir

$.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=&#39;button&#39; class=&#39;btn btn-info sc&#39; ids=&#39;"+lie[0]+"&#39;>点击删除
</button><button type=&#39;button&#39; class=&#39;btn btn-primary xq&#39; ids=&#39;"+lie[0]+"&#39;>查看详情</button>" +
      //ids里面存上主键值
      "</td></tr>";
    }
    $("#td").html(str);
    //找到td把html代码扔进去
    addshanchu();
    addxiangqing();
   }
  });

Copier après la connexion

Voir l'événement de clic détaillé :

 //给查看详情加事件
 function addxiangqing()
 {
  $(".xq").click(function(){
   $(&#39;#myModal&#39;).modal(&#39;show&#39;)
   //打开模态框
   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 = "<p>代号:"+lie[0]+"</p><p>名称:"+lie[1]"</p>";
      //造字符串
      var str = "<p>代号："+lie[0]+"</p><p>名称："+lie[1]+"</p>";
      $("#nr").html(str);
   }
   });
   //在模态框里面要显示的内容
  })
 }

Copier après la connexion

Vient ensuite la page de traitement détaillée :

<?php
$ids = $_POST["ids"];
include ("db.class.php");
$db = new db();
$sql = "select * from min where ids = &#39;{$ids}&#39;";
echo $db->strQuery($sql);

Copier après la connexion

Ici, écrivez la chaîne épissée et l'appel dans le fichier de classe encapsulé, il suffit donc de citer directement strQuery

Image :

Code total de la page :

Page de tableau :




 
 无标题文档
 <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>




显示数据
<table class="table table-striped">
 <thead>
 <tr>
  <td>代号</td>
  <td>名称</td>
  <td>操作</td>
 </tr>
 </thead>
 <tbody id="td">
 </tbody>
</table>



 

  

   

    
    
详情
   
   
   
   
    
   
  

 




<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=&#39;button&#39; class=&#39;btn btn-info sc&#39; ids=&#39;"+lie[0]+"&#39;>点击删除</button><button type=&#39;button&#39; class=&#39;btn btn-primary xq&#39; ids=&#39;"+lie[0]+"&#39;>查看详情</button>" +
      //ids里面存上主键值
      "</td></tr>";
    }
    $("#td").html(str);
    //找到td把html代码扔进去
    addshanchu();
    addxiangqing();
   }
  });
 }
 //给查看详情加事件
 function addxiangqing()
 {
  $(".xq").click(function(){
   $(&#39;#myModal&#39;).modal(&#39;show&#39;)
   //打开模态框
   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 = "<p>代号:"+lie[0]+"</p><p>名称:"+lie[1]"</p>";
      //造字符串
      var str = "<p>代号："+lie[0]+"</p><p>名称："+lie[1]+"</p>";
      $("#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>

Copier après la connexion

Chargement :

<?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;

Copier après la connexion

Supprimer la page de traitement

<?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";
}

Copier après la connexion

Page de traitement des détails :

<?php
$ids = $_POST["ids"];
include ("db.class.php");
$db = new db();
$sql = "select * from min where ids = &#39;{$ids}&#39;";
echo $db->strQuery($sql);

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Interaction entre les données Struts2 et Ajax (tutoriel graphique)

Framework MUiajaxDemande d'interface WebService instance_AJAX liée

NatifajaxExemple de chargement de pull-up écrit (tutoriel graphique)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!