10.25

Ajax

  1. 在HTML文件中创建一个容器,用于展示数据。可以使用<ul><table>等标签来展示数据列表。
  2. 使用JavaScript代码获取数据。可以使用fetch()函数或其他AJAX方法从后端API获取数据。将数据请求发送到后端的URL,并使用GET或POST方法获取数据。
  3. 在JavaScript代码中,使用.then()方法处理从后端返回的数据。将数据转换为JSON格式,并将其存储在一个变量中。
  4. 使用JavaScript代码将数据展示在HTML页面上。可以使用DOM操作方法(如createElement()appendChild()等)来创建HTML元素,并将数据填充到这些元素中。
  5. 将创建的HTML元素添加到步骤1中创建的容器中,以展示数据。
  6. fetch('/api/data') // 发送数据请求到后端API的URL
    .then(response => response.json()) // 将响应转换为JSON格式
    .then(data => {
    // 处理从后端返回的数据
    const dataContainer = document.getElementById('dataContainer');

    // 循环遍历数据,创建HTML元素并填充数据
    data.forEach(item => {
    const listItem = document.createElement('li');
    listItem.textContent = item; // 假设数据是一个字符串数组
    dataContainer.appendChild(listItem); // 将创建的元素添加到容器中
    });
    });

posted @ 2023-10-25 21:55  晨观夕  阅读(5)  评论(0编辑  收藏  举报