前面学习了拦截器，通过拦截器我们可以拦截请求，做进一步处理之后再往下进行，这里我们使用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交互的更多相关文章

  1. springmvc使用ajax进行数据交互时，session失效问题（@ResponseBody与session能否同时使用？）

    今天做博客demo的时候遇到了这样的问题:当我用ajax进行资源请求时,需要顺便将账户信息存入session.但是后来发现有@Responsebody标签时,直接用HttpSession存数据时,根本 ...

  2. SpringMVC与Ajax交互

    1 springmvc和ajax的交互 1.1  请求字符串响应json 客户端发送的数据:key=value&key1=value1 响应回来:json 1.1.1json的支持jar包 1 ...

  3. Ajax与Controller的参数交互

    理论 jQuery.ajax( options )中重要参数设置 jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据.通过jquery.ajax与SpringMVC的C ...

  4. SpringMVC和AJAX交互

    在实际开发中我们经常需要前后台交互,那么springmvc与ajax之间交互这里记录下在实际开发中遇到的细节问题. jsp页面: <fieldset id="login" s ...

  5. springMvc 使用ajax上传文件，返回获取的文件数据 附Struts2文件上传

    总结一下 springMvc使用ajax文件上传 首先说明一下,以下代码所解决的问题 :前端通过input file 标签获取文件,通过ajax与后端交互,后端获取文件,读取excel文件内容,返回e ...

  6. SpringMVC实现AJax以及RestFull风格

    RestFull风格就是url路径中不能出现?不能带参数,如https://www.baidu.com/user/item/1234这个格式,也叫url资源定位 1.需要在web.xml中开启put, ...

  7. 本文使用springMVC和ajax，实现将JSON对象返回到页面

    一.引言 本文使用springMVC和ajax做的一个小小的demo,实现将JSON对象返回到页面,没有什么技术含量,纯粹是因为最近项目中引入了springMVC框架. 二.入门例子 ①. 建立工程, ...

  8. springmvc的ajax返回406问题

    在springmvc中ajax请求写为XXX.html,如果在controller的如:@RequestMapping(value="/login/doLogin.html",pr ...

  9. thinkphp+jquery+ajax前后端交互注册验证

    thinkphp+jquery+ajax前后端交互注册验证,界面如下 register.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...

随机推荐

  1. 南京邮电大学java程序设计作业在线编程第一次作业

    王利国的"Java语言程序设计第1次作业(2018)"详细 作业结果详细 总分:100 选择题得分:40  1. Java语言中,基本数据类型一共有( )种. A.16 B.2 C ...

  2. flask 操作mysql的两种方式-sql操作

    flask 操作mysql的两种方式-sql操作 一.用常规的sql语句操作 # coding=utf-8 # model.py import MySQLdb def get_conn(): conn ...

  3. jquery、js调用iframe父窗口与子窗口元素的方法整理

    1. jquery 在iframe子页面获取父页面元素代码如下: $("#objid", parent.document) 2. jquery在父页面 获取iframe子页面的元素 ...

  4. 使Asp.net Core同时支持输出Json/Xml

    我们知道Asp.net Core是支持输出为Json格式的.同时也支持输出为xml格式.只要我们正确的配置.并在Request时指定正确的Accept,即可根据不同的Header来输出不同的格式. 前 ...

  5. springaop——AspectJ不可不知的细节

    springaop简介 springaop是spring对AOP技术的具体实现,它是spring框架的核心技术.springaop底层使用JDK动态代理或CGLIB动态代理技术实现. 应用场景: 在多 ...

  6. Leetcode-颠倒整数

    给定一个范围为 32 位 int 的整数,将其颠倒. 例 1: 输入: 123 输出: 321 例 2: 输入: -123 输出: -321 例 3: 输入: 120 输出: 21 注意: 假设我们的 ...

  7. Vue2.0父子组件之间的双向数据绑定问题解决方案

    对于vue 1.0项目代码,如果把vue换成vue 2.0,那么之后项目代码就完全奔溃不能运行,vue 2.0在父子组件数据绑定的变化(不再支持双向绑定)颠覆了1.0的约定,很遗憾. 解决方案只有两种 ...

  8. 医疗器械c#上位机开发指引教程

    此教程面向的读者:对医疗器械上位机编程有兴趣,或者急需了解医疗器械(尿常规.血液分析.生化.心电.B超等医疗下位仪器)的编程流程.编程细节的程序员. 1.得到仪器协议 当我们需要与医疗器械等下位机数据 ...

  9. pdf如何转换为word文档

    我们经常会遇到需要将PDF转换为WORD文档,对于我来讲,有些PDF没有目录,看起来非常不方便,于是就特别想转成WORD,然后增加目录,想看某一节内容时,快速查找. 这里我总结了一些方法,后续也会不断 ...

  10. [SHOI2008]堵塞的交通

    Description 有一天,由于某种穿越现象作用,你来到了传说中的小人国.小人国的布局非常奇特,整个国家的交通系统可 以被看成是一个2行C列的矩形网格,网格上的每个点代表一个城市,相邻的城市之间有 ...