Ajax读取本地html文件

最新推荐文章于 2023-07-30 20:58:18 发布

lily2016n

最新推荐文章于 2023-07-30 20:58:18 发布

阅读量3.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： ajax 文章标签： ajax

本文链接：https://blog.youkuaiyun.com/lily2016n/article/details/78115297

ajax 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用jQuery的AJAX方法加载并显示外部HTML文件的例子。页面包含一个div元素，通过AJAX请求获取指定URL（sanyuan.html）的内容，并将其插入到div中。样式设置确保了内容展示的美观。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试jquey的ajax方法</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        #test{
            padding: 0;
            margin: 0 auto;
            width:200px;
            height: 400px;
        }
        #test li{
            list-style: none;
            width:200px;
            text-align: center;
            height:30px;
            line-height:30px;
            border:1px dashed lightgrey;
        }
    </style>
</head>
<body>

<div id="test"></div>
<script src="jquery-1.8.2.min.js"></script>
<script>
    $(function(){
        alert(1);
        $.ajax({
            //请求方式为get
            type:"GET",
            //json文件位置
            url:"sanyuan.html",
            //返回数据格式为json
             cache: false,
            //请求成功完成后要执行的方法
            success: function(html){
                //使用$.each方法遍历返回的数据date,插入到id为#result中
               $("#test").append(html);
            }
        });
    });
</script>
</body>
</html>