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;
}
}
传值效果如下
springmvc与html之间的Json交互的更多相关文章
- springMVC的高级数据绑定,以及json交互,全局异常配置,
一.窄化请求映射 1.在class上添加@RequestMapping(url)指定通用请求前缀, 限制此类下的所有方法请求url必须以请求前缀开头,通过此方法对url进行分类管理. 如下: @Con ...
- springMVC入门（六）------json交互与RESTFul风格支持
简介 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.由于其简单易用,目前常用来通过AJAX与后台进行交互.springMVC对于接收.发送JSON数据也 ...
- Ajax和SpringMVC之间JSON交互
Ajax和SpringMVC之间的json数据传输有两种方式: 1.直接传输Json对象 2.将Json序列化成json字符串 1.直接传输Json对象 前端Ajax $(document).read ...
- SpringMVC详解（六）------与json交互
Json(JavaScript Object Notation),它是一种轻量级数据交换格式,格式简单,易于读写,目前使用特别广泛.那么这篇博客我们主要谈谈在 SpringMVC 中,如何对 json ...
- SpringMVC框架五：图片上传与JSON交互
在正式图片上传之前,先处理一个细节问题: 每一次发布项目,Tomcat都会重新解压war包,之前上传过的图片会丢失 为了解决这个问题:可以不在Tomcat下保存图片,而是另找一个目录. 上传图片: & ...
- SpringMVC之JSON交互
#什么是json? json是一种用于储存数据格式,是js脚本语言的子集. #json的作用? 它可以传递对象.数组等数据结构.如果是单个数据,则要用数组,不用对象,因为对象都是键值对的 方式去存储, ...
- springmvc实现json交互 -requestBody和responseBody
json数据交互 1.为什么要进行json数据交互 json数据格式在接口调用中.html页面中较常用,json格式比较简单,解析还比较方便. 比如:webservice接口,传输json数据. 2. ...
- Ajax json交互和SpringMVC中@RequestBody
Ajax json交互和SpringMVC中@RequestBody 标签: 背景 自己提供出去得接口中参数设置为@RequestBody VipPromotionLog vipPromotionLo ...
- SpringMVC的json交互
一.注解说明 1.@RequestBody 作用:@RequestBody注解用于读取http请求的内容(字符串),通过springmvc提供的HttpMessageConverter接口将读到的内 ...
随机推荐
- （C#版本）提升SQlite数据库效率——开启事务，极速插入数据，3秒100万，32秒1000万条数据
SQLite插入数据效率最快的方式就是:开启事务 + insert语句 + 关闭事务(提交) 利用事务的互斥性,如果在批量的插入操作前显式地开启一次事务,在插入操作结束后,提交事务,那么所有 ...
- Android 推送
安卓推送方案及比较 http://www.eoe.cn/news/11955.html ******************************************************** ...
- ClamAV学习【1】——ClamAV流程
不知道是对还是错,一开始就上手学习ClamAV,享受被虐的过程吧. 发现ClamAV的官网也很少资料,搜商还有待加强,大概翻阅了example的源代码,明白了其查毒的大概方式(BM和AC算法匹配特征码 ...
- 使用Fiddler代理调试本地手机页面
从事前端开发的同学一定对 Fiddler 不陌生,它是一个非常强大的http(s)协议分析工具.我们知道如何在电脑上调试页面请求,但在手机端你没有这么多强大好用的调试工具来调试你的webapp,如果你 ...
- robot framework学习笔记之七—连接mysql数据库
1.安装Database-Library 输入命令:pip install robotframework_databaselibrary 2.添加Database的Library 3.实例 * ...
- Spring Boot启动过程（三）
我已经很精简了,两篇(Spring Boot启动过程(一).pring Boot启动过程(二))依然没写完,接着来. refreshContext之后的方法是afterRefresh,这名字起的真.. ...
- 计算机网络课设之TCP通讯录
这篇文章我主要是想对这学期末计算机网络课程设计所做的一个小项目也就是基于tcp协议的通讯录做一个总结梳理.项目的具体的代码实现是基于C语言,当然在此之前网上也有一些基于c++编写的tcp通讯录,原理都 ...
- 架构师养成记--37.简单shell编程
一.HelloWord.sh echo 表示打印,可以在sh文件中写诸如pwd.ls 这样的命令,使用命令的时候尽量使用全路径. #!/bin/sh #this is my first sh echo ...
- php 下载文件/直接下载数据内容
思路步骤 * 定义参数 * 魔术方法 * 执行下载 * 获取设置属性函数 * 获取设置文件mime 类型 * 获取设置下载文件名 * 设置header * 下载函数 实现代码 class DownFi ...
- JSONP-跨域读取数据
页面代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...