Home >Web Front-end >JS Tutorial >Ajax bootstrap beautifies web pages and implements code for page loading, deletion and viewing details

Ajax bootstrap beautifies web pages and implements code for page loading, deletion and viewing details

不言Original: 2018-07-02 15:13:261815browse

This article mainly introduces the Ajax bootstrap beautification of web pages and the realization of page loading, deletion and viewing details. It has a certain reference value. Now I share it with you. Friends in need can refer to it.

Bootstrap is An open source toolkit launched by Twitter for front-end development, Bootstrap provides elegant HTML and CSS specifications, which is written in the dynamic CSS language Less. Through this article, I will introduce Ajax bootstrap to beautify the web page and realize the loading, deletion and viewing of the page details. Friends in need can refer to

Bookstrap: Beautify the page:

Bootstrap It is an open source toolkit for front-end development launched by Twitter.

It was developed by Twitter designers Mark Otto and Jacob Thornton and is a CSS/HTML framework.

Bootstrap provides elegant HTML and CSS specifications, which are written in the dynamic CSS language Less.

Bootstrap has been very popular since its launch and has been a popular open source project on GitHub, including NASA's MSNBC (Microsoft National Broadcasting Company) Breaking News.

You only need to reference some defined classes, that is, class names, to create web pages with very beautiful styles. It also supports self-adaptation and is a very good framework.

Calling file:

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

If you want to reference one of the multiple JS files containing jquery, then the jquery file must be placed first

Next It is the beautification of the table

Striped table:

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

Add the details button and change the two button styles to beautify;

$.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();
   }
  });

View the click event of the details:

 //给查看详情加事件
 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);
   }
   });
   //在模态框里面要显示的内容
  })
 }

Next is the detailed processing page:

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

Here the splicing string and the call are written into the encapsulation class file, so just quote strQuery directly

Picture:

Total page code:

Table page:




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

Loading:

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

Delete processing page

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

Details processing page:

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

Web pages written using Bootstrap are more beautiful than those written normally

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Introduction to the implementation of $.fn and image scrolling effects in jquery

Based on JSON format data Introduction to the simple jQuery slide plug-in (jquery-slider)

The above is the detailed content of Ajax bootstrap beautifies web pages and implements code for page loading, deletion and viewing details. For more information, please follow other related articles on the PHP Chinese website!

php json jquery css ajax bootstrap less html 封装字符串 class JS 事件 github

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Introduction to the implementation of $.fn and image scrolling effects in jqueryNext article：Introduction to the implementation of $.fn and image scrolling effects in jquery

See more

Ajax bootstrap beautifies web pages and implements code for page loading, deletion and viewing details

显示数据

详情

Related articles