前端页面使用初始化方法onload(),onbeforeunload()会有bug,ajax的数据还未传过来就初始化方法

最新推荐文章于 2024-06-26 15:23:21 发布

心静自然梁呢

最新推荐文章于 2024-06-26 15:23:21 发布

阅读量467

点赞数

文章标签： java 前端框架 ajax

本文链接：https://blog.csdn.net/qq_48903524/article/details/124152538

版权

本文详细介绍了如何使用JavaScript的$.ajax方法从后端获取数据，并通过DOM操作实时显示在HTML页面上，无需onload或onbeforeunload。通过实例展示script和HTML结合的方式，让你理解前后端数据同步的便捷应用。

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

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

不需要使用onload（），onbeforeunload()方法

提示：以下是本篇文章正文内容，下面案例可供参考

一、使用步骤

1.script写法

代码如下（示例）：

<script>
    var a=1;
    var nnotice={};
    $.ajax({
        url:'/tongzhi/gg2',
        method:'get',
        success:function (res) {
            console.log(res)
            nnotice=res;
            document.getElementById('ntitle').value=nnotice.ntitle;
            document.getElementById('ncontent').value=nnotice.ncontent;
            document.getElementById('nauthor').value=nnotice.nauthor;
            document.getElementById('ncreatetime').value=nnotice.ncreatetime;
        }
    })


</script>

document.getElementById(‘ntitle’).value=nnotice.ntitle;
这里是给属性id=ntitle赋值，这样html就可直接显示所需的内容

2.html写法

代码如下（示例）：

<div style="display: flex" >
                    <div>
                        <input type="text" name="ntitle" id="ntitle">
                        <input type="text" name="ncontent" id="ncontent">
                        <input type="text" name="nauthor" id="nauthor">
                        <input type="text" name="ncreatetime" id="ncreatetime">
<!--                        <button type="button" onclick="aaa()">sss</button>-->
                    </div>
                    <div></div>
                </div>