欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > javascript >内容正文

javascript

SpringMVC(四)——Ajax技术

发布时间：2025/3/13 javascript 35 豆豆
生活随笔 收集整理的这篇文章主要介绍了 SpringMVC(四)——Ajax技术 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

文章目录

  • 1. 什么是Ajax技术
  • 2. 伪造Ajax
  • 3. Ajax相关测试

1. 什么是Ajax技术

  • AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
  • Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
  • Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
  • 传统的网页(即不用ajax技术的网页)，想要更新内容或者提交一个表单，都需要重新加载整个网页。
  • 使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。

利用Ajax可以做：

  • 注册时，输入用户名自动检测用户是否已经存在。
  • 登陆时，提示用户名密码错误
  • 删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除。
    …等等

2. 伪造Ajax

可以使用前端的iframe标签来伪造一个ajax的样子
1、新建一个项目，构建web模块
2、编写一个 ajax-frame.html 使用 iframe 测试，感受下效果

<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title>zz</title> </head> <body><script type="text/javascript">window.onload = function(){let myDate = new Date();document.getElementById('currentTime').innerText = myDate.getTime();};function LoadPage(){let 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.pku.edu.cn/"/><input type="button" value="提交" onclick="LoadPage()"></p> </div><div><h3>加载页面位置：</h3><iframe id="iframePosition" style="width: 50%;height: 300px;"></iframe> </div></body> </html>

3、配置Tomcat测试

可以看出，只有加载页面位置区域局部更新页面，其余区域不变。

3. Ajax相关测试

用以下两种均可实现Ajax

  • jQuery ：用的比较多
  • axios ：vue推荐使用 axios

在这里使用 jquery

1. 失去焦点(鼠标离开输入框)触发一个ajax请求

页面ajax01.html

<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><html><head><title>Title</title><!--注意：script标签不要自闭合--><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() {// 失去焦点触发一个ajax请求alert("ajax请求")} </script> </body> </html>

测试
鼠标先点击输入框，再移动离开输入框，即失去焦点

2. 失去焦点触发一个ajax请求，后台返回ok，显示测试成功

控制类AjaxController

package com.zz.controller;import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController;@RestController public class AjaxController {@RequestMapping("/a2")public String ajax(String name){System.out.println(name);return "ok";} }

页面ajax02.html

<!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(){// 失去焦点触发一个ajax请求$.post({url:'/a2',data:{name:$("#baidu").val()},//成功的回调函数success:function (data,status) {console.log(data)console.log(status)}});} </script> </body> </html>

测试


3. 失去焦点触发一个ajax请求，后台返回一个集合对象

控制类AjaxController

@RequestMapping("/aj2")public List<User> ajax2(String name){User user1 = new User("铁牛1", 18, "女");User user2 = new User("铁牛2", 18, "男");User user3 = new User("铁牛3", 18, "女");User user4 = new User("铁牛4", 18, "男");User user5 = new User("铁牛5", 18, "女");User user6 = new User("铁牛6", 18, "男");List<User> users = Arrays.asList(user1, user2, user3, user4, user5, user6);return users;}

同时把页面ajax02.html中的地址改成 /aj2

测试


4. 触发一个事件，数据回显到前端界面

页面ajax03.html

<!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="70%" border="1px" align="center"><tr><td>姓名</td><td>年龄</td><td>性别</td></tr><tbody id="content"><!--应该从后台自动刷新数据过来--></tbody> </table> <script>$('#btn').click(function(){//post(url,data,success的回调函数)$.post("/aj2",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>

测试


总结

以上是生活随笔为你收集整理的SpringMVC(四)——Ajax技术的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。