Ajax allows you to load pages, delete pages, view detailed information, and beautify bootstrap pages.

Ajax allows you to load pages, delete pages, view detailed information, and beautify bootstrap pages.

Some programmers may not be very good at Photoshop, so in order to beautify the page, we can use the bootstrap tool to make it more beautiful than we did before,

Today, I used bootstrap to beautify the display table and optimize the ajax part, which looks clearer.

I did not download the bootstrap package and directly referenced it from the webpage

1 <script src="jquery-3.1.1.min.js"></script>2     <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">3     <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Note: To reference one of multiple JS files containing jquery, The jquery file must be placed first.

Below is the page where I beautify the displayed table and use the striped table, which is relatively more beautiful.

 

<H2> content loading 
 
The ajax part written yesterday was also optimized to prevent the program from running due to problems such as too many parentheses. php, shanchu. php has already been written. I will check xiangqing again today. php
1 <? Php 2 header ("Content-type: text/html; charset = UTF-8"); 3 4 $ ids =$ _ POST ["ids"]; 5 6 include ("DADB. class. php "); 7 $ db = new DADB (); 8 $ SQL =" select * from fruit where ids = '{$ ids }'"; 9 $ arr = $ db-> Query ($ SQL, 1); 10 11 $ str = ""; 12 foreach ($ arr as $ v) 13 {14 $ str = $ str. implode ("^", $ v ). "|"; // use "|" to connect each row. In this way, an extra "|" 15} 16 $ str = substr ($ str, 0, strlen ($ str)-1); // Delete 17 echo $ str; 18?>
 
The ajax code is as follows:
 
1 <script type = "text/javascript"> 2 Load (); 3 function Load () {4 $. ajax ({5 url: "jiazaiym. php ", 6 dataType:" TEXT ", 7 success: function (data) {8 // alert (data); 9 var str =" "; 10 var hang = data. split ("|"); 11 12 for (var I = 0; I 
 
The html code of the modal box is as follows. Click to view the code. The modal box is displayed:
 
 
1 <div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true"> 2 <div class = "modal-dialog"> 3 <div class = "modal-content"> 4 <div class = "modal-header"> 5 <button type = "button "class =" close "data-dismiss =" modal "aria-hidden =" true "> & times; </button> 6 

 
The page is as follows:
 
In this way, the page looks much more beautiful, and the code is encapsulated in a neat and orderly manner in different ways, which does not seem a headache.