Ajax+bootstrap優化網頁使用者體驗的步奏

這次帶給大家Ajax+bootstrap優化網頁使用者體驗的步奏，Ajax+bootstrap優化網頁使用者體驗的注意事項有哪些，以下就是實戰案例，一起來看一下。

Bookstrap：美化頁面：

Bootstrap是Twitter推出的一個開源的用於前端開發的工具包。

它是由Twitter的設計師Mark Otto和Jacob Thornton合作開發，是一個CSS/HTML框架。

Bootstrap提供了優雅的HTML和CSS規範，它即是由動態CSS語言Less寫成。

Bootstrap一推出後頗受歡迎，一直是GitHub上的熱門開源項目，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該項目。

只需要引用一些定義好的類，也就是class名字，就可以創建出已經有非常漂亮的樣式的網頁，而且支援自適應，是一個很不錯的框架。

呼叫文件：

<link>
 <script></script>
 <script></script>

如果要引用其中一個包含jquery的多個JS文件，那麼jquery文件一定要放在第一位

接下來是表格的美化

條紋表格：

                    

代号	名称	操作

加上詳情按鈕，並改變兩個按鈕樣式，美化；

$.ajax({
   url: "jiazai.php",
//  显示所有的数据不用写data
   dataType: "TEXT",
   success: function (data) {
    var str = "";
    var hang = data.split("|");
    //split拆分字符串
    for (var i = 0; i <td>"
      + lie[0] +
      "</td><td>"
      + lie[1] +
      "</td><td>" +
      "<button>点击删除
</button><button>查看详情</button>" +
      //ids里面存上主键值
      "</td>";
    }
    $("#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 = "<p>代号:"+lie[0]+"</p><p>名称:"+lie[1]"</p>";
      //造字符串
      var str = "<p>代号："+lie[0]+"</p><p>名称："+lie[1]+"</p>";
      $("#nr").html(str);
   }
   });
   //在模态框里面要显示的内容
  })
 }

再來是詳情的處理頁面：

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

這裡把拼接字串，與呼叫的呼叫寫進了封裝類別檔案中，所以直接引用strQuery就好了

#圖:

頁面總程式碼：

表格頁：

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


 
 
 <link>
 <script></script>
 <script></script>



显示数据

                    

代号	名称	操作

 

  

   

    ×     

详情

       

   

   

    关闭    

     <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>" + lie[1] + "<td>" + "<button type=&#39;button&#39; class=&#39;btn btn-info sc&#39; ids=&#39;"+lie[0]+"&#39;>点击删除<button type=&#39;button&#39; class=&#39;btn btn-primary xq&#39; ids=&#39;"+lie[0]+"&#39;>查看详情" + //ids里面存上主键值 ""; } $("#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>名称:"+lie[1]""; //造字符串 var str = "<p>代号："+lie[0]+"<p>名称："+lie[1]+""; $("#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=&#39;{$ids}&#39;";
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 = &#39;{$ids}&#39;";
echo $db->strQuery($sql);

用Bootstrap比正常寫的網頁美觀一些

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

如何用ajax寫登入頁面

#ajax實作分頁和分頁查詢功能的步奏詳解

#

以上是Ajax+bootstrap優化網頁使用者體驗的步奏的詳細內容。更多資訊請關注PHP中文網其他相關文章！