首页使用纯html+elementUI写一个ajax获取json数据并处理到表格中的代码

使用纯html+elementUI写一个ajax获取json数据并处理到表格中的代码

时间: 2024-03-21 08:41:20 浏览: 163

好的，以下是一个使用纯 HTML 和 Element UI 的示例，可以通过 AJAX 获取 JSON 数据并将其处理到表格中： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AJAX 获取 JSON 数据并处理到表格中</title>  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body> <div id="app"> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="gender" label="性别"></el-table-column> </el-table> </div>  <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> new Vue({ el: '#app', data: { tableData: [] }, mounted: function() { var self = this; // 使用 AJAX 获取 JSON 数据 var xhr = new XMLHttpRequest(); xhr.open('GET', 'data.json', true); xhr.onload = function() { if (xhr.status === 200) { // 将 JSON 数据处理到表格中 self.tableData = JSON.parse(xhr.responseText); } else { console.error(xhr.statusText); } }; xhr.onerror = function() { console.error(xhr.statusText); }; xhr.send(); } }); </script> </body> </html> ``` 在这个示例中，我们使用了 Element UI 的 `<el-table>` 组件和 `<el-table-column>` 组件来创建表格，并通过 Vue.js 的数据绑定功能将 JSON 数据处理到表格中。我们使用了纯 JavaScript 的 AJAX 技术来获取 JSON 数据，并在获取成功后将其解析成 JavaScript 对象，并将其赋值给 Vue.js 的 data 中的 `tableData` 属性。

阅读全文