<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> <title>Document</title> </head> <body style="padding-top: 30px;"> <button id="btnJson">JSON</button> <table class="table"></table> <script type="text/javascript"> $(function() { $("#btnJson").click(function() { $.ajax({ type: "get", url: "json.php", dataType: "json", async: true, success: function(data) { var item; $.each(data, function(i, result) { item = "<tr><td>" + result[‘city‘] + "</td><td>" + result[‘phone‘] + "</td></tr>"; $(‘.table‘).append(item); }); } }); }) }) </script> </body> </html>
JSON.PHP
<?php $host = ‘127.0.0.1‘; $user = ‘root‘; $password = ‘‘; $database = ‘yiibaidb‘; $conn = new mysqli($host, $user, $password, $database); if (!$conn) { die("数据库连接失败！" . $conn -> connect_error); } $sql = "SELECT * FROM `offices`"; $result = $conn -> query($sql); $arr = array(); if ($result -> num_rows > 0) { while ($rows = $result -> fetch_assoc()) { $arr[] = $rows; } } echo json_encode($arr); $conn -> close(); ?>
