controller
package com.wu.controller; import com.wu.pojo.User; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.util.ArrayList; import java.util.List; /** * @author *min * @create 2021-06-13-16:37 * @description */ @RestController//不解析为跳转路径 public class AjaxController { @RequestMapping("/t1") public String test() { return "hello"; } @RequestMapping("/a1") public void a1(String name, HttpServletResponse response) throws IOException { System.out.println("a1:param" + name); if ("wu".equals(name)) { response.getWriter().print("true"); } else { response.getWriter().print("false"); } } @RequestMapping("/a2") public List<User> a2() { ArrayList<User> user = new ArrayList<User>(); //添加数据 user.add(new User("吴某", 1, "男")); user.add(new User("吴某", 2, "男")); user.add(new User("吴某", 3, "男")); return user; } @RequestMapping("/a3") public String a3(String name, String pwd) { String msg=""; if (name != null) { if ("admin".equals(name)) { msg = "ok"; } else { msg = "用户名有误"; } } if (pwd != null) { if ("123456".equals(pwd)) { msg = "ok"; } else { msg = "密码有误"; } } return msg; } }
applicationContext
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context" xmlns:mvc="http://www.springframework.org/schema/mvc" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd"> <!-- 1.注解驱动--> <mvc:annotation-driven/> <!-- 2.静态资源过滤--> <mvc:default-servlet-handler/> <!--解决json前端的乱码--> <mvc:annotation-driven> <mvc:message-converters register-defaults="true"> <bean class="org.springframework.http.converter.StringHttpMessageConverter"> <constructor-arg value="UTF-8"/> </bean> <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"> <property name="objectMapper"> <bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean"> <property name="failOnEmptyBeans" value="false"/> </bean> </property> </bean> </mvc:message-converters> </mvc:annotation-driven> <!-- 3.扫描包--> <context:component-scan base-package="com.wu.controller"/> <!-- 4.视图解析器--> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="prefix" value="/WEB-INF/jsp/"/> <property name="suffix" value=".jsp"/> </bean> </beans>
index.jsp这里实现的是失去焦点的时候如果内容不正确就alert警告为false 正确就为false
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>$Title$</title> <script src="${pageContext.request.contextPath}/statics/js/jquery.js"></script> <script> function a() { $.post({ url:"${pageContext.request.contextPath}/a1", data:{"name":$("#username").val()}, success:function (data) { alert(data); }, error:function () { alert("请求失败") } } ) } </script> </head> <body> <%-- 失去焦点的时候，发起与一个请求到后台--%> <input type="text" id="username" onblur="a()"> </body> </html>
html.jsp 这里实现的是使用iframe来模拟ajax的效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>iframe测试页面无刷新</title> <script> function go() { var url=document.getElementById("url").value; document.getElementById("iframe1").src=url; } </script> </head> <body> <div> <p>请输入地址：</p> <p> <input type="text" id="url" value="https://www.baidu.com"> <input type="button" value="提交" onclick="go()"> </p> </div> <div> <iframe id="iframe1" style="width: 100%;height: 500px"></iframe> </div> </body> </html>
test2.jsp这里实现的是点击按钮显示姓名年龄性别而不刷新转发页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <script src="${pageContext.request.contextPath}/statics/js/jquery.js"></script> <script> $(function () { $("#btn").click(function () { // post(url,parm(可以省略),succes) $.post("${pageContext.request.contextPath}/a2",function (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>" } $("#content").html(html) }); }) }) </script> </head> <body> <input type="button" value="加载数据" id="btn"> <table> <tr> <td>姓名</td> <td>年龄</td> <td>性别</td> </tr> <tbody id="content"> </tbody> </table> </body> </html>
login.jsp这里实现的是失去焦点直接判断用户名密码是否正确并提示相关的信息
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <script src="${pageContext.request.contextPath}/statics/js/jquery.js"></script> <script> function a1(){ $.post({ url:"${pageContext.request.contextPath}/a3", data:{"name":$("#name").val()}, success:function (data) { if(data.toString()===‘ok‘){ $("#userInfo").css("color","green"); }else{ $("#userInfo").css("color","red"); } $("#userInfo").html(data) } }) } function a2() { $.post({ url:"${pageContext.request.contextPath}/a3", data:{"pwd":$("#pwd").val()}, success:function (data) { if(data.toString()===‘ok‘){ $("#pwdInfo").css("color","green"); }else{ $("#pwdInfo").css("color","red"); } $("#pwdInfo").html(data) } }) } </script> </head> <body> <p> 用户名：<input type="text" id="name" onblur="a1()"> <span id="userInfo"></span> </p> <p> 密码：<input type="text" id="pwd" onblur="a2()"> <span id="pwdInfo"></span> </p> </body> </html>