先配置web.xml
1 <?xml version="1.0" encoding="UTF-8"?> 2 <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" 3 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 4 xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" 5 version="4.0"> 6 <servlet> 7 <servlet-name>DispatcherServlet</servlet-name> 8 <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> 9 <init-param> 10 <param-name>contextConfigLocation</param-name> 11 <param-value>classpath:applicationContext.xml</param-value> 12 </init-param> 13 <load-on-startup>1</load-on-startup> 14 </servlet> 15 16 <servlet-mapping> 17 <servlet-name>DispatcherServlet</servlet-name> 18 <url-pattern>/</url-pattern> 19 </servlet-mapping> 20 21 22 <!--防止中文乱码--> 23 <filter> 24 <filter-name>encoding</filter-name> 25 <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> 26 <init-param> 27 <param-name>encoding</param-name> 28 <param-value>UTF-8</param-value> 29 </init-param> 30 </filter> 31 <filter-mapping> 32 <filter-name>encoding</filter-name> 33 <url-pattern>/*</url-pattern> 34 </filter-mapping> 35 </web-app>
maven依赖
这里选择spring的4.2.2可以选择5.2
1 <?xml version="1.0" encoding="UTF-8"?> 2 <project xmlns="http://maven.apache.org/POM/4.0.0" 3 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 4 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> 5 <parent> 6 <artifactId>SpringMVC</artifactId> 7 <groupId>com.rzk</groupId> 8 <version>1.0-SNAPSHOT</version> 9 </parent> 10 <modelVersion>4.0.0</modelVersion> 11 12 <artifactId>sppringmvc-06-ajax01</artifactId> 13 <!--导入依赖--> 14 <dependencies> 15 <dependency> 16 <groupId>junit</groupId> 17 <artifactId>junit</artifactId> 18 <version>4.12</version> 19 </dependency> 20 <dependency> 21 <groupId>org.springframework</groupId> 22 <artifactId>spring-webmvc</artifactId> 23 <version>4.2.2.RELEASE</version> 24 </dependency> 25 <dependency> 26 <groupId>javax.servlet.jsp</groupId> 27 <artifactId>jsp-api</artifactId> 28 <version>2.2</version> 29 </dependency> 30 <dependency> 31 <groupId>javax.servlet</groupId> 32 <artifactId>jstl</artifactId> 33 <version>1.2</version> 34 </dependency> 35 <dependency> 36 <groupId>javax.servlet</groupId> 37 <artifactId>javax.servlet-api</artifactId> 38 <version>4.0.1</version> 39 </dependency> 40 <dependency> 41 <groupId>org.projectlombok</groupId> 42 <artifactId>lombok</artifactId> 43 <version>1.18.12</version> 44 </dependency> 45 </dependencies> 46 资源过滤 47 <build> 48 <resources> 49 <resource> 50 <directory>src/main/resources</directory> 51 <includes> 52 <include>**/*.properties</include> 53 <include>**/*.xml</include> 54 </includes> 55 <filtering>false</filtering> 56 </resource> 57 <resource> 58 <directory>src/main/java</directory> 59 <includes> 60 <include>**/*.properties</include> 61 <include>**/*.xml</include> 62 </includes> 63 <filtering>false</filtering> 64 </resource> 65 </resources> 66 67 </build> 68 69 </project>
applicationContext.xml配置文件
1 <?xml version="1.0" encoding="UTF-8"?> 2 <beans xmlns="http://www.springframework.org/schema/beans" 3 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 4 xmlns:context="http://www.springframework.org/schema/context" 5 xmlns:mvc="http://www.springframework.org/schema/mvc" 6 xsi:schemaLocation="http://www.springframework.org/schema/beans 7 http://www.springframework.org/schema/beans/spring-beans.xsd 8 http://www.springframework.org/schema/context 9 http://www.springframework.org/schema/context/spring-context.xsd 10 http://www.springframework.org/schema/mvc 11 http://www.springframework.org/schema/mvc/spring-mvc.xsd"> 12 <!--自动扫描包,下面所有注解类叫给IOC容器管理--> 13 <context:component-scan base-package="com.rzk.controller"/> 14 <!--注解驱动--> 15 <mvc:annotation-driven/> 16 <!--静态资源过滤--> 17 <mvc:default-servlet-handler/> 18 <!--视图解析器--> 19 <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> 20 <property name="prefix" value="/"/> 21 <property name="suffix" value=".jsp"/> 22 </bean> 23 </beans>
接下来新建controller包
1 @RestController 2 public class AjaxController { 3 4 @RequestMapping("/a3") 5 public String test3(String name,String pwd){ 6 String msg = null; 7 if (name !=null){ 8 if ("admin".equals(name)){ 9 msg = "OK"; 10 }else{ 11 msg ="No"; 12 } 13 } 14 if (pwd !=null){ 15 if ("admin".equals(pwd)){ 16 msg = "OK"; 17 }else{ 18 msg ="No"; 19 } 20 } 21 return msg; 22 } 23 24 }
login.jsp
1 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 2 <html> 3 <head> 4 <title>Title</title> 5 <script src="/js/jquery-3.3.1.min.js"></script> 6 <script> 7 function a1(){ 8 $.post({ 9 url:"${pageContext.request.contextPath}/a3", 10 data:{"name":$("#name").val()}, 11 success:function (data) { 12 console.log(data) 13 if (data.toString()=='OK'){ 14 $("#userInfo").css('color','green'); 15 }else{ 16 $("#userInfo").css('color','red'); 17 } 18 $("#userInfo").html(data); 19 } 20 }) 21 } 22 function a2() { 23 $.post({ 24 url:"${pageContext.request.contextPath}/a3", 25 data: {"pwd":$("#pwd").val()}, 26 success:function(data){ 27 console.log(data) 28 } 29 }) 30 } 31 32 </script> 33 34 </head> 35 <body> 36 账号:<input type="text" id="name" name="name" onblur="a1()"> 37 <span id="userInfo"></span> 38 密码:<input type="text" id="pwd" name="pwd" onblur="a2()"> 39 <span id="pwdInfo"></span> 40 </body> 41 </html>
下面使用ajax获取后端数据显示到前台
新建实体类,导入lombok
@Data @AllArgsConstructor @NoArgsConstructor public class User { private String name; private int age; private String sex; }
controller
1 @RestController 2 public class AjaxController { 3 @RequestMapping("/a2") 4 public List<User> test2(){ 5 ArrayList<User> list = new ArrayList<>(); 6 list.add(new User("李四",1,"男")); 7 list.add(new User("李五",2,"男")); 8 list.add(new User("李六",3,"男")); 9 return list; 10 } 11 }
前端ajax页面
1 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 2 <html> 3 <head> 4 <title>Title</title> 5 <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script> 6 <script type="text/javascript"> 7 $(function () { 8 $("#a").click(function () { 9 $.post( 10 "${pageContext.request.contextPath}/a2",function(data) { 11 console.log(data[2]) 12 var html = "<>"; 13 for (let i = 0; i < data.length ; i++) { 14 html += "<tr>" + 15 "<td>" + data[i].name + "</td>" + 16 "<td>" + data[i].age + "</td>" + 17 "<td>" + data[i].sex + "</td>" + 18 "<tr>" 19 } 20 $("#content").html(html); 21 }); 22 }) 23 }) 24 </script> 25 </head> 26 <body> 27 <input type="button" value="加载数据" id="a"> 28 <table> 29 <tr> 30 <td>姓名</td> 31 <td>年龄</td> 32 <td>性别</td> 33 </tr> 34 <tbody id="content"> 35 36 </tbody> 37 </table> 38 </body> 39 </html>
