jquery&ajax实例

运用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 } ]
}

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

原始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
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46

以上代码出现两个问题

问题一

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

在这里插入图片描述

问题解决:
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 } ]
}

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

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>


  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61

声明:部分资料源自网络,如有侵权,请联系我删除!
文中如存在谬误、混淆等不足,欢迎批评指正!

文章来源: blog.csdn.net,作者:小怪不怪,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/hxtxsdcxy/article/details/115027751

(完)