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

Source: Internet
Author: User

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.

 

 

 

 

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.