如何使用JS异步更新页面，保持原有页面不变，在原来基础上新增内容

不当菜虚困

于 2023-05-03 20:59:44 发布

阅读量470

点赞数 1

分类专栏： JS 文章标签： javascript 前端 bootstrap ajax jquery

本文链接：https://blog.csdn.net/weixin_45248370/article/details/130477103

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该段代码展示了如何在用户点击按钮后，利用jQuery的Ajax方法向后端发送POST请求，传递用户输入的问题，并接收返回的JSON数据。数据被格式化并添加到Bootstrap样式的div中，用于展示问答交互内容。如果请求失败，会提示用户输入提问。

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

下面这段内容会将后端获取的json数据，以一个div块的新式展示出来。下面代码是搭配bootstrap框架一起使用的。

$(document).ready(function () {
        $("#submit").click(function () {
            const qa = $("#question").val();
            showItems(qa, true)
            console.log(qa)
            $.ajax({
                url: "http://127.0.0.1:5000/qa",
                method: "POST",
                data: JSON.stringify({ question: qa }),
                contentType: 'application/json',
                success: function (response) {
                    console.log(response.message);
                    //将ajax的缓存数据取出显示
                    showItems(response.message, false);
                    console.log('刷新页面成功')
                },
                error: function () {
                    alert("提问为空，输入提问内容！");
                }
            });
        });

        function showItems(data, type=false) {
            // 处理返回的 JSON 数据
            var data = data;
            // 将数据渲染到页面上
            var $communication = $('#communication');
            var $row = $('<div>').addClass('row text-white  mb-1 ml-1');
            if(type){
                $row.append($('<div>').text("我：" + data));
            }else{
                $row.append($('<div>').text("服务助手桃子：" + data));
            }
            $communication.append($row);
        }

    });