Heim > Web-Frontend > js-Tutorial > Ajax+Bootstrap-Schritte zur Optimierung der Webbenutzererfahrung

Ajax+Bootstrap-Schritte zur Optimierung der Webbenutzererfahrung

php中世界最好的语言
Freigeben: 2018-04-02 11:21:56
Original
1888 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Schritte von Ajax+Bootstrap vorstellen, um die Web-Benutzererfahrung zu optimieren. Was sind die Vorsichtsmaßnahmen für Ajax+Bootstrap, um die Web-Benutzererfahrung zu optimieren? sind praktische Fälle. Stehen Sie auf und werfen Sie einen Blick darauf.

Bookstrap: Verschönern Sie die Seite:

Bootstrap ist ein von Twitter gestartetes Open-Source-Toolkit für die Front-End-Entwicklung.

Es wurde von den Twitter-Designern Mark Otto und Jacob Thornton entwickelt und ist ein CSS/HTML-Framework.

Bootstrap bietet elegante HTML- und CSS-Spezifikationen, die in der dynamischen CSS-Sprache Less geschrieben sind.

Bootstrap erfreut sich seit seiner Einführung großer Beliebtheit und ist ein beliebtes Open-Source-Projekt auf GitHub, darunter MSNBC (Microsoft National Broadcasting Company) Breaking News der NASA.

Sie müssen nur auf einige definierte Klassen verweisen, nämlich auf Klassennamen, um eine Webseite mit einem sehr schönen Stil zu erstellen. Es unterstützt auch die Selbstanpassung und ist ein sehr gutes Framework.

Aufrufdatei:

<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>
Nach dem Login kopieren
Wenn Sie auf eine der mehreren JS-Dateien verweisen möchten, die jquery enthalten, muss die jquery-Datei zuerst platziert werden.

Als nächstes ist die Verschönerung des Tisches

Gestreifter Tisch:

<table class="table table-striped">
 <thead>
 <tr>
  <td>代号</td>
  <td>名称</td>
  <td>操作</td>
 </tr>
 </thead>
 <tbody id="td">
 </tbody>
</table>
Nach dem Login kopieren
Fügen Sie die Schaltfläche „Details“ hinzu und ändern Sie die Stile der beiden Schaltflächen zum Verschönern; > Klicken Sie auf das Ereignis, um Details anzuzeigen:

$.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();
   }
  });
Nach dem Login kopieren
Dann gibt es die detaillierte Verarbeitungsseite:

 //给查看详情加事件
 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);
   }
   });
   //在模态框里面要显示的内容
  })
 }
Nach dem Login kopieren
Hier werden die Spleißzeichenfolge und der Aufruf in die Kapselungsklassendatei geschrieben, also Just strQuery direkt zitieren

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

Gesamtseitencode:

Tabellenseite:

Laden:




 
 无标题文档
 <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(){    $('#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);    }    });    //在模态框里面要显示的内容   })  }  //把删除事件封装成方法:  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>
Nach dem Login kopieren
Verarbeitungsseite löschen

<?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;
Nach dem Login kopieren
Details zur Verarbeitungsseite:

<?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";
}
Nach dem Login kopieren
Mit Bootstrap geschriebene Webseiten sind schöner als normale Seiten

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
<?php
$ids = $_POST["ids"];
include ("db.class.php");
$db = new db();
$sql = "select * from min where ids = &#39;{$ids}&#39;";
echo $db->strQuery($sql);
Nach dem Login kopieren
Nach dem Login kopieren

Empfohlene Lektüre:

So schreiben Sie eine Anmeldeseite mit Ajax

Detaillierte Erläuterung der Schritte zur Implementierung von Ajax Paging- und Paging-Abfragefunktionen

Das obige ist der detaillierte Inhalt vonAjax+Bootstrap-Schritte zur Optimierung der Webbenutzererfahrung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage