SpringMVC之Ajax与Controller交互
前面学习了拦截器，通过拦截器我们可以拦截请求，做进一步处理之后再往下进行，这里我们使用Ajax的时候会有一个问题就是会把js、css这些静态资源文件也进行了拦截，这样在jsp中就无法引入的静态资源文件。所以在spring-mvc.xml配置拦截器时需要进行优化。
<mvc:interceptors>
<mvc:interceptor>
<mvc:mapping path="/**/*"/>
<mvc:exclude-mapping path="/**/fonts/*"/>
<mvc:exclude-mapping path="/**/*.css"/>
<mvc:exclude-mapping path="/**/*.js"/>
<mvc:exclude-mapping path="/**/*.png"/>
<mvc:exclude-mapping path="/**/*.gif"/>
<mvc:exclude-mapping path="/**/*.jpg"/>
<mvc:exclude-mapping path="/**/*.jpeg"/>
<mvc:exclude-mapping path="/**/*login*"/>
<mvc:exclude-mapping path="/**/*Login*"/>
<bean class="com.cyw.web.Intercepter.LoginIntercepter"></bean>
</mvc:interceptor>
</mvc:interceptors>
一、静态资源文件的引入
这里我们用jquery.js文件为例子。如下图把js文件放在了webapp下的js文件夹下.除了配置拦截器外还需要在spring-mvc.xml中配置对静态资源文件的访问.
<!-- 对静态资源文件的访问 方案一 （二选一） -->
<mvc:default-servlet-handler />
<!-- 对静态资源文件的访问 方案二 （二选一） -->
<mvc:resources mapping="/images/**" location="/images/" cache-period="31556926"/>
<mvc:resources mapping="/js/**" location="/js/" cache-period="31556926"/>
<mvc:resources mapping="/css/**" location="/css/" cache-period="31556926"/>
二、在jsp页面引入静态资源文件
下面代码写了两种方式引入,第一种是相对路径，第二种是绝对路径.
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-3.3.1.min.js"></script>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<script type= "text/javascript" src= "<%=basePath %>js/jquery-3.3.1.min.js"></script >
三、Ajax与Controller交互
1.jsp页面发起json请求
<%@ 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-3.3.1.min.js"></script>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<script type= "text/javascript" src= "<%=basePath %>js/jquery-3.3.1.min.js"></script >
<script type="text/javascript">
$(document).ready(function(){
$("#btnlogin").click(function(){
var json = {
'name':$(':input[name=username]').val(),
'pwd':$(':input[name=password]').val(),
'birthday':'2018-05-01'
};
var postdata = JSON.stringify(json);//json对象转换json字符串
alert(postdata); $.ajax({
type : 'POST',
contentType : 'application/json;charset=UTF-8',//注意类型
processData : false,
url : '<%=path%>/login/requestbodybind',
dataType : 'json',
data : postdata,
success : function(data) {
alert('username : '+data.name+'\npassword : '+data.pwd);
},
error : function(err) {
console.log(err.responseText);
alert(err.responseText); }
});
});
}); </script>
<title>Insert title here</title>
</head> <body>
<form action="../login/login.action" method="post">
姓名：<input type="text" name="username"> <br><br>
密码： <input type="text" name="password"> <br><br>
<input type="button" value="登陆" id="btnlogin"> <input type="submit" value="登陆">
</form>
</body>
</html>
这里增加了一个登陆按钮，按钮点击向Controller发生post请求。这里写时间参数的话也需要注意一下，我开始是2018/05/01这种，但发现后端不能转换，提示需要转成2018-05-01这种。
2.Controller接收json请求
这里主要是有两个注解:@RequestBody和@ResponseBody。
@RequestBody是作用在形参列表上，用于将前台发送过来固定格式的数据【xml 格式或者 json等】封装为对应的 JavaBean 对象，封装时使用到的一个对象是系统默认配置的 HttpMessageConverter进行解析，然后封装到形参上。
@ResponseBody是作用在方法上的，@ResponseBody 表示该方法的返回结果直接写入 HTTP response body 中，一般在异步获取数据时使用【也就是AJAX】，在使用 @RequestMapping后，返回值通常解析为跳转路径，但是加上 @ResponseBody 后返回结果不会被解析为跳转路径，而是直接写入 HTTP response body 中。 比如异步获取 json 数据，加上 @ResponseBody 后，会直接返回 json 数据。@RequestBody 将 HTTP 请求正文插入方法中，使用适合的 HttpMessageConverter 将请求体写入某个对象。
@RequestMapping(value="requestbodybind", method = {RequestMethod.POST})
@ResponseBody
public User requestBodyBind(@RequestBody User user){
System.out.println("requestbodybind:" + user);
return user;
}
3.运行
当启动点击登录按钮时报错.百度了下是需要在maven中引入jackson-databind。
HTTP Status 415 – Unsupported Media Type.The origin server is refusing to service the request because the payload is in a format not supported by this method on the target resource.
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.5</version>
</dependency>
四、小结
基本把springmvc大致过了一遍，今天大概了解了后续的，发现还有好多要学的,springboot、springcloud等等.一口吃不了胖子,还是需要一点一点的学。
SpringMVC之Ajax与Controller交互的更多相关文章
- springmvc使用ajax进行数据交互时，session失效问题（@ResponseBody与session能否同时使用？）
今天做博客demo的时候遇到了这样的问题:当我用ajax进行资源请求时,需要顺便将账户信息存入session.但是后来发现有@Responsebody标签时,直接用HttpSession存数据时,根本 ...
- SpringMVC与Ajax交互
1 springmvc和ajax的交互 1.1 请求字符串响应json 客户端发送的数据:key=value&key1=value1 响应回来:json 1.1.1json的支持jar包 1 ...
- Ajax与Controller的参数交互
理论 jQuery.ajax( options )中重要参数设置 jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据.通过jquery.ajax与SpringMVC的C ...
- SpringMVC和AJAX交互
在实际开发中我们经常需要前后台交互,那么springmvc与ajax之间交互这里记录下在实际开发中遇到的细节问题. jsp页面: <fieldset id="login" s ...
- springMvc 使用ajax上传文件，返回获取的文件数据 附Struts2文件上传
总结一下 springMvc使用ajax文件上传 首先说明一下,以下代码所解决的问题 :前端通过input file 标签获取文件,通过ajax与后端交互,后端获取文件,读取excel文件内容,返回e ...
- SpringMVC实现AJax以及RestFull风格
RestFull风格就是url路径中不能出现?不能带参数,如https://www.baidu.com/user/item/1234这个格式,也叫url资源定位 1.需要在web.xml中开启put, ...
- 本文使用springMVC和ajax，实现将JSON对象返回到页面
一.引言 本文使用springMVC和ajax做的一个小小的demo,实现将JSON对象返回到页面,没有什么技术含量,纯粹是因为最近项目中引入了springMVC框架. 二.入门例子 ①. 建立工程, ...
- springmvc的ajax返回406问题
在springmvc中ajax请求写为XXX.html,如果在controller的如:@RequestMapping(value="/login/doLogin.html",pr ...
- thinkphp+jquery+ajax前后端交互注册验证
thinkphp+jquery+ajax前后端交互注册验证,界面如下 register.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
随机推荐
- awk、变量、运算符、if多分支
awk.变量.运算符.if多分支 awk: 语法 awk [options] 'commands' files option -F 定义字段分隔符,默认的分隔符是连续的空格或制表符 使用option中 ...
- Linux安装git和maven的详细过程
一.使用yum安装git 当前安装环境是centos6.5 由于在CentOS6的yum源中已经有git的版本了,可以直接使用yum源进行安装 yum -y install git 由于centos6 ...
- jacascript DOM节点——节点关系与操作
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 节点关系 DOM可以将任何HTML描绘成一个由多层节点构成的结构.每个节点都拥有各自的特点.数据和方法,也 ...
- jQuery中的事件监听小记
一,一个事件监听的简便写法 最近发现一个jQuery中事件监听的简洁写法,感觉方便好多.同时也深感自己基础薄弱,好多东西竟然都模棱两可.因此,记录的同时,也对jQuery事件监听做个小的总结 原文链接 ...
- ES6(正则扩展）
ES6中正则的扩展 正则新增特性 一.构造函数的变化 1.ES5中new一个正则对象方法 (一行中2个参数,二行中1个参数) (第一行中的第一个参数必须是字符串) 2.ES6中新增一种方法(构造函数) ...
- java制作验证码（java验证码小程序）
手动制作java的验证码 Web应用验证码的组成: (1)输入框 (2)显示验证码的图片 验证码的制作流程: 生成验证码的容器使用 j2ee的servlet 生成图片需要的类: (1) Buffere ...
- cogs 558 奇怪的函数
提交地址:http://cojs.tk/cogs/problem/problem.php?pid=558 558. 奇怪的函数 ★☆ 输入文件:xx.in 输出文件:xx.out 简单对比 ...
- django rest-framework 1.序列化 二
在上一节说了Serializers的使用类似Django的From,在Django中有From也有ModelFrom,Serializers也是有个ModelSerializers,下面在讲讲rest ...
- EF 6.x、EF Core实现dynamic动态查询和EF Core实现多个上下文实例池你了解多少？
前言 很长一段时间没有写博客了,今天补上一篇吧,偶尔发现不太愿意写博客了,太耗费时间,不过还是在坚持当中,毕竟或许写出来的东西能帮到一些童鞋吧,接下来我们直奔主题.无论是在在EF 6.x还是EF Co ...
- IntelliJ IDEA安装配置
1. 从官网安装最新版IntelliJ Idea软件. 2. 激活使用 http://www.3322.cc/soft/37661.html 3. 配置eclipse快捷键 File-->Set ...