SpringMVC------Ajax

AJAX= Asychronous JavaScript and XML（异步的JavaScript和 xml）。
AJAX 是一直那个在无需重新加载真个网页的情况下，能够更新部分网页的技术。

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

在2005 年，Google 通过Google Suggest 使AJAX 变得流行起来。

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

传统的网页(即不用ajax技术的网页)，想要更新内容或者提交一个表单，都需要重新加载整个网页。
使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。

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

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

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
<title>ajax</title>
<script src="${pageContext.request.contextPath}/statics/jsp/jquery-3.4.1.js"></script>
<script>

/*
jQuery.post(...)
所有参数：
url: 待载入页面的URL地址 (必填)
data: 待发送 Key/value 参数
success: 载入成功时回调函数
data:请求返回的数据
status：请求返回的状态
*/
function a1(){
//ajax默认是get请求
$.post({
url:"${pageContext.request.contextPath}/ajax/a1",
data:{'name':$("#txtName").val()},
success:function (data,status) {
console.log(data);
console.log(status);
}
});
}

</script>
</head>
<body>
<%--onblur：失去焦点触发事件--%>
用户名:<input type="text" id="txtName" onblur="a1()"/>
</body>
---------------------
作者：java—explore
来源：CSDN
原文：https://blog.csdn.net/weixin_44821177/article/details/98465253
版权声明：本文为博主原创文章，转载请附上博文链接！

然后编写我们的 contorller：

package com.wu.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Controller
@RequestMapping("/ajax")
public class AjaxController {
//第一种方式，服务器要返回一个字符串，直接使用response
@RequestMapping("/a1")
public void ajax(String name, HttpServletResponse response) throws IOException {
if ("admin".equals(name)){
response.getWriter().print("true");
}else {
response.getWriter().print("false");
}
}
}

运行结果：

点击输入框，当鼠标点击输入框以外的地方时就会触发事件：显示 false success

在原有的基础上升级：

 1 @RequestMapping("/a3")
 2 @ResponseBody
 3 public String ajax3(String name,String pwd){
 4 String msg = "";
 5 if (name!=null){
 6 if ("admin".equals(name)){
 7 msg = "ok";
 8 }else {
 9 msg = "用户名有误";
10 }
11 }
12 if (pwd!=null){
13 if ("123456".equals(pwd)){
14 msg = "ok";
15 }else {
16 msg = "密码输入有误";
17 }
18 }
19 return msg;
20 }
21 1
22 
23 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
24 <html>
25 <head>
26 <title>Title</title>
27 <script src="${pageContext.request.contextPath}/statics/jsp/jquery-3.4.1.js"></script>
28 
29 <script>
30 function a1() {
31 $.post({
32 url:"${pageContext.request.contextPath}/ajax/a3",
33 data:{"name":$("#name").val()},
34 success: function (data) {
35 if (data.toString()=='ok') { //信息核对成功
36 $('#userInfo').css("color","green");
37 }else {
38 $('#userInfo').css("color","red");
39 }
40 $("#userInfo").html(data);
41 }
42 })
43 
44 }
45 function a2() {
46 $.post("${pageContext.request.contextPath}/ajax/a3",{"pwd":$("#pwd").val()},function (data) {
47 if (data.toString()=='ok') { //信息核对成功
48 $('#pwdInfo').css("color","green");
49 }else {
50 $('#pwdInfo').css("color","red");
51 }
52 $("#pwdInfo").html(data);
53 })
54 }
55 </script>
56 
57 </head>
58 <body>
59 </html>

运行结果“：”

输入正确的用户名和密码：

nice大功告成动态请求响应局部刷新就是如此。。。
---------------------
作者：java—explore
来源：CSDN
原文：https://blog.csdn.net/weixin_44821177/article/details/98465253
版权声明：本文为博主原创文章，转载请附上博文链接！

猜你喜欢