springmvc ajax post请求

蔚落 2022-06-01 08:24 307阅读 0赞

先去[http://mvnrepository.com/][http_mvnrepository.com]搜索fastjson，jackson-annotations，jackson-databind，jackson-core这几个库，根据对应的版本号拿到pom.xml中dependency标签内容，然后复制到项目中的pom.xml中

项目的pom.xml如下：

<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>com.springdemo</groupId>
      <artifactId>demo</artifactId>
      <packaging>war</packaging>
      <version>0.0.1-SNAPSHOT</version>
      <name>demo 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>javax.servlet</groupId>
        	<artifactId>javax.servlet-api</artifactId>
        	<version>3.1.0</version>
        </dependency>
        <dependency>
        	<groupId>org.springframework</groupId>
        	<artifactId>spring-webmvc</artifactId>
        	<version>4.2.4.RELEASE</version>
        </dependency>
        <dependency>
        	<groupId>com.fasterxml.jackson.core</groupId>
        	<artifactId>jackson-core</artifactId>
        	<version>2.9.0</version>
        </dependency>
        <dependency>
        	<groupId>com.fasterxml.jackson.core</groupId>
        	<artifactId>jackson-databind</artifactId>
        	<version>2.9.0</version>
        </dependency>
        <dependency>
        	<groupId>com.fasterxml.jackson.core</groupId>
        	<artifactId>jackson-annotations</artifactId>
        	<version>2.9.0</version>
        </dependency>
        <dependency>
        	<groupId>com.alibaba</groupId>
        	<artifactId>fastjson</artifactId>
        	<version>1.2.41</version>
        </dependency>
      </dependencies>
      <build>
        <finalName>demo</finalName>
      </build>
      <properties>  
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>  
      </properties>  
    </project>

然后项目maven install下载库

编写controller，使用@Responsebody注解，指定返回内容

代码，World.java:

package com.springmvc.controller;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    @Controller
    public class World {
        @RequestMapping(value="/hworld",method = RequestMethod.POST)
        @ResponseBody
        public  String sayHello(String pagenum){
        	//获得post参数
        	System.out.println(pagenum);
            return "{\"returncode\":0,\"message\":\"hello world\"}";
        }
    }

因为跨域问题要在同目录下配置CORS的Java代码，WebConfig.java:

package com.springmvc.controller;
    
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.CorsRegistry;
    import org.springframework.web.servlet.config.annotation.EnableWebMvc;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
    
    @Configuration
    @EnableWebMvc
    public class WebConfig extends WebMvcConfigurerAdapter {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**");
        }
    }

html文件，test.html

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>aaaa</title>
    		<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    		</script>
    	</head>
    	<body >
    		<button type="button" οnclick="load()">Click Me!</button>
    		<ul>
    		</ul>
    	</body>
    	<script>
    		  function load(){
    		     $.ajax({ 
    		        url:'http://127.0.0.1:8080/demo/hworld', 
    		        type:'post', //数据发送方式 
    		        dataType:'json', //接受数据格式 (这里有很多,常用的有html,xml,js,json) 
    		        data:'pagenum=1', //要传递的数据 
    		        error: function(){ //失败 
    		          alert('Error loading document'); 
    		        },
    		        success: function(msg){ //成功 
    					  alert(msg["message"]);
    		        }
    		      });
    		  };
    	</script>
    </html>

启动服务

![SouthEast][]

[http_mvnrepository.com]: http://mvnrepository.com/
[SouthEast]: /images/20220601/2cd7f9131a9b47d6a889f5212fa513b8.png