JSON文件中的数据渲染到页面(jquery)

首先我们先了解一下需要用到的东西:
①一个含有数据的JSON文件
②一个VS code插件(方法之一)live server(访问本地json文件存在跨域问题)
③一个jquery包
④我们分别采用jquery的each方法和for循环实现遍历

JSON文件

JSON文件中的数据渲染到页面(jquery)_第1张图片

live server插件

①在VS code安装插件

JSON文件中的数据渲染到页面(jquery)_第2张图片

②在引入本地json文件的html文件上单击右键,选择如图的open with Live Server

JSON文件中的数据渲染到页面(jquery)_第3张图片

jquery包

官网下载:https://jquery.com/download/
在这里插入图片描述
引入html文件

<script src="js/jquery-3.4.1.min.js">script>

渲染实现

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>json文件数据渲染title>
  <script src="js/jquery-3.4.1.min.js">script>
  <style>
    td{
      width: 120px;
      padding-left: 35px;
    }
  style>
head>

<body>
  <div>
    <table>
      <thead>
        <tr>
          <td>姓名td>
          <td>身份证td>
          <td>材料td>
          <td>idtd>
        tr>
      thead >
      <tbody id="jsonTip">

      tbody>
    table>
  div>


  <script>
    // 页面加载完后立刻调用getDate方法
    $(function () {
      getData();
    })

    // 获取json文件数据
    function getData(){
      $.getJSON("js/data.json",function(data){
        // 获取数据渲染的位置
          var $jsontip=$("#jsonTip");
          // 定义一个变量存储要显示的数据
          var s="";
          // 清空数据
          $jsontip.empty();
          // 遍历拿到的数据(此处采用each方法,也可以采用for循环)
          $.each(data.rows,function(index,info){
            s = "" + info.RealName + "" + info.CardID + "" +
            info.StuffPath + "" + info.AdminId + "";
            // 将要展示的数据追加到页面
            $jsontip.append(s);
          })
          
        })
    }
    
  script>

body>
html>

讲解each方法:

格式:$(selector).each(function(index,element))
参数:

	①index - 选择器的 index 位置。
	②element - 当前的元素(也可使用 "this" 选择器)。

此处的element(info)拿到的数据如下:
JSON文件中的数据渲染到页面(jquery)_第4张图片

这里也可以使用for循环实现:

<script>
	 for(var i = 0; i < data.total; i++) {
          s = "" + info[i].RealName + "" + info[i].CardID + "" +
            info[i].StuffPath + ""+ "" + info[i].AdminId + "";
          $("#jsonTip").append(s);
        }
script>

你可能感兴趣的:(jquery,json,javascript)