Spring|SpringMVC---Ajax学习 javascript|html|ajax

SpringMVC—Ajax学习

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

文章目录

- SpringMVC---Ajax学习
- - 1.简介
  - 2.伪造Ajax
  - 3.SpringMVC实现

1.简介

不刷新页面更新网页

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

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

在后台向服务器发送数据

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

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

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

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

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

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

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

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

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

2.伪造Ajax

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

伪造ajax - 锐客网 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 = https://www.it610.com/article/targetUrl; } 请输入要加载的地址：id="currentTime"> 加载页面位置

文章图片

3.SpringMVC实现
实体类user

@Data @AllArgsConstructor @NoArgsConstructor public class User {private String name; private int age; private String sex; }

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

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

前端页面

数据回显 - 锐客网 src="https://www.it610.com/article/${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js" > > $(function (){$("#btn").click(function () {$.post("${pageContext.request.contextPath}/a2",function (data) {console.log(data) var html=""; for (var i = 0; i " + data[i].name + "" + "" + data[i].age + "" + "" + data[i].sex + "" + "" } $("#content").html(html); }); }) }) 姓名年龄性别

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