SpringMVC---Ajax学习

Liknana

于 2021-09-09 15:09:49 发布

阅读量107

点赞数 1

分类专栏： Spring 文章标签： ajax javascript html

本文链接：https://blog.csdn.net/weixin_45882303/article/details/120201856

版权

Spring 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

SpringMVC—Ajax学习

我们的征程是星辰大海，而非人间烟尘

文章目录

- SpringMVC---Ajax学习

1.简介

不刷新页面更新网页

在页面加载后从服务器请求数据

在页面加载后从服务器接收数据

在后台向服务器发送数据

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。Google Suggest能够自动帮你完成搜索单词。

Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。

就和国内百度的搜索框一样!

传统的网页(即不用ajax技术的网页)，想要更新内容或者提交一个表单，都需要重新加载整个网页。

使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。

使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

2.伪造Ajax

我们可以使用前端的一个标签来伪造一个ajax的样子。iframe标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪造ajax</title>
    <script type="text/javascript">
        window.onload = function () {
            var myDate = new Date();
            document.getElementById('currentTime').innerText = myDate.getTime();
        };
        function LodePage() {
            var targetUrl = document.getElementById('url').value;
            console.log(targetUrl);
            document.getElementById("iframePosition").src = targetUrl;
        }
    </script>
</head>
<body>
    <div>
        <p>请输入要加载的地址：<span id="currentTime"></span></p>
        <p>
            <input id="url" type="text" value="https://www.csdn.net/"/>
            <input type="button" value="提交" onclick="LodePage()" />
        </p>
    </div>
    <div>
        <h3>加载页面位置</h3>
        <iframe id="iframePosition" style="width: 100%;height: 500px">
        </iframe>
    </div>
</body>
</html>

3.SpringMVC实现

实体类user

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {

   private String name;
   private int age;
   private String sex;

}

我们来获取一个集合对象，展示到前端页面

 @RequestMapping("/a2")
    @ResponseBody
    public List<User> ajax2(){
        List<User> users = new ArrayList<>();
        users.add(new User("长江一号", 3, "男"));
        users.add(new User("长江二号", 4, "男"));
        users.add(new User("长江三号", 5, "男"));
        return users;
}

前端页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>数据回显</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js" ></script>
    <script >
        $(function (){
            $("#btn").click(function () {
                $.post("${pageContext.request.contextPath}/a2",function (data) {
                    console.log(data)
                    var html="";
                    for (var 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>
</head>
<body>
    <input type="button" id="btn" value="获取数据" />
    <table width="80%" align="center" >
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tbody id="content">
        </tbody>
    </table>
</body>
</html>

成功实现了数据回显！可以体会一下Ajax的好处！

Liknana

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
SpringMVC---Ajax学习

SpringMVC—Ajax学习我们的征程是星辰大海，而非人间烟尘文章目录SpringMVC---Ajax学习1.简介2.伪造Ajax3.SpringMVC实现1.简介不刷新页面更新网页在页面加载后从服务器请求数据在页面加载后从服务器接收数据在后台向服务器发送数据AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
复制链接

扫一扫