jqueryajax实例

article/2025/10/6 6:18:10

运用ajax结合dom写的小实例，其中记录了过程中遇到的问题和解决方法

任务要求：
模拟“请求用户列表”，向后台请求，后台会去数据库中将你的用户列表全部查出来，返回很多条记录，现在将记录显示在页面上用表格打印出来

创建index.html和user.json文件及引入jq文件
在这里插入图片描述

原始user.json代码（模拟后台返回的记录)：

{"code":"1","msg":"success","result":[{"userId":1,"userName":"zhangsan","userAge":18,"userSex":true},{"userId":2,"userName":"lisi","userAge":19,"userSex":false},{"userId":3,"userName":"wangwu","userAge":20,"userSex":false}]
}

原始index.html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>实例</title>
</head>
<body><button onclick="queryUser()">查询用户</button><script src="jquery-3.4.1.js"></script><script type="text/javascript">function queryUser(){$.ajax({type:"get",url:"user.json",data:{},success:function(result){console.log(result);testData(result);}});}function testData(result){if(result.code == 1){var table = $('<table align="center" border = "1" width="600px" style="border-collapse: collapse;"></table>')var thead = "<tr><th>用户编号</th><th>用户姓名</th><th>用户年龄</th><th>用户性别</th></tr>"table.append(thead);if(result != null){for (var i = 0;i < result.length; i++){var usex = result[i].userSex ? "男" : "女";var tr = "<tr><td>"+result[i].userId+"</td><td>"+result[i].userName+"</td><td>"+result[i].userAge+"</td><td>"+usex+"</td></tr>";table.append(tr);}}$("body").append(table);}else{alert("暂未查询到用户数据！")}}</script>
</body>
</html>

以上代码出现两个问题

问题一

用谷歌浏览器打开时，会出现如下图问题：

在这里插入图片描述

问题解决：
1、出现该问题是因为出现了跨域，可以查找相关解决跨域方法解决
2、使用vscode编辑器，安装live-server插件，使用如图方法打开html文件，会强制使其在同一个服务器下。

然后选择open with server打开即可

原文链接：https://www.pianshen.com/article/95291791044/

问题二

解决完问题一后会发现，ajax申请成功，但是页面上并没有出现用户信息，只出现了表头

在这里插入图片描述

因为表头已经出现所以把错误范围锁定在遍历数据的过程中

问题解决：

调试代码，观察操作台可知：

在这里插入图片描述

再了解一下json的概念：

JavaScript Object Notation :JavaScript对象表示法(早期：在JavaScript中，用json来表示对象)

可知result是指整个数据，是一个对象，而对象没有长度。所以为了方便起见在设置键名时最好避免这种情况发生

将json里的result更改成data之后更直观

完整代码如下：

user.json代码

{"code":"1",//模拟查成功了，如果没有数据，code应该模拟为0"msg":"success",//没有报错//data为数组，数组里是3个对象"data":[{"userId":1,"userName":"zhangsan","userAge":18,"userSex":true},{"userId":2,"userName":"lisi","userAge":19,"userSex":false},{"userId":3,"userName":"wangwu","userAge":20,"userSex":false}]
}

index.html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>实例</title>
</head>
<body>//设置一个查询按钮<button onclick="queryUser()">查询用户</button><script src="jquery-3.4.1.js"></script><script type="text/javascript">//默认不会调，只有点击查询才会调用function queryUser(){// 发送ajax请求，获取数据$.ajax({type:"get",url:"user.json",data:{//假设有参数，实际当前参数无任何意义},success:function(result){console.log(result);//处理数据testData(result);}});}//处理数据，判断数据是否成功响应，将数据封装到表格中并显示在页面中。function testData(result){//判断数据是否成功响应if(result.code == 1){//创建表格对象var table = $('<table align="center" border = "1" width="600px" style="border-collapse: collapse;"></table>')//创建表头var thead = "<tr><th>用户编号</th><th>用户姓名</th><th>用户年龄</th><th>用户性别</th></tr>"//将表头tr对象设置到表格中table.append(thead);//判断并遍历数据if(result != null){for (var i = 0;i < result.data.length; i++){//拼接每一个用户对应的tr对象var usex = result.data[i].userSex ? "男" : "女";//根据true和false判断性别var tr = "<tr align='center'><td>"+result.data[i].userId+"</td><td>"+result.data[i].userName+"</td><td>"+result.data[i].userAge+"</td><td>"+usex+"</td></tr>";//将tr对象追加到table中table.append(tr);}}//将表格对象追加到body中$("body").append(table);}else{alert("暂未查询到用户数据！")}}</script>
</body>
<html>