首页用jq 和ajax写一个前端列表展示姓名，年龄，身高

用jq 和ajax写一个前端列表展示姓名，年龄，身高

时间: 2024-02-23 22:58:39 浏览: 80

以下是使用jQuery和Ajax实现前端列表展示姓名、年龄、身高的示例代码： HTML代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>人员信息列表</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <h1>人员信息列表</h1> <table id="person-table"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>身高(cm)</th> </tr> </thead> <tbody> </tbody> </table> </body> </html> ``` JavaScript代码： ```javascript $(document).ready(function() { $.ajax({ url: 'person.json', // 人员信息JSON文件的URL dataType: 'json', success: function(data) { var tableRows = ''; $.each(data, function(key, value) { tableRows += '<tr><td>' + value.name + '</td><td>' + value.age + '</td><td>' + value.height + '</td></tr>'; }); $('#person-table tbody').append(tableRows); }, error: function(jqXHR, textStatus, errorThrown) { console.log('Error: ' + textStatus + ' - ' + errorThrown); } }); }); ``` 在这个示例中，我们使用jQuery的`$.ajax()`函数来从一个名为`person.json`的JSON文件中获取人员信息数据。当数据成功获取后，我们使用`$.each()`函数来遍历数据，并使用字符串拼接的方式构建人员信息列表的HTML代码。最后，我们将HTML代码插入到表格的`<tbody>`元素中。如果获取数据失败，则在控制台输出错误信息。

阅读全文