displaying database data and the use of the template engine

Thinking analysis

File address: Link: Https://pan.baidu.com/s/1QxHoYfsFXERLmqT1tMbo7Q Password: y89a

Style effects:

Analysis:

① to achieve this effect, we generally need 2 pages, an HTML page for the browser display, a PHP page to receive database data, and to return the received data to the front end.

② at this time, we generally need three steps: First, the use of Ajax to send requests, second, the PHP page to obtain database data, the database data back to the front end, and third, the front end receive back

Data, use the template engine to display the data in a tabular style.

Code Implementation

1. Create a new demo.html file first, and make a good table header:

The code is as follows:

  <TableBorder= "1"Align= "Center"cellspacing= "0">    <caption><H1>Student Data Management</H1></caption>    <thead>      <TR>        <th>School Number</th>        <th>Name</th>        <th>Age</th>        <th>Gender</th>        <th>Mailbox</th>        <th>Phone</th>      </TR>    </thead>    <tbody>          </tbody>  </Table>

2. Send Ajax request to demo.php page

  <Scripttype= "Text/javascript">$.post ('demo.php',function(msg) {Console.log (msg); //Detect code correctness    },'JSON')  </Script>

The demo.php file returns the test code at this time:

<? PHP    Echo 123; ?>

3. demo.php Operation data

<?PHP//echo 123;//link MySQL server$conn=Mysqli_connect(' localhost ', ' root ', ' root ');//Select the database to manipulatemysqli_select_db($conn, ' study ');//Set character setsMysqli_query($conn, ' Set names UTF8 ');//Splicing SQL statements$sql= "SELECT * FROM HF";//Execute SQL statement$result _obj=Mysqli_query($conn,$sql);$arr= []; while($row=Mysqli_fetch_assoc($result _obj)) {  Array_push($arr,$row);//Appends an array of one bar to the back of the $arr}EchoJson_encode ($arr);//close MySQL linkMysqli_close($conn);?>

4, the front-end receive the returned data, converted to JSON format

  <script type= "Text/javascript" >    $. Post (' demo.php ',function(msg) {      console . Log // test    }, ' json ')  </script>

5. Use the template engine to add data to the table

  //introduction of jquery and Template library files<script src= "./jquery.1.11.js" ></script> <script src= "./template-web.js" ></script>//Defining Templates<script type= "text/template" id= "TPL" > <% for(i = 0; i < list.length; i++) {%> <tr> <td><%=list[i].sno%></td> <td><%=list[i].sname%& Gt;</td> <td><%=list[i].sage%></td> <td><%=list[i].sgender%><        /TD> <td><%=list[i].semail%></td> <td><%=list[i].stel%></td> </tr> <%}%> </script> <script type= "Text/javascript" >$.post (' Demo.php ',function(msg) {Console.log (msg); //convert to a two-dimensional array      varList = {"List": Msg}; //Invoke Template      varhtml = template (' TPL ', list); //Add to Tbody$ (' tbody '). HTML (HTML); },' JSON ')  </script>

The results are as follows:

Summary arttemplate template engine

Basic Use steps:

1. using SC Ript Tag introduces arttemplate library file

2. definition label to display the final parsed template information

3. Defines the data required in templates and templates.

   ?① define the data to be displayed in the template, it must be a JSON object

   ?② use the script tag to define the template, type= "text/template" id= "TPL", and use <%=key%> mark All data locations

4. call the template function, parse templates

I was<%=name%>, this year <%=age%>years</script> <--3\ define the required data in templates and templates--<script type= "Text/javascript" >//Defining Data  varinfo = {"Name": "Zhang San", "Age": 23}; //Defining Templates  varstr = template (' TPL ', info); //writes the parsed template string (str) to the DIV in the Web pagedocument.getElementById (' d '). InnerHTML =str; </script> </body>
displaying database data and the use of the template engine