spring mvc 和ajax异步交互完整实例代码

宋新知

2023-03-14

本文向大家介绍spring mvc 和ajax异步交互完整实例代码，包括了spring mvc 和ajax异步交互完整实例代码的使用技巧和注意事项，需要的朋友参考一下

spring MVC 异步交互demo：

1.jsp页面：

<%@ page language="java" contentType="text/html; charset=utf-8" 
 pageEncoding="utf-8"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<script type="text/javascript" src="js/jquery-2.1.3.js"></script> 
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script> 
<meta http-equiv="Content-Type" content="text/html; charset=utf8"> 
<title>Insert title here</title> 
<script type="text/javascript"> 
 function ajaxTest(){ 
  $.ajax({ 
  data:"name="+$("#name").val(), 
  type:"GET", 
  dataType: 'json', 
  url:"user/login.do", 
  error:function(data){ 
   alert("出错了！！:"+data.msg); 
  }, 
  success:function(data){ 
   alert("success:"+data.msg); 
   $("#result").html(data.msg) ; 
  } 
  }); 
 } 
</script> 
</head> 
<body> 
 <input type="text" name="name" id="name"/> 
 <input type="submit" value="登录" onclick="ajaxTest();"/> 
 <div id="result"></div> 
</body> 
</html>

2.controller：

package xm.zjl.controller; 
 
import java.io.IOException; 
import java.util.HashMap; 
import java.util.Map; 
 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
 
import org.springframework.stereotype.Controller; 
import org.springframework.web.bind.annotation.RequestMapping; 
import org.springframework.web.bind.annotation.ResponseBody; 
 
/** 
 * 登录controller 
 * 
 * @author Administrator 
 * 
 */ 
@Controller 
@RequestMapping("/user/*") 
public class LoginController { 
 @RequestMapping(value="login.do") 
 public @ResponseBody Map<String,Object> login(HttpServletRequest request,HttpServletResponse response) throws IOException{ 
  System.out.println(request.getParameter("name")); 
  Map<String,Object> map = new HashMap<String,Object>(); 
   
  if(request.getParameter("name").equals("123")){ 
   System.out.println("城东"); 
   map.put("msg", "成功"); 
  }else{ 
   System.out.println("失败"); 
   map.put("msg", "失败"); 
  } 
  return map; 
 } 
  
}

3.pom文件：

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> 
 <modelVersion>4.0.0</modelVersion> 
 <groupId>xiaoma</groupId> 
 <artifactId>zjl</artifactId> 
 <packaging>war</packaging> 
 <version>0.0.1-SNAPSHOT</version> 
 <name>zjl Maven Webapp</name> 
 <url>http://maven.apache.org</url> 
 <dependencies> 
  <dependency> 
   <groupId>junit</groupId> 
   <artifactId>junit</artifactId> 
   <version>3.8.1</version> 
   <scope>test</scope> 
  </dependency> 
  <dependency> 
   <groupId>org.springframework</groupId> 
   <artifactId>spring-webmvc</artifactId> 
   <version>4.1.0.RELEASE</version> 
  </dependency> 
  <dependency> 
   <groupId>org.springframework</groupId> 
   <artifactId>spring-web</artifactId> 
   <version>4.1.0.RELEASE</version> 
  </dependency> 
  <dependency> 
   <groupId>com.fasterxml.jackson.core</groupId> 
   <artifactId>jackson-databind</artifactId> 
   <version>2.5.0</version> 
  </dependency> 
  <dependency> 
   <groupId>commons-beanutils</groupId> 
   <artifactId>commons-beanutils</artifactId> 
   <version>1.9.2</version> 
  </dependency> 
  <dependency> 
   <groupId>org.codehaus.jackson</groupId> 
   <artifactId>jackson-mapper-asl</artifactId> 
   <version>1.9.13</version> 
  </dependency> 
 
  <dependency> 
   <groupId>org.codehaus.jackson</groupId> 
   <artifactId>jackson-core-asl</artifactId> 
   <version>1.9.13</version> 
  </dependency> 
 </dependencies> 
 <build> 
  <finalName>zjl</finalName> 
  <plugins> 
   <plugin> 
    <groupId>org.mortbay.jetty</groupId> 
    <artifactId>jetty-maven-plugin</artifactId> 
    <configuration> 
     <stopPort>9966</stopPort> 
     <stopKey>foo</stopKey> 
     <scanIntervalSeconds>0</scanIntervalSeconds> 
     <connectors> 
      <connector implementation="org.eclipse.jetty.server.nio.SelectChannelConnector"> 
       <port>8088</port> 
       <maxIdleTime>60000</maxIdleTime> 
      </connector> 
     </connectors> 
     <webAppConfig> 
      <contextPath>/</contextPath> 
     </webAppConfig> 
    </configuration> 
   </plugin> 
 
   <plugin> 
    <groupId>org.apache.tomcat.maven</groupId> 
    <artifactId>tomcat7-maven-plugin</artifactId> 
    <version>2.2</version> 
    <configuration> 
     <port>8088</port> 
     <path>/</path> 
     <uriEncoding>UTF-8</uriEncoding> 
    </configuration> 
   </plugin> 
  </plugins> 
 </build> 
</project>

这里注意如果相关json包没有添加到pom.xml文件中会报：406 not acceptable

4.spring-servlet.xml文件：

<beans xmlns="http://www.springframework.org/schema/beans" 
 xmlns:context="http://www.springframework.org/schema/context" 
 xmlns:p="http://www.springframework.org/schema/p" 
 xmlns:mvc="http://www.springframework.org/schema/mvc" 
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
 xsi:schemaLocation="http://www.springframework.org/schema/beans 
  http://www.springframework.org/schema/beans/spring-beans-3.0.xsd 
  http://www.springframework.org/schema/context 
  http://www.springframework.org/schema/context/spring-context.xsd 
  http://www.springframework.org/schema/mvc 
  http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd"> 
  <!-- 启动注解驱动的Spring MVC功能，注册请求url和注解POJO类方法的映射--> 
  <mvc:annotation-driven /> 
  <!-- 启动包扫描功能，以便注册带有@Controller、@Service、@repository、@Component等注解的类成为spring的bean --> 
  <context:component-scan base-package="xm.zjl.controller" /> 
  <!-- 对模型视图名称的解析，在请求时模型视图名称添加前后缀 --> 
  <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" p:prefix="/" p:suffix=".jsp" /> 
</beans>

5.web.xml文件：

<?xml version="1.0" encoding="UTF-8"?> 
<web-app  
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
 xmlns="http://java.sun.com/xml/ns/javaee"  
 xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" 
 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" 
 id="WebApp_ID"  
 version="3.0"> 
 <context-param> 
  <param-name>contextConfigLocation</param-name> 
  <!-- 应用上下文配置文件 --> 
  <param-value>/WEB-INF/spring-servlet.xml</param-value> 
 </context-param> 
 <listener> 
  <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> 
 </listener> 
 <!-- 配置spring核心servlet --> 
 <servlet> 
  <servlet-name>spring</servlet-name> 
  <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> 
  <load-on-startup>1</load-on-startup> 
 </servlet> 
 <!-- url-pattern配置为/，不带文件后缀，会造成其它静态文件(js，css等)不能访问。如配为*.do，则不影响静态文件的访问 --> 
 <servlet-mapping> 
  <servlet-name>spring</servlet-name> 
  <url-pattern>*.do</url-pattern> 
 </servlet-mapping> 
</web-app>

这里需要注意的是：

<servlet-mapping> 
  <servlet-name>spring</servlet-name> 
  <url-pattern>*.do</url-pattern> 
 </servlet-mapping>

如果写成：

<servlet-mapping> 
  <servlet-name>spring</servlet-name> 
  <url-pattern>/</url-pattern> 
 </servlet-mapping>

会提示：$ is not defined错误

记录一下

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。

spring mvc 和ajax异步交互完整实例代码

相关阅读

相关文章

相关问答

相关工具

相关文档