ajax显示或者隐藏div

狗庄欺人太甚

于 2022-09-05 17:47:44 发布

阅读量592

点赞数

分类专栏： html 文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/weixin_48262500/article/details/126710091

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这段代码展示了如何使用JavaScript的Ajax实现网页加载时的显示和隐藏效果，并处理用户提交数据的功能。当触发submit事件时，会弹出加载提示，然后向'zero_shot_submit'发送POST请求，携带keywords和topk参数。成功接收后台返回的数据后，隐藏加载提示并将结果展示在页面上。

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

<div id="loading_page" class="loading_page" style="display: none;">
        <div id="loading-center">
        <div id="loading-center-absolute">
        <div class="object"></div>
        <div class="object"></div>
        <div class="object"></div>
        <div class="object"></div>
        <div class="object"></div>
        <div class="object"></div>
        <div class="object"></div>
        <div class="object"></div>
        <div class="object"></div>
        <div class="object"></div>
        </div>
        </div>
        </div>
        </div>

使用show函数显示，使用hide函数隐藏

<script>
        /*在这里编写submit()事件*/
        function zero_shot_submit() { 
            alert('正在加载中，请稍后...'),
            $.ajax(
                $('#loading_page').show()
            ),
            $.ajax(
            {
            url: "zero_shot_submit", /*数据提交到submit处*/
            type: "POST", /*采用POST方法提交*/
            data: { "keywords": $("#keywords").val(),"topk":$("#topk").val()},  /*提交的数据（json格式），从输入框中获取*/
            /*result为后端函数返回的json*/
            success: function (result) {
                $('#loading_page').hide();
                    // alert('results belowed:'+result.message)
                    $(".content").html(result.message)
                }
                
            });
        }
    </script>