• 案例:用ajax get方法 查询用户列表


    html文件

     

    <body>

    <div id="d1"></div>

    <button onclick="getlist()">获取用户列表</button>

    <table id="content" border="1px">

    <thead>

    <td>uid</td>

    <td>uname</td>

    <td>upwd</td>

    <td>email</td>

    <td>phone</td>

    <td>avatar</td>

    <td>user_name</td>

    <td>gender</td>

    </thead>

    </table>

    <script>

    function getlist(){

    //创建异步对象

    var xhr=new XMLHttpRequest();

    //监听获取响应

    xhr.onreadystatechange=function(){

    if(xhr.readyState==4&&xhr.status==200){

    var result=xhr.responseText;

    //得到响应数据,使用dom把结果放进div

    var arr=JSON.parse(result);

    console.log(arr);

    for(var i=0;i<arr.length;i++){

    content.innerHTML+=`

    <tr>

    <td>${arr[i].uid}</td>

    <td>${arr[i].uname}</td>

    <td>${arr[i].upwd}</td>

    <td>${arr[i].email}</td>

    <td>${arr[i].phone}</td>

    <td>${arr[i].avatar}</td>

    <td>${arr[i].user_name}</td>

    <td>${arr[i].gender}</td>

    </tr>

    `;};

    };

    };

    //打开连接 创建请求

    xhr.open("get","http://127.0.0.1:8080/ajax/userlist",true);

    //发送请求

    xhr.send();

    };

    </script>

  • 相关阅读:
    Linux查看所有用户用什么命令
    Sudoku Solver
    Restore IP Addresses
    Implement strStr()
    Insert Interval
    Recover Binary Search Tree
    First Missing Positive
    Rotate List
    Longest Palindromic Substring
    4Sum
  • 原文地址:https://www.cnblogs.com/sugartang/p/10967501.html
Copyright © 2020-2023  润新知