我想在 div 标签中显示来自 JSON 的数据

Question

我在从 JSON 获取数据以将其显示在 html 元素上时遇到问题。 我尝试了很多方法，但都不起作用这是我的代码：

我的APP.JS

$(document).ready(function() {
  $(function() {
    switch (menu) {
      case 'sign in':
        $('#signin').addClass('active');
        break;

      case 'vendors':
        $('#vendors').addClass('active');
        break;

      case 'view passports':
        $('#listpassports').addClass('active');
        break;

      case 'contact':
        $('#contact').addClass('active');
        break;

      case 'home':
        $('#home').addClass('active');
        break;
    }
  });

  AOS.init({
      'duration': 1250
    }
  );

  var jsonUrl = '';

  if (window.categoryID == '') {
    jsonUrl = window.contextRoot + '/json/data/all/passbeers';
  } 
  else {
    jsonUrl = window.contextRoot + '/json/data/category/' + window.categoryID + '/passbeers';
  }
});

JSON控制器

package com.itconnect.lisboabeerpassport.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.itconnect.lisboabeerpassportbackend.dao.PassbeerDAO;
import com.itconnect.lisboabeerpassportbackend.dto.Passbeer;

@Controller
@RequestMapping("json/data")
public class JsonDataController 
{
  @Autowired
  private PassbeerDAO passbeerDAO;

  @RequestMapping("/all/passbeers")
  @ResponseBody
  public List < Passbeer > getAllPassbeer() {
    return passbeerDAO.listActivePassbeer();
  }

  @RequestMapping("/category/{id}/passbeers")
  @ResponseBody
  public List < Passbeer > getPassbeerByCategory(@PathVariable int id) {
    return passbeerDAO.listActivePassbeersByCategory(id);
  }
}

HTML 显示 JSON 数据的页面

<div class="container">

  <%@include file="./shared/navbar.jsp"%>

    <c:if test="${userclickAllpassbeers == true}">
      <script>
        window.categoryID = '';
      </script>
    </c:if>

    <c:if test="${userclickSingleCategoryPassbeer == true}">
      <script>
        window.categoryID = '${category.id}';
      </script>
    </c:if>

    <div class="row">
      <div class="col-sm-12 text-center font-weight-normal">
        <h2 class="cat_">CATEGORIES</h2>
      </div>
    </div>

    <div class="row">
      <c:forEach items="${categories}" var="category">
        <div class="col-lg-2 col-sm-4 mb-4 mx-auto">
        
          <!-- Portfolio item 2-->
          
          <div class="portfolio-item">
            <img class="img-fluid" src="${contextRoot}/resources/img/${category.imageURL}" "
                        alt="... " />
            
                    </a>
          
            <div class="portfolio-caption ">
              <div class="portfolio-caption-heading ">
                <h5 class="card-title text-center ">
                  <a href="# " class="btn btn-primary "> ${category.name} PASS </a>
                </h5>
              </div>
            </div>
          </div>
        </div>
      </c:forEach>
      </div>
    
      <div class="row ">
        <div class="product-box col-md-4 ">
          <div class="product-inner-box position-relative ">
            <div class="icons position-absolute top-0 start-0 ">
              <a href="# " class="text-decoration-none "><i class="fa-solid fa-eye "></i></a>
            </div>
          
            <!-- end /icons -->
            <!-- end /icons -->
          
            <img src="${contextRoot}/resources/img/portugal-passport.png "/>
    
          <div class="cart-btn ">
              <button class="btn btn-success shadow-sm "><i class="fa-solid fa-cart-shopping "></i>Add to cart</button>
            </div>
          
            <!-- end /cart-btn -->
          
          </div>
        
          <!-- end /product-inner-box -->
    
          <div class="product-info ">
            <div class="product-name ">
              <spam>Premium Passport</spam>
            </div>
    
          <!-- end product name -->
    
            <div class="product-price ">
              $<spam>13</spam>
            </div>
            
          <!-- end product price -->
          
          </div>
          
        <!-- end product-info -->
        
        </div>
        
      <!-- end product-box  -->
      
      </div>
    
      <!-- end div show passports -->
    
      <div class="row ">
        <div class="col-lg-12 ">
          <div id="passbeerimage "></div>
        </div>
      </div>
  </div>

我需要帮助，因为找不到办法做到这一点。

我尝试使用

$.ajax({  dataType: "json",  url: url,  data: data,  success: success});

但我想要获取 JSON 数据并将其显示在 html 标签上的工作方式

Answer 1

我有一个解决方案，如何获取 JSON 数据，然后使用 Vanilla JS 更新到 HTML 元素，然后我制作了自己的示例作为参考，请按照以下步骤操作

1.创建一个名为index.html的HTML文件

<!DOCTYPE html>
<html>
<body>
<div id="root">
    <p id="name">
        Name: {name}
    </p>
    <p id="birthdate">
        Birthdate:  {birthdate}
    </p>
    <p id="age">
        Age: {age}
    </p>
    <p id="address">
        Location: {location}
    </p>
</div>
<script src="parser.js" type="text/javascript"></script>
</body>
</html>

2.其次创建一个名为parser.js的JavaScript文件

// Initialize the headers
let init = {
    method: "GET",
    headers: {
        "Content-Type": "application/json"
    },
    mode: "cors",
    cache: "default"
};

let parseJSON = new Request("data.json", init);

// Use Fetch() API to get JSON data and update to the HTML element.
fetch(parseJSON).then((response) => {
return response.json();
}).then((data) => {
    let name = document.querySelector("#name");
    let birthdate = document.querySelector("#birthdate");
    let age = document.querySelector("#age");
    let adddress = document.querySelector("#location");

    name.textContent = `Name: ${data.name}`;
    birthdate.textContent = `Birthdate: ${data.birthdate}`;
    age.textContent = `Age: ${data.age}`;
    address.textContent = `Location: ${data.address}`;
});

3.最后创建JSON文件名为data.json

{
    "name": "Yer",
    "birthdate": "January 1, 2003",
    "age": "19",
    "address": "Philippines"
}