SpringMVC---Ajax初上手

最新推荐文章于 2022-11-05 00:10:47 发布

刘心芝士小蛋糕

最新推荐文章于 2022-11-05 00:10:47 发布

阅读量123

点赞数

分类专栏： SSM 文章标签： ajax jquery html springmvc

本文链接：https://blog.csdn.net/love_to_share/article/details/104598083

版权

SSM 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

早些年的网站：单页面网站，所有的刷新都需要跳转,后来ajax出来之后，可以实现无刷新加载数据，在后台服务器进行少量的数据交换，就可以实现异步局部更新

1.准备工作

配置web.xml 和 springmvc的配置文件
配置applicationContextxml
编写控制类
实现具体功能的时候，只需要增加控制类和页面显示

2.具体案例的代码实现

1、ajax初体验，用 iframe 测试，感受下效果

ajax初体验

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>yangyang</title>
</head>
<body>

<script type="text/javascript">
    window.onload = function(){
        var myDate = new Date();
        document.getElementById('currentTime').innerText = myDate.getTime();
    };

    function LoadPage(){
        var targetUrl =  document.getElementById('url').value;
        console.log(targetUrl);
        document.getElementById("iframePosition").src = targetUrl;
    }

</script>

<div>
    <p>请输入要加载的地址：<span id="currentTime"></span></p>
    <p>
        <input id="url" type="text" value="https://www.baidu.com/"/>
        <input type="button" value="提交" onclick="LoadPage()">
    </p>
</div>

<div>
    <h3>加载页面位置：</h3>
    <iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe>
</div>

</body>
</html>

在这里插入图片描述

例1：标离开输入框的时候，可以看到发出了一个ajax的请求

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
<html>
<head>
    <title>Title</title>
    <script src="http://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>

百度：<input type="text" id="baidu" onblur="baidu()">

<script>
function baidu() {
    alert(1)
}
</script>
</body>
</html>

在这里插入图片描述

例2：鼠标离开输入框的时候，可以看到发出了一个ajax的请求！后台返回给我们的结果！测试成功

控制类

 @RequestMapping("/a1")
    public String ajax(String name){
        System.out.println(name);
        return "ok";
    }

页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="http://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>



百度：<input type="text" name="name" id="baidu" onblur="baidu()">

<script>
    function baidu(){
        $.post({
            url:'/a1',
            data:{name:$("#baidu").val()},
            success:function (data,status) {
                console.log(data)
                console.log(status)
            }
        });
    }
</script>
</body>
</html>

在这里插入图片描述

例3：获取一个集合对象，展示到前端页面

 @RequestMapping("/a2")
    public List<User> ajax2(){
        List<User> list = new ArrayList<User>();
        list.add(new User("刘洋",3,"女"));
        list.add(new User("刘洋",3,"女"));
        list.add(new User("刘洋",3,"女"));
        return list; //由于@RestController注解，将list转成json格式返回
    }

把页面地址这里改成/a2

 url:'/a2',

在这里插入图片描述

例4：数据回显到前端界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="http://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>

<input type="button" id="btn" value="点我"/>
<table width="90%" border="1px" align="center">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
    <tbody id="content">
    </tbody>
</table>
<script>
    $('#btn').click(function(){
        $.post("/a2",function (data){
            console.log(data);
            //基本的dom操作

            let html="";
            for (let i = 0; i <data.length ; i++) {
                html+= "<tr>" +
                    "<td>" + data[i].name + "</td>" +
                    "<td>" + data[i].age + "</td>" +
                    "<td>" + data[i].sex + "</td>" +
                    "</tr>"
            }
            $("#content").html(html);
            })
    })
</script>
</body>
</html>

在这里插入图片描述

刘心芝士小蛋糕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SpringMVC---Ajax初上手

早些年的网站：单页面网站，所有的刷新都需要跳转,后来ajax出来之后，可以实现无刷新加载数据，在后台服务器进行少量的数据交换，就可以实现异步局部更新1.准备工作配置web.xml 和 springmvc的配置文件配置applicationContextxml编写控制类实现具体功能的时候，只需要增加控制类和页面显示2.具体案例的代码实现1、ajax初体验，用 iframe 测试，感...
复制链接

扫一扫