4.前端页面布置
index.jsp
我们设置一个输入框，设置id为username。以及失去焦点事件onblur。当我们失去焦点得时候我们会经过js的一个方法。这个方法我们用ajax来进行操作，url 路径 data 数据 callback : 后端返回什么数据
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>$Title$</title> <%-- 导入 juequery--%> <script src="${pageContext.request.contextPath}/static/js/jquery-3.6.1.js"></script> <script> function a(){ <%-- $. 符号相当于 jQuery. ,前者是后者的简写 --%> $.post({ url:"${pageContext.request.contextPath}/a1", //********真正的和后端匹配的属性应该是name属性，而不是id属性。在这里我们只是 // 通过id选择器进行获取文本框中的值信息，真正传值的是 键 name data:{"name":$("#username").val()}, success:function (data){ alert(data); } }) } </script> </head> <body> <%-- 失去焦点的时候，发起一个请求到后端--%> <input type="text" id="username" onblur="a()"> </body> </html>
5.后端页面布置
package com.jsxs.controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @RestController public class AjaxController { @RequestMapping("/a1") public void a1(String name, HttpServletResponse response) throws IOException { if ("JSXS".equals(name)){ response.getWriter().write("true"); }else { response.getWriter().write("false"); } } }
(五)、Ajax初步体验
1.常规数据展示布局（后端=》前端）
我们首先设置一个按钮框，并设置id标签。我们通过js对这个按钮进行监听，假如说点击了这个按钮我们就使用ajax进行获取后端传递过来的JSON值。
test2.jsp
这里的data值就是我们后端通过JSON传递进来的，所以我们可以直接使用。
<%-- Created by IntelliJ IDEA. User: 22612 Date: 2023/1/2 Time: 10:35 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <script src="static/js/jquery-3.6.1.js"></script> <script> $(function () { $("#btn").click(function () { //&.post(url , param[可省略] ,success) // 回调函数顾名思义: 把数据传回到前端，也就是后端响应的数据 $.post("${pageContext.request.contextPath}/a2",function (data){ console.log(data); var 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>" } $("#context").html(html) }); }) }); </script> </head> <input type="button" value="加载数据" id="btn"> <body> <table> <tr> <td>姓名</td> <td>年龄</td> <td>性别</td> </tr> <tbody id="context"> </tbody> </table> </body> </html>
这里我们负责传递JSON值,因为我们不经过视图解析器所以我们这里直接传递的是一个JSON值
package com.jsxs.controller; import com.jsxs.pojo.User; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.util.ArrayList; import java.util.List; @RequestMapping("/a2") public List<User> a2(){ ArrayList<User> users = new ArrayList<>(); // 添加数据 users.add(new User("吉士先生1",15,"娜娜")); users.add(new User("吉士先生2",15,"娜娜")); users.add(new User("吉士先生3",15,"娜娜")); return users; } }
2.用户账户密码验证布局(前端=》后端=》前端)
ajax: 用户体验，我们设置两个基本的输入框，然后通过ajax进行获取前端传进来的数据，然后通过success回滚即可。如何展示数据呢，我们只需要对其进行
<%-- Created by IntelliJ IDEA. User: 22612 Date: 2023/1/2 Time: 12:02 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <script src="static/js/jquery-3.6.1.js"></script> <script> function a1(){ $.post({ url: "${pageContext.request.contextPath}/a3", data:{"name":$("#name").val()}, success:function (data){ // 因为传入过来的是一个JSON对象，我们要对其进行数据转换 if (data.toString()==='OK'){ $("#userInfo").css("color","green"); }else { $("#userInfo").css("color","red"); }console.log(data); $("#userInfo").html(data) } }) } function a2(){ $.post({ url: "${pageContext.request.contextPath}/a3", data:{"pwd":$("#password").val()}, success:function (data){ // 因为传入过来的是一个JSON对象，我们要对其进行数据转换 if (data.toString()==='OK'){ $("#pwdInfo").css("color","green"); }else { $("#pwdInfo").css("color","red"); }console.log(data); $("#pwdInfo").html(data) } }) } </script> </head> <body> <p> 用户名 : <input type="text" id="name" onblur="a1()"> <span id="userInfo"></span> </p> <p> 密码 : <input type="text" id="password" onblur="a2()"> <span id="pwdInfo"></span> </p> </body> </html>
进行获取数据，并且进行返回JSON,JSON是一个JSON对象，我们要进行字符串转换。
package com.jsxs.controller; import com.jsxs.pojo.User; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.util.ArrayList; import java.util.List; @RestController public class AjaxController { @RequestMapping("/a3") public String a3(String name,String pwd){ String msg=""; System.out.println(name); System.out.println(pwd); if (name!=null){ if ("吉士先生".equals(name)){ msg="OK"; }else { msg="Error"; } } if (pwd!=null){ if ("121788".equals(pwd)){ msg="OK"; }else { msg="Error"; } } return msg; } }
