文章/答案/技术大牛

发布

如何通过ajax将json对象追加到html表中(响应不可迭代)

要通过 AJAX 将 JSON 对象追加到 HTML 表中，您需要遵循以下步骤：

基础概念

AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。

类型与应用场景

GET 请求：用于从服务器检索数据。
POST 请求：用于向服务器发送数据。
应用场景：实时搜索、动态内容加载、表单提交等。

示例代码

以下是一个简单的示例，展示如何使用 AJAX 将 JSON 对象追加到 HTML 表中：

HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX JSON to Table</title>
</head>
<body>
<table id="data-table" border="1">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

document.addEventListener('DOMContentLoaded', function() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'data.json', true);
    xhr.onload = function() {
        if (this.status == 200) {
            var data = JSON.parse(this.responseText);
            appendDataToTable(data);
        } else {
            console.error('Error fetching data:', this.statusText);
        }
    };
    xhr.onerror = function() {
        console.error('Network Error');
    };
    xhr.send();
});

function appendDataToTable(data) {
    var tableBody = document.querySelector('#data-table tbody');
    data.forEach(function(item) {
        var row = document.createElement('tr');
        row.innerHTML = `
            <td>${item.id}</td>
            <td>${item.name}</td>
            <td>${item.email}</td>
        `;
        tableBody.appendChild(row);
    });
}

JSON 数据 (data.json)

[
    {"id": 1, "name": "Alice", "email": "alice@example.com"},
    {"id": 2, "name": "Bob", "email": "bob@example.com"},
    {"id": 3, "name": "Charlie", "email": "charlie@example.com"}
]

可能遇到的问题及解决方法

响应不可迭代

如果 JSON 数据不是一个数组，而是一个对象，您需要调整 appendDataToTable 函数来处理单个对象而不是数组。

function appendDataToTable(data) {
    var tableBody = document.querySelector('#data-table tbody');
    for (var key in data) {
        if (data.hasOwnProperty(key)) {
            var row = document.createElement('tr');
            row.innerHTML = `
                <td>${key}</td>
                <td>${data[key]}</td>
            `;
            tableBody.appendChild(row);
        }
    }
}

确保您的 JSON 数据格式正确，并且服务器端没有错误。如果问题仍然存在，检查浏览器的开发者工具中的网络请求和控制台日志，以获取更多调试信息。

通过这种方式，您可以有效地将 JSON 数据动态地添加到 HTML 表中，提升网页的交互性和用户体验。

如何通过ajax将json对象追加到html表中(响应不可迭代)

、、、

我希望将数据从JSON对象存储到Html表中。当我在Impl类中控制日志数据时，数据会在我的控制台中打印出来。但我无法将数据放入表中。我的JSON对象- { "vehicleMainBrand":"Lambogini"

浏览 17提问于2021-06-15得票数 0

1回答

将JSON对象传递给Python脚本

、、、、

我想向python脚本传递一个{key : value}形式的JSON对象，其中包含许多元素。我能够通过Ajax发送JSON对象，因为我可以在Ajax函数中的成功响应变量中看到这一点。我想遍历收到的JSON对象元素，并将键和值存储在变量中。稍后，我想在通过该Python脚本打印HTML时使用这些变量。我不知道如何继续和迭

浏览 0提问于2014-04-22得票数 0

4回答

从Ajax请求逐个获得结果

、、

我有以下文件<div><ul></ul></div>main.js type: 'POST',</li>"; }问题是：在我的例子<em

浏览 4提问于2014-10-24得票数 2

回答已采纳

2回答

在搜索和选择经理时，他们可以选择通过一个按钮显示直接报表员工，该按钮触发Javascript函数，该函数向后端发送Ajax post以查询数据库。我们以前使用Jquery在加载时提取数据，但是我想知道是否有一种方法可以从Ajax响应中提取和显示这些数据，并在页面上显示，而不需要刷新呢？另一个障碍似乎是，响应是以列表的方式出现的，因此它不会返回给许多员工；一个可变的响应。如果它更有效，我们也会使用Thymeleaf模板，但是如果我可以让Thymeleaf选择器打开，我就不会出现在这样的实时

浏览 0提问于2018-07-20得票数 1

回答已采纳

2回答

java jstl使用ajax填充表数据

、、

我在spring框架中实现了一个java ee webclient。它从and服务读取数据，并以表格格式显示记录。在此表中，我可以通过选中复选框来删除多条记录。我正在考虑实现ajax来检索表的记录。但是我怎样才能有效地实现它呢？表中的记录是动态的。#table 1 <table><tr><td></td>....

浏览 0提问于2013-07-26得票数 3

回答已采纳

1回答

如何通过Java script为Jinja2变量设置值

、、、

我正在尝试使用一组Jason数据对象填充一个HTML表。为了做到这一点，我使用的是jinja模板。出于数据填充的目的，嗯，我将迭代一个java数据列表，并且我想从一个java脚本函数中设置列表值。HTML模板： <td>object.name</td>{% endfor %} 在AJAX处理

浏览 1提问于2011-12-09得票数 0

回答已采纳

2回答

数组在jQuery中的作用与预期不同

、、、、

我正在用PHP进行jQuery操作，在jQuery将一些$_POST数据传递给PHP之后，PHP会验证这些数据，并准备一个包含所有错误的数组，一旦完成所有验证，就会发现错误的计数，如果大于0时，数组将用json编码并打印在屏幕上。} $messages['elements'] = count($messages); echo json_encodeData = "name=" + name + &qu

浏览 0提问于2014-08-23得票数 3

回答已采纳

0回答

如何从js到html的json响应中获取追加数据

、、

我有一个AJAX，它返回一个JSON，我想将这个JSON响应的结果附加到html字段。Notifications\AdminMessage":__proto__Object:我已经能够通过执行以下操作将").html(result.message.created_at);

浏览 8提问于2017-06-18得票数 1

回答已采纳

2回答

使用Zend创建自定义JSON响应对象

、、、、

我通常会将一个编码的json对象附加到响应体中，但是现在我遇到了需要使用ContextSwitch动作助手的情况。我有一个Zend_Form，它需要三个不同的响应上下文： html -将表单呈现为layout.html-partial中的普通html -- ajax "get“请求将表单呈现为html.json --

浏览 1提问于2011-03-08得票数 9

回答已采纳

3回答

更新模型并在html表中显示更新的数据

、、

我想显示从对控制器method.In的调用中派生出来的新数据--换句话说，我将一些默认数据设置为html表，并且我希望通过按钮单击Ajax调用来更改它。如何做到这一点，我可以共享代码如下： public class Employee public string Name { get; set; }model IEnumerable<datatableViewTocontroller.Models.Employee>

浏览 5提问于2020-07-24得票数 0

回答已采纳

1回答

用Ajax* POST返回处理状态的Jquery/Php*

、、、、

目前，我有一个索引页面，其中曾经提交过JSON数据(文件名、选定的列、工作表、.)通过$.ajax发布到PHP页面进行处理(使用已发布的选择来迭代每一行)。但是，我想从处理页面得到一些进度响应。因为现在，它只是提交和处理背景中的所有内容，而不知道是否已经完成。从一个PHP页面返回多个JSON响应(比如

浏览 3提问于2015-10-01得票数 1

2回答

从AJAX中获取数据并在HTML文档中显示

、、、

我们希望从API调用中带回的XML格式中提取出来，并将其转换为JSON。为了帮助我完成这个操作，我想看看数据是什么样子的，所以我只是想让它打印到HTML文档的正文中。下面是HTML代码，它没有显示任何内容，而是在浏览器中打开响应数据：<head> <script src="https://ajax.googleapis.com/ajax&#x

浏览 2提问于2018-01-11得票数 0

2回答

将jQuery淡入或滚动效果应用于脸书，如新闻馈送

、、、、

新闻提要通过每5秒获取一次新内容来完成它的工作。然而，这是通过“刷新”完整的内容来完成的。我只想将任何新内容添加到新闻提要。我希望使用淡入或滚动效果(jQuery)来实现此效果。div> {ajax.php <?DOCTYPE HT

浏览 0提问于2011-11-20得票数 0

回答已采纳

3回答

如何从服务器上清理不可靠的JSON文件

、

我正在尝试使用来自我们网站的JSON提要，不幸的是，它的格式不正确。我可以通过首先通过$.ajax调用来调用提要来清理提要，但希望能够将清理后的内容传递回迭代，就像它是一个JSON对象一样。$(document).ready(function() // use ajax call as json supplied needs cleaning first $.ajax<

浏览 2提问于2010-06-25得票数 0

1回答

AJAX和CSS vs W3C (在div和<style>中加载外部内容)

、

我在DIV中使用AJAX加载内容时遇到了问题。我们该如何解决这种情况呢？

浏览 1提问于2010-12-20得票数 1

回答已采纳

2回答

数据表格式值与文本对齐

、、

我使用jQuery数据表，并通过ajax将数据填充为json：https://datatables.net/examples/ajax/simple.html var tbl = $('.mytbl').DataTable({ url: "ajax/getData.php",

浏览 20提问于2021-08-13得票数 1

回答已采纳

1回答

刺激ajax:响应不返回服务器响应数据

、、、、

我遇到的问题是ajax:success流程之后的响应是不可迭代的：下面是我的HTML、Rails和刺激代码：<%= form_with model: Article.new, html: { data: { remote: true, type: "html", "action"

浏览 4提问于2022-01-02得票数 1

回答已采纳

2回答

按顺序进行Jquery异步调用

、

我对Jquery很陌生，我有一些代码可以循环遍历数组，并在循环的每次迭代中从ajax请求加载HTML： $.get('/Quote/LoadQuoteItemCost', { 'i': i }, function (html) { // There

浏览 1提问于2015-09-06得票数 0

回答已采纳

1回答

向Google Data Visualization Table添加行

、

我正在尝试添加不同lat集，通过迭代Ajax get响应在google可视化表中很长，看起来只有响应json中的最后一个值被添加到行中，$.ajax({ typeurl: '/api/v1.0/tasks/'+document.getElementById("auto

浏览 5提问于2017-12-22得票数 1

回答已采纳

4回答

Spring MVC + Jquery Ajax显示406错误？

、、、、

form values var education = $('#education').val(); type: "POST", data: "name=" + name: " + respons

浏览 0提问于2013-04-10得票数 0

点击加载更多

如何通过ajax将json对象追加到html表中(响应不可迭代)

基础概念

相关优势

类型与应用场景

示例代码

HTML 结构

JavaScript (script.js)

JSON 数据 (data.json)

可能遇到的问题及解决方法

响应不可迭代

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐