利用JQuery实现ajax异步刷新页面

最新推荐文章于 2024-07-29 20:46:57 发布

Linda L

最新推荐文章于 2024-07-29 20:46:57 发布

阅读量1.7w

点赞数 3

分类专栏：前端

本文链接：https://blog.csdn.net/lindonglian/article/details/51175758

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

就是点击一个页面中的一处地方更新另一块页面的显示。学了几天，随便写的一个测试案例，模拟从后台获取数据利用ajax在不刷新页面的情况下更新局部页面的数据显示

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-2.2.0.min.js"></script>
<script type="text/javascript">
    $(function() {
        $("#one").click(function() {
            $.ajax({
                type : "GET",
                url : "http://localhost:8080/HappyTRhythm/getData.action",
                dataType : "text",
                data : "page=1",
                async : true,
                success : function(data) {
                    alert(data);
                    $("#two").append(data);
                },
                error : function() {
                    alert('请求有误');
                }
            });
        });
    });
</script>
</head>
<body>
    <div id="one">one</div>
    <br>
    <span id="two">two</span>
</body>
</html>