javascript - 在 JQuery 中使用 JSON 数组

标签 javascript jquery html ajax json

我在 http://localhost:8080/CRUDWebAppMavenized/persons 上有一个静态 Web 服务,它输出一个 json 数组。我在 jquery 中使用 AJAX,我想在 HTML 表中显示 json 数组。但我无法让它显示在 html 表中。我将发布 html、javascript 代码和 json 数组代码。

index3.html HTML 文件。用于在浏览器中显示学生信息。

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="engine.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    </head>
    <body>
        <table id="blogTable">
            <tr>
                <th>studentId</th>
                <th>firstname</th>
                <th>lastname</th>
                <th>yearLevel</th>
            </tr>
        </table>
    </body>
</html>

engine.js(使用 Jquery) AJAX调用,然后将代码放在html文件的table标签中。

$(document).ready(function () {
    $.ajax({
        url: 'http://localhost:8080/CRUDWebAppMavenized/persons',
        type: 'GET',
        dataType: 'json',
        success: function (result) {
            var insert = '';
            $.each(result, function (index, item) {
                insert += '<tr><td>' + item.studentId + '</td><td>' + item.firstname + '</td><td>' + item.lastname + '</td><td>' + item.yearLevel + '</td></tr>';
            });
            $('#blogTable tr:last').after(insert);
        }
    });
});

JSON 数组 来自 Web 服务 URL 的 JSON 数组。这是由网络应用程序生成的。

[
    {
        "studentId": 5,
        "firstname": "bro",
        "lastname": "oy",
        "yearLevel": 0
    },   
    {
        "studentId": 6,
        "firstname": "lol",
        "lastname": "keke",
        "yearLevel": 0 
    },
    {
        "studentId": 8,
        "firstname": "omg",
        "lastname": "yo",
        "yearLevel":0
    }
]

最佳答案

首先 jquery 然后是 jquery 依赖的 js 就像

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="engine.js"></script>

关于javascript - 在 JQuery 中使用 JSON 数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22832231/

相关文章:

jquery - 在每第三篇文章后添加 div

html - 带有 justify-content :space-evenly, 的 100% 宽度 flex 水平列表如何将元素符号居中放置在空格中?

javascript - 点击功能不适用于第二次点击

javascript - 为什么标量日期 GraphQL 不起作用

javascript - jQuery div 扩展高度不起作用

jquery - 如何隐藏 Bootstrap 多选悬停工具提示?

php - 行已删除,但PHP并未真正从数据库中删除+没有错误消息

javascript - Angular 2自定义复合控件

javascript 通过对象递归

android - 在 Android 应用程序中,我得到的计算字体大小为 2.90909px