JS 操作超链接及传参的方式

BirdMan98

已于 2022-07-02 18:19:14 修改

阅读量2.3k

点赞数

文章标签： javascript js ajax html json

于 2020-03-05 16:21:01 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_41405524/article/details/104677398

版权

本文介绍了一种使用JavaScript和AJAX技术动态加载博客列表的方法，包括前端页面元素的动态生成和后端数据处理流程。通过AJAX GET请求从服务器获取JSON格式的博客数据，前端根据返回的数据动态构建HTML页面，展示每篇博客的标题、作者、编辑时间、点赞数和观看数，并提供了删除按钮功能。后端则实现了删除指定ID博客的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS

function load() {
        html = "";
        $.ajax({
            url: "/blog/ablist",
            type: "get",
            dataType: "json",
            success: function (json) {
                console.log(json);
                for (var i = 0; i < json.length; i++) {
                    console.log(json[i].title);
                    html += "<div class=\"c\" >\n" +
                        "                        <div class=\"con\">\n" +
                        "                            <div class=\"aftitle\"><a th:href=\"@{/blog/adetail/{id}(id=${'+json[i].id+'})}\" style=\"text-decoration: none;\n" +
                        "                    color: black;font-weight:bolder;font-size: large\" th:text=\"${json[i].title}\"><span>"+json[i].title+"</span></a></div><br>\n" +
                        "                            <label style=\"font-size: small;color: grey\">作者 : <span th:text=\"${json[i].author}\">"+json[i].author+"</span>&nbsp;&nbsp;</label>\n" +
                        "                            <label style=\"font-size: small;color: grey\">时间 :\n" +
                        "                                <span th:text=\"${#dates.format(json[i].editTime,'yyyy-MM-dd HH:mm:ss')}\">"+json[i].editTime+"</span>&nbsp;&nbsp;\n" +
                        "                            </label>\n" +
                        "                            <label style=\"font-size: small;color: grey\">点赞数 : <span th:text=\"${json[i].like}\">"+json[i].liked+"</span>&nbsp;&nbsp;</label>\n" +
                        "                            <label style=\"font-size: small;color: grey\">观看数 : <span th:text=\"${json[i].viewed}\">"+json[i].viewed+"</span>&nbsp;&nbsp;</label>\n" +
                        "<div class=\"con1\">\n" +
                        "                        <!--                                th:href=\"@{/blog/delete/{id}(id=${blog.id})}\"-->\n" +
                        "                        <a id=\"delete\" href=\"/blog/delete/"+json[i].id+"\" th:href=\"@{/blog/delete/{id}(id=${"+json[i].id+"})}\">\n" +
                        "                        <button style=\"color: red\">删除</button>\n" +
                        "                        </a>\n" +
                        "                        <button id=\"lock\">锁定</button>\n" +
                        "                        </div>"+
                        "                        </div>\n" +
                        "                    </div>";
                }
                $("#content").html(html);
                html = "";
            }
        });
    }

下面是后台接受数据

    @Transactional
    @GetMapping("/delete/{id}")
    public String delete(@PathVariable("id") Long id){
        blogDao.deleteById(id);
        return "redirect:/blog/alist";
    }