ajax+ json 显示学生信息小案例

Reliable_

已于 2023-10-30 15:57:51 修改

阅读量378

点赞数

文章标签： ajax json okhttp

于 2023-10-13 19:38:09 首次发布

本文链接：https://blog.youkuaiyun.com/m0_63159216/article/details/133816671

版权

ajax + json

ajax + json 显示学生信息小案例
1 先了解什么是ajax 和 json
2 json
3 显示学生信息

ajax + json 显示学生信息小案例

结果展示，实现下面功能，点击查询学生信息，显示学生的信息。
在这里插入图片描述

1 先了解什么是ajax 和 json

1.1 ajax

简单的来说，ajax就是局部动态刷新

例如网页上的新闻，点击按钮可以动态的的刷新新闻，而网页上的其他信息不变

1.2 使用ajax

使用ajax有三个步骤

步骤一：创建对象

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

步骤二：发出请求

xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();

步骤三：接受响应

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

1.3 ajax小案例

1 新建一个文件1.txt，随便写文字

在这里插入图片描述

2 编写代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
      <button  onclick="f()">点击刷新</button>
      <p id="d">使用ajax前的数据</p>
</body>
</html>
<script>
    //需求：通过点击button，发送异步（ajax）请求
    function f(){
        //创建对象
        var xmlhttp;
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

        //发送请求
        xmlhttp.open("GET","1.txt",true);
        xmlhttp.send();

        //接收响应（js代码）
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("d").innerHTML=xmlhttp.responseText;
            }
        }


    }
</script>

3 结果
在这里插入图片描述

2 json

2.1 什么是json

JSON 是存储和交换文本信息的语法,简单的说json就是传输数据的一种格式。
它能存储数组和对象，因此不需要你去手动的创建对象，易于程序的维护

2.2 基本语法

存储对象就用 { } ，存储数组就用 [ ]

2.3 实例

在这里插入图片描述

3 显示学生信息

现在，我们了解了ajax和json，我们回到开头，完成学生信息的显示

3.1分析

1 首先，需要使用ajax和json技术
2 需要创建一个数组，数组里面有4个对象
3 前端页面写一个表格寻出数据，还有几个按钮绑定事件刷新
4 循环遍历数组里面的对象
5 点击按钮，实现显示数组信息功能

3.2 代码

3.2.1 json文件（文件名需与html引用一致，这里面文件名为 students.json）

{
  "students": [
    {
      "id": 1,
      "name": "张三"
    },
    {
      "id": 2,
      "name": "李四"
    },
    {
      "id": 3,
      "name": "王五"
    },
    {
      "id": 4,
      "name": "赵六"
    },
    {
      "id": 5,
      "name": "郑七"
    }
  ]
}

（注：students.json文件中其实可以将"students"：[ ]去掉，但是如果此文件中还有其他数据，比如教师数据的话，明显就不对了，所以我将最后的数据外面定义了一个学生数组，学生数组里面保存了多个学生数据，这样就比较合理了）
这里面的json文件有多种写法来保存数据，只要遵守json格式就可以。

3.2.2 html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <div style="text-align: center">
      <button  onclick="f()" >查询学生信息</button>
        </div>
          <table border="1" width="400px" align="center">
              <tr>
                  <td>学号</td>
                  <td>姓名</td>
              </tr>
              <tbody id="d"></tbody>
          </table>

</body>
</html>
<script>
    //需求：通过点击button，发送异步（ajax）请求
    function f(){
        //创建对象
        var xmlhttp;
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

        //发送请求
        //students.json需与上面保持一致
        xmlhttp.open("GET","students.json",true);
        xmlhttp.send();

        //接收响应（js代码）
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                var  data = xmlhttp.responseText
                var json = JSON.parse(data)
                var html = "";
                for(var i = 0; i < json.students.length; i ++){
                    html += "<tr><td>" + json.students[i].id + "</td><td>" + json.students[i].name + "</td></tr>"
                    document.getElementById("d").innerHTML = html;

                }
            }
        }
    }

</script>