jquery&ajax实例

最新推荐文章于 2022-04-16 10:36:07 发布

小怪不怪

最新推荐文章于 2022-04-16 10:36:07 发布

阅读量2k

点赞数 6

分类专栏：对接文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/hxtxsdcxy/article/details/115027751

版权

本文介绍了一个jQuery结合AJAX的实际案例，通过模拟请求用户列表展示在HTML表格中，过程中遇到了跨域和数据遍历的问题。首先，为了解决Chrome浏览器的跨域问题，介绍了两种解决方案：调整服务器配置或使用Live-Server插件。接着，解决了AJAX成功但数据未显示在页面上的问题，原因是JSON数据中的键名导致了遍历困难，修改键名后问题得到解决。最后提供了修正后的user.json和index.html代码片段。

摘要由CSDN通过智能技术生成

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