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接口将读到的内 ...
随机推荐
- VMware 中时间同步设置
在VMware Workstation 9中安装了一个Ubuntu Server,跑了一段时间之后常发现虚拟机中系统(客户系统)时间要比物理机(宿主系统)中的系统时间慢很多. 几经折腾(部署在VMwa ...
- WPF ControlTemplate 动画板 结束事件不触发
解决此问题很简单 将Storyboard单独提取出来及可 给定Key名称,然后在触发器中的BeginStoryboard的storyboard绑定即可 <!--单独提取并设置Xkey--> ...
- 第四界css大会 黑魔法-css网格背景、颜色拾取器、遮罩、文字颜色渐变、标题溢出渐变等
1.css网格背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- jquery中通过添加readonly或者disabled属性实现行为禁止 / 去除某个属性的方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Python(简单计算器)
参考:https://www.cnblogs.com/alex3714/articles/5169958.html import re ret = re.search('\([^()]+\)','(1 ...
- 蹭你wifi后 我竟然干了这样的事
前言:故事发生在前两天,我们去参观工业园区内一家电商公司. 去参观他们公司的时候,我说要用下无线网,他们技术说密码就是他们的网站域名,我一脸懵逼表示我不知道域名,然后对方接过我手机给我连上了他们wif ...
- Display all 2232 possibilities? (y or n)
Linux下我在没输入任何命令的情况下摁了两下tab键,然后就出现了这个提示:Display all 2232 possibilities? (y or n) 我觉得摁y的话就会显示所有的现阶段命令. ...
- vue + ElementUI 表格筛选框的高度设置，超出一定高度，显示滚动条
相信有很多小伙伴遇到过这个问题,首先还是来看图片,筛选框我做了处理,所以和官网的有点小差别 官方网站和个人网站对比图如下: 代码如下:(F12找到该元素的class,设置高度) .el-table-f ...
- jquery源码解析：addClass，toggleClass，hasClass详解
这一课,我们将继续讲解jQuery对元素属性操作的方法. 首先,我们先看一下这几个方法是如何使用的: $("#div1").addClass("box1 box2&quo ...
- django实战-留言板
对应github链接:https://github.com/pshyms/django/tree/master/liuyanban 第一天 1. 创建一个新项目后,新建一个应用程序 python ma ...