使用 jQuery + Ajax 完成前后端分离渲染页面

最新推荐文章于 2022-10-18 17:08:07 发布

AI Thabo

最新推荐文章于 2022-10-18 17:08:07 发布

阅读量1.8k

点赞数 10

分类专栏： jQuery 文章标签： javascript jquery 前端 html postman

本文链接：https://blog.csdn.net/m0_46470372/article/details/108584086

版权

jQuery 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

使用 jQuery + Ajax 完成前后端分离渲染页面

技术点

简单的 jQuery Ajax Get方法的使用
将对象数组渲染成页面的DOM结构

流程

目前已知，通过 ajax访问接口将获得如下格式数据

在这里插入图片描述

此接口由我自己编写在本地运行，如果你没有接口的话，可以考虑学习nodejs来快速获得编写简单接口能力，或者留言告诉我，根据意见我会放出简单的后端代码或者出一篇文章供大家参考

首先使用jquery ajax测试一下接口能不能正常访问到数据

在这里插入图片描述

可以看到 console.log 出来了数据，没有任何问题

开始编写一下简单的DOM结构和css样式，并且写出一个item元素方便调试样式

在这里插入图片描述

我们现在绘制出了初步的DOM结构，虽然略显简陋，但是重点并不在此

使用jQuery获取数据，并赋值给newsData变量。
编写渲染方法，使用jQuery的$.each()方法对拿到的数据进行循环遍历，使用prepend()方法进行向页面添加元素的操作
prepend() 方法的参数直接添加刚刚写好的item元素的DOM结构，并将其中需要变化的几个元素使用变量进行代替，我们这里直接使用遍历出每个对象的属性进行替换。
执行加载方法 load()，清空.content里的DOM元素

在这里插入图片描述

刷新网页，我们可以看到数据已经成功的被渲染成DOM结构了

在这里插入图片描述

代码全览

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.3.1.min.js"></script>
    <!-- jquery文件要换成你自己的路径 -->
    <script src="./main.js"></script>
    <style>
        *{margin:0;padding:0;}
        #app{
            width:100%;
            margin:0;
        }
        .content{
            width:1000px;
            margin:0 auto;
            background-color: #cccc;
        }
        .item{
            height:100px;
            width:100%;
            border:1px solid #4d4d4d;
        }
        .title{
            font-size:22px;
            height:60px;
            display: flex;
            align-items:center;
        }
        .cont{
            display: flex;
            justify-content:space-between;
            height:40px;
            align-items:center;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="content">
            
        </div>
    </div>
</body>
</html>

main.js

$(function(){
    let newsData = {};
    // 接口需要自己写哦
    $.get("http://127.0.0.1:3008/api/getnewslist", function(data, status){
        console.log(data);
        newsData = data.message;
        load();
    });

    const load = () => {
        $.each(newsData, function(i, n){
            $(".content").prepend("<div class='item'><p class='title'>"+ n.title
            +"</p><p class='cont'><span class='addtime'>发布时间:"+n.addtime+"</span><span class='click'>点击量:"+n.click
            +"</span></p></div>")
            
        })
    }
})

`创作不易` `点赞留言转发支持`

AI Thabo

关注

10
点赞
踩
16

收藏

觉得还不错? 一键收藏
1
评论
使用 jQuery + Ajax 完成前后端分离渲染页面

使用 jQuery + Ajax 完成前后端分离渲染页面技术点简单的 jQuery Ajax Get方法的使用将对象数组渲染成页面的DOM结构流程目前已知，通过 ajax访问接口将获得如下格式数据此接口由我自己编写在本地运行，如果你没有接口的话，可以考虑学习nodejs来快速获得编写简单接口能力，或者留言告诉我，根据意见我会放出简单的后端代码或者出一篇文章供大家参考首先使用jquery ajax测试一下接口能不能正常访问到数据可以看到 console.log 出
复制链接

扫一扫