javascript - 用ajax 请求数据出错

查看:84
本文介绍了javascript - 用ajax 请求数据出错的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问 题

**1.用ajax请求后台数据,第一个按钮获取原json数据,第二个按钮获取处理后的数据显示在表格

结果第一个按钮功能正常,第二个按钮开发者工具报错,代码在下面,测试的截图在下面**

2.代码
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="script/jquery-3.2.1.min.js"></script>
<script>
   $(function (){

$("#button1").click(function () {
$.ajax({
url:"data.txt", //这个是假数据的地址(本地地址)
success:function (data){
$("#div1").empty();
$("#div1").html(data);
}
});
});
//show table
$("#button2").click(function (){
$.ajax({
url:"data.txt", //这个是假数据的地址(本地地址)
async:true,//false同步请求 ture异步请求
dataType:"json",
success:function (data){
var data1=JSON.parse(data);
var tbody = $("#tbody1").empty();
$.each(data1, function(idx,item) {
tbody.append(
"<tr>"+
"<td>" + item.xuhao + "</td>"+
"<td>" + item.name + "</td>"+
"<td>" + item.xingbie + "</td>"+
"<td>" + item.phonenumber + "</td>"+
"<td>" + item.bumen + "</td>"+
"<td>" + item.zhiwei + "</td>"+
"<td>" + item.time + "</td>"+
"<td>" + item.beizhu + "</td>"+
"</tr>"
);
});
}
});
});
});
</script>
</head>
<body>
<input type="button" value="show json" id="button1" />
<div id="div1"></div>
<input type="button" value="show" id="button2" />
<table class="table table-hover" width="80%" cellpadding="0"
cellspacing="0" border="1">
<thead>
<tr>
<td>序号</td>
<td>姓名</td>
<td>性别</td>
<td>手机号码</td>
<td>部门</td>
<td>职位</td>
<td>签到时间</td>
<td>备注</td>
</tr>
</thead>
<tbody id="tbody1"></tbody>
</table>
</body>
</html>
3.截图

请问是哪里出错了?

解决方案

检查一下 json 数据的有效性

这篇关于javascript - 用ajax 请求数据出错的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆