Ajax bookkeeper beautifies webpages and loads, deletes, and views pages.

Ajax bookkeeper beautifies webpages and loads, deletes, and views pages.

Bookdetail: beautify the page:

Bootstrap is an open-source front-end development toolkit launched by Twitter.
It was developed by Twitter designer Mark Otto and Jacob Thornton. It is a CSS/HTML framework.
Bootstrap provides elegant HTML and CSS specifications, which are written by the dynamic CSS language Less.
Since its launch, Bootstrap has become a popular open-source project on GitHub. It is used by Breaking News of NASA's MSNBC (Microsoft National Broadcasting Corporation.
You only need to reference some defined classes, that is, the class name, to create a webpage with a very beautiful style, and support self-adaptation, is a very good framework.

Call file:

 <link href="dist/css/bootstrap.min.css" 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 multiple JS files that contain jquery, The jquery file must be placed first.

Next is the beautification of the table.
Stripe table:

<Table class = "table-striped"> <thead> <tr> <td> Code </td> <td> name </td> <td> operation </td> </tr> </thead> <tbody id = "td"> </tbody> </table>

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

$. Ajax ({url: "jiazai. php ", // display all data without writing data dataType:" TEXT ", success: function (data) {var str =" "; var hang = data. split ("|"); // split the string for (var I = 0; I 
</Button> <button type = 'button 'class = 'btn btn-primary xq 'IDs =' "+ lie [0] +" '> View Details </button>" + // The primary key value stored in ids "</td> </tr> ";} $ ("# td" 2.16.html (str); // find td and throw the html code into addshanchu (); addxiangqing ();}});

Click events for viewing details:

// Add the event function addxiangqing () {$ (". xq "). click (function () {$ ('# mymodal '). modal ('show ') // open the modal box var ids = $ (this ). attr ("ids"); $. ajax ({url: "xiangqing. php ", data: {ids: ids}, dataType:" TEXT ", type:" POST ", success: function (data) {// split var lie = data. split ("^"); var str = "<div> Code:" + lie [0] + "</div> <div> Name: "+ lie [1]" </div> "; // create a string var str =" <div> code: "+ lie [0] +" </div> <div> name: "+ lie [1] +" </div> "; $ ("# nr" character .html (str) ;}}); // the content to be displayed in the modal box })}

The details page is displayed:

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

Here, the concatenated string and the call are written into the encapsulation class file, so you can directly reference strQuery.

Figure:

Total Page code:
Table Page:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> View Code

Load:

<? Phpinclude ("db. class. php "); $ db = new db (); $ SQL =" select * from min "; $ arr = $ db-> Query ($ SQL ); // traverse $ str = ""; foreach ($ arr as $ v) {$ str = $ str. implode ("-", $ v ). "|"; // use-to combine $ v. The combination is 1-red, 2-blue, separated by |, the combination is 1-red | 2-Blue |} $ str = substr ($ str, 0, strlen ($ str)-1); // capture the string: capture the length of the string-1 // strlen to obtain the string length echo $ str;
View Code

Delete processing page

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

 
Details page:

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

The use of booklists is more elegant than normal Web pages.