使用ajax调用将json数据填充到html表中

时间:2017-06-07 10:01:30

标签: jquery

我正在尝试将休息Web服务生成的json数据填充到html表中。这是我的HTML代码

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Employee List</title>
</head>
<body>
    <h1>Employee List</h1>
    <form>
        <table  id= "content">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Age</th>
                <th>Salary</th>
                <th>Address</th>
            </tr>
        </thead>
        <tbody id = "emp">
        </tbody>    
        </table>
    </form>
    <script>

    $(document).ready(function(){
        alert("1");
        var data = $("#employee").val();
        alert("2");
        $.ajax({

            url: '/rest/restemployees',
            type: 'GET',
            dataType: 'JSON',
            success: function(data){
                alert("3");
                $.each(data, function(i,value){
                    $("#content tbody").append("<tr>" + "<td>" + value.id + "</td>" +
                            "<td>" + value.name + "</td>" +
                            "<td>" + value.age + "</td>" +
                            "<td>" + value.salary + "</td>" +
                            "<td>" + value.address + "</td>" + "</tr>")
                });

            },
            error: function(data){
                alert("4");
            }

        });
    });

    </script>
</body>
</html>

请帮帮我

注意:警报仅用于了解流程

内容是表格ID。我不知道错误在哪里。任何人都可以帮我解决这个问题

1 个答案:

答案 0 :(得分:1)

我会做像

这样的事情
success: function(data){
                alert("3");
              $(data).each(function(){ 
                    $('#tbody').append('<tr><td>' + this.id + '</td><td>' + this.name + '</td><td>' + this.age + '</td><td>' + this.salary + '</td><td>' + this.address + '</td></tr>')
                });

而不是给表id只是将id放到你要追加的表体