AJAX案例——页面异步更新AJAX可以实现页面异步刷新，加快页面加载效率，用于和传来的json数据进行交互，获取cs

AJAX可以实现页面异步刷新，用于和传来的json数据进行交互

<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--javascript代码-->
<script type="text/javascript">

    function loadPage() {
        var url=document.getElementById("url").value;
        //给iframe的src赋值跳转地址
        document.getElementById("iframe").src=url;
    }

</script>

<div>
    <p>请输入要加载的地址</p>
    <input type="text" id="url" />
    <!--onclick绑定事件-->
    <input type="button" onclick="loadPage()" value="提交">
</div>

<div>
    <h3>加载位置</h3>
    <iframe style="width: 100%;height: 400px" id="iframe"></iframe>
</div>


</body>
</html>

获取csdn页面测试如下

微信截图_20211230170532.png