ajax提交相对路径报错,SpringMVC之数据传递三Ajax与Controller交互(示例代码)

前面学习了拦截器,通过拦截器我们可以拦截请求,做进一步处理之后再往下进行,这里我们使用Ajax的时候会有一个问题就是会把js、css这些静态资源文件也进行了拦截,这样在jsp中就无法引入的静态资源文件。所以在spring-mvc.xml配置拦截器时需要进行优化。

b812fd4d5575446ab89592c9ad0edeea.jpg

bdc778ce91a0497db301e1f4b51765df.jpg

View Code

一、静态资源文件的引入

这里我们用jquery.js文件为例子。如下图把js文件放在了webapp下的js文件夹下.除了配置拦截器外还需要在spring-mvc.xml中配置对静态资源文件的访问.

6b2486816e95472d84286e39adfcf751.jpg

b812fd4d5575446ab89592c9ad0edeea.jpg

bdc778ce91a0497db301e1f4b51765df.jpg

View Code

二、在jsp页面引入静态资源文件

下面代码写了两种方式引入,第一种是相对路径,第二种是绝对路径.

b812fd4d5575446ab89592c9ad0edeea.jpg

bdc778ce91a0497db301e1f4b51765df.jpg

/js/jquery-3.3.1.min.js">

Stringpath=request.getContextPath();StringbasePath=request.getScheme()+ "://"

+request.getServerName()+ ":" +request.getServerPort()+path+ "/";%>

js/jquery-3.3.1.min.js">

View Code

d6fe440be89b4c7d87c36a64df996f4f.jpg

三、Ajax与Controller交互

1.jsp页面发起json请求

b812fd4d5575446ab89592c9ad0edeea.jpg

bdc778ce91a0497db301e1f4b51765df.jpg

/js/jquery-3.3.1.min.js">

Stringpath=request.getContextPath();StringbasePath=request.getScheme()+ "://"

+request.getServerName()+ ":" +request.getServerPort()+path+ "/";%>

js/jquery-3.3.1.min.js">

$(document).ready(function(){

$("#btnlogin").click(function(){varjson={\'name\':$(\':input[name=username]\').val(),\'pwd\':$(\':input[name=password]\').val(),\'birthday\':\'2018-05-01\'};varpostdata=JSON.stringify(json);//json对象转换json字符串

alert(postdata);

$.ajax({

type :\'POST\',

contentType :\'application/json;charset=UTF-8\',//注意类型

processData :false,

url :\'/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);

}

});

});

});

Insert title here

姓名:
密码:

View Code

这里增加了一个登陆按钮,按钮点击向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 将请求体写入某个对象。

b812fd4d5575446ab89592c9ad0edeea.jpg

bdc778ce91a0497db301e1f4b51765df.jpg

@RequestMapping(value="requestbodybind", method ={RequestMethod.POST})

@ResponseBodypublicUser requestBodyBind(@RequestBody User user){

System.out.println("requestbodybind:" +user);returnuser;

}

View Code

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.

com.fasterxml.jackson.core

jackson-databind

2.9.5

四、小结

基本把springmvc大致过了一遍,今天大概了解了后续的,发现还有好多要学的,springboot、springcloud等等.一口吃不了胖子,还是需要一点一点的学。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值