ajax.js

// 通过解构的方式声明的，并且当methon没有收到传值，默认methon为get
    // success 数据下载成功以后执行的函数
    // error 数据下载失败以后执行的函数
        function $ajax({methon="get",url,data,success,error}){
            var xhr=null;
            try{
                xhr=new XMLHttpRequest();
            }catch(error){
                xhr=new ActiveXObject("Microsoft.XMLHTTP");
            }
            
            // 判断是否有数据要传，有的话……
            if(data){
                data=querystring(data);
                // 则用户要传的数据。可以直接写成对象形式，不用手动写成字符串
            }
            // get请求，并且有数据要传输。
            
            if(methon == "get" && data){
                url +="?"+data;
            }
            
            xhr.open(methon,url,true); //true：是否异步请求————是
            
            if(methon=="get"){
                xhr.send();
            }else{
                xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
                xhr.send(data);
            }
            
            
            
            
            // 等待数据响应
            xhr.onreadystatechange = function(){
                if(xhr.readyState ==4){
                    if(xhr.status==200){
                        // 将得到的结果，显示在alert弹窗里
                        if(success){
                            success(xhr.responseText);
                        }
                        
                    }else{
                        if(error){
                            error("Error:"+xhr.status);
                        }
                       
                    }
                }
            }
        }
        
        function querystring(obj){
            var str ="";
            for(var attr in obj){
                str +=attr+"="+obj[attr]+"&";
                // 使用 for in 对 对象obj进行遍历，拿到对象的键和值。
            }
            return str.substring(0,str.length-1);
        }

config.php

<?php

$link = mysqli_connect("localhost","root","123456");

?>

?admin_user.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" title="" type="" />
    
    <script src="newajax.js"></script>
    <script type="text/javascript" charset="utf-8">
        window.onload=function(){
            var btn1 =document.getElementById("btn1");
            var t1 =document.getElementById("t1");
            btn1.onclick =function(){
                $ajax({
                    method:"get",
                    url:"admin_user.php",
                    success:function(result){
                        // alert(result);
                        var arr= JSON.parse(result);   //将result结果转回数据结构（数组）
                        // alert(arr);
                        // alert(arr[0].id);
                        var str='';
                        for (var i = 0; i < arr.length; i++) {
                            str += '<tr><td>'+arr[i].id+'</td><td>'+arr[i].username+'</td><td>'+arr[i].email+'</td><td>'+arr[i].password+'</td></tr>';
                            
                        }
                        // alert(str);
                        t1.innerHTML=str;
                    },
                    error:function(msg){
                        alert(msg);
                    }
                })
            }
        }
    </script>
    
</head>
<body>
    <div class="container">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h2>用户信息表</h2>
            </div>
            <div class="panel-body">
                <button class="btn btn-primary" id="btn1">获取所有用户信息</button>
                <br/>
                <br/>
                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>id</th>
                            <th>用户名</th>
                            <th>邮箱</th>
                            <th>密码</th>
                        </tr>
                    </thead>
                    <tbody id="t1">
                        
                    </tbody>
                </table>
                
            </div>
            
        </div>
        
    </div>
    
    
</body>
</html>

在html中调用封装好的ajax，获取php里的echo输出

admin_user.php


        <?php
        
        include 'config.php';
        if(!$link){
             echo "连接失败";
             exit;
        }
        
        // 设置字符集
        mysqli_set_charset($link,"utf8");
        
        // 选择数据库
        mysqli_select_db($link,"travel");
        
                // 准备sql语句
        $sql="SELECT * FROM user_form";
        
        // 发生sql语句
        $res = mysqli_query($link,$sql);
        // var_dump($res);
        
        $arr = array();  //创建一个空数组
        
        while($row = mysqli_fetch_assoc($res)){
            array_push($arr,$row);   //将从数据库里取出的每一行数据，插入到数组里面
        }
        
        echo json_encode($arr);  //将数据转换成字符串
        
        // 数据取出来之后，关闭数据库
        mysqli_close($link);
        
        
        ?>

在php文件中，通过SELECT语句，获取数据库里的数据

通过echo，输出

??
?