springmvc与html之间的Json交互

1.配置pom.xml

错误信息：The container 'Maven Dependencies' references non existing library

解决方案：下图的checkbox的钩给取消掉

2.代码结构见下图

代码如下

(1) 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/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>org.huan11.song</groupId>
  <artifactId>test</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>war</packaging>
  
  <properties>
      <spring.version>4.2.6.RELEASE</spring.version>
  </properties>
  
  <dependencies>
      <dependency>
          <groupId>org.springframework</groupId>
          <artifactId>spring-webmvc</artifactId>
          <version>${spring.version}</version>
      </dependency>
      <dependency>
          <groupId>com.fasterxml.jackson.core</groupId>
          <artifactId>jackson-core</artifactId>
          <version>2.4.3</version>
      </dependency>
      <dependency>
          <groupId>com.fasterxml.jackson.core</groupId>
          <artifactId>jackson-databind</artifactId>
          <version>2.4.3</version>
      </dependency>
      </dependencies>
</project>

(2) 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_2_5.xsd" id="WebApp_ID" version="2.5">
  <servlet>
     <servlet-name>test</servlet-name>
     <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
     <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
      <servlet-name>test</servlet-name>
      <url-pattern>/</url-pattern>
  </servlet-mapping>
</web-app>

(3) test-servlet.xml

<?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:aop="http://www.springframework.org/schema/aop"
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:tx="http://www.springframework.org/schema/tx"
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    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-3.0.xsd
         http://www.springframework.org/schema/aop
         http://www.springframework.org/schema/aop/spring-aop-3.0.xsd
         http://www.springframework.org/schema/tx 
         http://www.springframework.org/schema/tx/spring-tx-3.0.xsd
         http://www.springframework.org/schema/mvc 
         http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd ">
    
    <mvc:annotation-driven/>
    <context:component-scan base-package="spring.test" />
    <context:annotation-config />
    
    <mvc:resources location="/js/" mapping="/js/**"/>

    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/jsp/" />
        <property name="suffix" value=".jsp" />
    </bean>
</beans>

(4) test.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#json").click(function(){
        var data =[];
        var data1 = {"userId":"2","userName":"3"};
        var data2 = {"userId":"4","userName":"5"};
        data.push(data1);
        data.push(data2);
        $.ajax({
            url:"user/testJson",
            type:"post",
            contentType:"application/json",
            data:JSON.stringify(data),
            success:function(data){
                alert(data.userId);
            },
            error:function(XMLHttpRequest,textStatus,errorThrown) {
                alert(XMLHttpRequest.status);
                alert(XMLHttpRequest.readyState);
                alert(textStatus);
                alert(errorThrown);
            }
        })
    })
})

</script>
</head>
<body>
    <button id="json" value="json">json</button>
</body>
</html>

(5) HelloController.java

package spring.test.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class HelloController {

    @RequestMapping("/toHtml")
    public String toJsonHtml() {
        return "test";
    }
}

(6) JsonController.java

package spring.test.controller;

import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import spring.test.model.User;

@Controller
@RequestMapping("/user")
public class JsonController {

    @RequestMapping(value="/testJson",method=RequestMethod.POST)
    public @ResponseBody User testJson(@RequestBody List<User> users) {
        
        User u = new User();
        u.setUserId("5");
        u.setUserName("6");
        return u;
    }
}

(7) User.java

package spring.test.model;

public class User {
    private String userId;
    private String userName;
    public String getUserId() {
        return userId;
    }
    public void setUserId(String userId) {
        this.userId = userId;
    }
    public String getUserName() {
        return userName;
    }
    public void setUserName(String userName) {
        this.userName = userName;
    }
    
}

传值效果如下

相关阅读:
IT战略规划项目方法论（转）
008_Node中的require和import
007_Mac上安装Node和NPM
005_讨论多线程和单线程
 006_饿了么大前端总监sofish帮你理清前端工程师及大前端团队的成长问题！
005_解密饿了么大前端团队
 005_python对整数的拼接
 010_动态语言与鸭子类型及python2和3的区别
 010_vim和python整合开发
 009_一行python重要工具
原文地址：https://www.cnblogs.com/xiaoyezi/p/7087978.html