专栏首页大数据-数据人生Ajax请求SpringMVC Json数据报错Http 400(一)

Ajax请求SpringMVC Json数据报错Http 400(一)

Ajax请求SpringMVC Json数据报错Http 400(一)

作者:幽鸿   Apr 15, 2016 9:40:55 PM

    最近在完善博客的过程中,发现了一些细节问题。后台使用的是SpringMvc,前台使用的是jquery请求。之前后台采用的是

@RequestMapping标签,直接返回视图。最近脑子发热,觉得返回通用格式json数据比较好。于是逐步修改,在修改过程中,踩了

一个坑,就是前台页面请求后台的时候,后台使用@RequsetBody和RequestParam进行转换请求对象,报了http 400 Bad Request错

误。于是就引出了这篇文章。

   一下子觉得这篇文章想说的东西很多,什么是http 400错误?为什么Spring MVC接受数据会报出400错误?@RequestBody和@RequestParam的底层又是怎们实现的呢?等等一些列问题,简而言之,本文就简单探讨下这个请求的前台和后台实现吧。

一、再现场景,搭建好测试环境   

首先我的前台代码如下:

test ajax

    
    function testAjax()
    {
        var html="<h2>授权用户Test</h2><br><br>";
        html+='<form id="#authForm" method="post">';
        
        $.ajax({
                url : 'http://localhost:8080/Blog/authMenus.html',
                  type : 'POST',
//               contentType : 'application/json',  
                data : {"userId":'27'},
                dataType : 'json',
                success : function(data) {
                    $.each(data,function(k,v){
                        html+='<input type="checkbox" name="authCheck" value="'+v.id+'"';
                        if(v.status==1)
                            html+='checked="'+v.status+'"';
                        html+='>'+v.name+' ';
                        
                        if((k+1)%5==0){
                            html+='<br>';
                        }
                    });
                    
                    html+='<br><br><br>';
                    html+='<a href="javascript:authSubmit()" id="authBtn" class="easyui-linkbutton">授 权</a>';
                    html+='</form>';

                    $('#auth').html(html);
                },
                error : function(data) {
                    alert('查询菜单失败!');
                }
            });
    
    }





Hello World

   首先,当我们前台访问url : 'http://localhost:8080/Blog/authMenus.html'的时候会报“No 'Access-Control-Allow-Origin' header is present on the requested resource”错误,这是个什么错误呢?原来当我们的ajax请求其他域名的时候,就是跨域的场景了。什么是跨域呢?简单来说,就是一个域名里的请求访问另外一个域名里的服务,就是跨域了。我这里,是直接把上面代码写在本地的html页面了,访问的url为:file:///C:/Users/*****/Desktop/****/testAjax.html,注意开头啦,而我们请求的服务器地址为http://localhost:8080开头。明显跨域了。

   那么怎么解决这个问题呢?其实很简单,在SpringMvc方法里加入HttpServletResponse response,并且给response加一个header,代码如下:

@ResponseBody
    @RequestMapping(value="/authMenus.html", produces = "text/html;charset=UTF-8")
    public String getAuthMenus(@RequestParam(value="userId",required=true) String userId,HttpServletRequest request,HttpServletResponse response) {
     response.addHeader("Access-Control-Allow-Origin", "*");

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Hive在load data时注意事项

    create table if not exists bdp_log(         tableName string ,             dat...

    幽鸿
  • Nginx安装部署

    貌似Nginx这两年比较火,Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下...

    幽鸿
  • jsp中include的两种形式

    作者:幽鸿   May 12, 2015 10:38:22 AM

    幽鸿
  • react native使用WebView加载本地html部署方案

    十里桃花舞丶
  • html概述和基本结构 - html的helloworld

    HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语...

    Devops海洋的渔夫
  • webpack打包配置禁止html标签全部转为小写

    用webpack打包页面,发现html中特别写的用来给后端识别的大写标签全部被转为了小写标签,这时候需要将加一个配置 ,caseSensitive:true ,...

    蓓蕾心晴
  • 生信人的R语言视频教程-语法篇-第十一章:R中的网络爬虫

    用任何语言做爬虫必须要了解的就是网页语法,网页语言无非就是HTML,XML,JSON等,因为正是通过这些我们才能在网页中提取数据,过多的就不再描述,大家可以自行...

    DoubleHelix
  • 为了不复制粘贴,我被逼着学会了JAVA爬虫

    受疫情影响一直在家远程办公,公司业务进展的缓慢,老实讲活并没有那么多,每天吃饭、睡觉、逛技术社区、写博客,摸鱼摸得爽的很。早上本来还想在来个回笼觉,突然部门经理...

    程序员内点事
  • 为了不复制粘贴,我被逼着学会了JAVA爬虫

    受疫情影响一直在家远程办公,公司业务进展的缓慢,老实讲活并没有那么多,每天吃饭、睡觉、逛技术社区、写博客,摸鱼摸得爽的很。早上本来还想在来个回笼觉,突然部门经理...

    程序员内点事
  • Python爬虫入门教程 19-100 51CTO学院IT技术课程抓取

    从今天开始的几篇文章,我将就国内目前比较主流的一些在线学习平台数据进行抓取,如果时间充足的情况下,会对他们进行一些简单的分析,好了,平台大概有51CTO学院,C...

    梦想橡皮擦

扫码关注云+社区

领取腾讯云代金券