ajax交互接收json数据

最新推荐文章于 2024-05-16 13:55:28 发布

qq_39125445

最新推荐文章于 2024-05-16 13:55:28 发布

阅读量1.6k

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/qq_39125445/article/details/82764586

版权

Ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

接上文ajax接收文本信息，此章接收json数据，分为单个用户和多个用户

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>ajax请求json数据</title>
  </head>
  <body>
    <button type="button" name="button1" id="button1">请求单个用户</button>
    <button type="button" name="button2" id="button2">请求多个用户</button>
    <br>
    <h1>单个用户请求的数据</h1>
    <div id="user">
      序列号码：<input type="text" name="" value="" id="user1">
      性别：<input type="text" name="" value="" id="user2">
      身高：<input type="text" name="" value="" id="user3">
    </div>
    <h1>所有用户数据</h1>
    <div id="users">

    </div>
    <script type="text/javascript">

    //请求一个用户
      document.getElementById("button1").addEventListener("click",loadUser);
      //定义loadUser函数
      function loadUser(){
        var xhr1=new XMLHttpRequest();
        xhr1.open("GET","user.json",true);
        //加载方式
        xhr1.onload=function(){
          if(this.status==200){
            //拿到的数据解析成对象
            var user=JSON.parse(this.responseText);
            document.getElementById("user1").value=user.id;
            document.getElementById("user2").value=user.sex;
            document.getElementById("user3").value=user.height;
          }
        }
        xhr1.send();
      }

     //请求多个用户
      document.getElementById("button2").addEventListener("click",loadUsers);
      function loadUsers(){
        var xhr2=new XMLHttpRequest();
        xhr2.open("GET","users.json",true);
        xhr2.onload=function(){
          var users=JSON.parse(this.responseText);
          console.log(users);
          var output='';
          for(let i in users){
            output+=users[i].id+users[i].name+users[i].email;
          }
          document.getElementById("users").innerHTML=output;
        }
        xhr2.send();
      }
    </script>
  </body>
</html>

qq_39125445

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
ajax交互接收json数据

接上文ajax接收文本信息，此章接收json数据，分为单个用户和多个用户&lt;!DOCTYPE html&gt;&lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;ajax请求json数据&lt;/title&
复制链接

扫一扫

专栏目录