码迷,mamicode.com
首页 > 编程语言 > 详细

springMVC之浏览器到后台的数据传递

时间:2017-08-06 20:55:35      阅读:261      评论:0      收藏:0      [点我收藏+]

标签:erro   contact   对象类型   工具   query   pre   admin   .ajax   复杂   

在讲浏览器到后台的数据传递之前先了解几个概念:
json对象,json字符串,spingMVC的注解@requestBody,ajax请求的参数contentType

var data = {
                "name":"spring",
                "age":"20"
        };
类似这种格式的就是json对象.json对象的字符串格式就是json字符串.
javaScript中有两个关于JSON的工具:
//将字符串类型的data转化成json对象
JSON.parse(data);
//将json对象类型的data转化成json字符串
JSON.stringify(data);

在js中对象是不能直接alert的,如果alert(data),会弹出"[Object,Object]".但是字符串是可以直接alert的,可以alert(JSON.stringify(data)),会直接输出"name":"spring", "age":"20".

下面是网上关于@requestBody的介绍,@RequestBody主要是转化浏览器传来的json格式数据的.

@RequestBody

作用:

     i) 该注解用于读取Request请求的body部分数据,使用系统默认配置的HttpMessageConverter进行解析,然后把相应的数据绑定到要返回的对象上;

      ii) 再把HttpMessageConverter返回的对象数据绑定到 controller中方法的参数上。

使用时机:

A) GET、POST方式提时, 根据request header Content-Type的值来判断:

    application/x-www-form-urlencoded, 可选(即非必须,因为这种情况的数据@RequestParam, @ModelAttribute也可以处理,当然@RequestBody也能处理);

    multipart/form-data, 不能处理(即使用@RequestBody不能处理这种格式的数据);

   其他格式, 必须(其他格式包括application/json, application/xml等。这些格式的数据,必须使用@RequestBody来处理);

经常使用ajax发送请求的程序员,对contentType应该不陌生.contentType是ajax请求中的一个参数,是用来规定提交数据的方式.主要有四种方式:

  • application/x-www-form-urlencoded

这种方式是jQuery默认的方式,可以适合大多数的情况.这种方式会将数据转化成一个字符串(username=”admin”&password=123)提交.

  • multipart/form-data

这种方式是用来上传文件的.我们使用表单上传文件时,必须让 form 的 enctyped 等于这个值。

  • application/json

这种方式必须使用json字符串来作为参数,用来告诉服务端消息主体是序列化后的 JSON 字符串。

  • text/xml

这种方式对参数的要求比较高,目前使用的并不多.

 

了解了上面的四个概念,下面我们直接来个复杂的请求实体来实践:

这个实体有一个List<ErpVisitor>类型的属性.

 

 public class ModifyOrderRequestVo {
      
      private String orderId;
         
     private String orderSource;
     
     private String contactName;

     private String contactTel;

     private String contactEmail;

     private List<ErpVisitor> visitors;
 
  //setter getter
 }

想在后台成功接收到参数有很多方法,我总结了几个常用方法:

方法一:万能方法

不管后台需要哪些数据,都用String类型接收,ajax的请求参数用JSON.stringify()将json对象转换成字符串,contentType设置为application/json.在后台接受参数时需要使用@RequestBogy注解.在成功接受到了浏览器传来的字符串之后,使用fastjson中的工具将json字符串转化成相应的实体类.

后台代码
@RequestMapping("modify")
     @ResponseBody
     public AjaxResponse modify(@RequestBody String str){
         JSONObject parseObject = JSONObject.parseObject(str);
         ModifyOrderRequestVo2 vo = JSONObject.toJavaObject(parseObject, ModifyOrderRequestVo2.class);

js代码

var visitors =[];
        $.each($(".visitorInfo"),function(){
            var visitor ={
                    "name":$(this).find("input[name=‘name‘]").val(),
                    "isAdult":true,
                    "mobelPhone":$(this).find("input[name=‘mobelPhone‘]").val(),
                    "idType":$(this).find("input[name=‘idType‘]").val(),
                    "gender":$(this).find("input[name=‘gender‘]:checked").val()
            };
            visitors.push(visitor);
        });
        var data = {
                "orderId":$("input[name=‘orderId‘]").val(),
                "orderSource":$("input[name=‘orderSource‘]").val(),
                "contactName":$("input[name=‘contactName‘]").val(),
                "contactTel":$("input[name=‘contactTel‘]").val(),
                "contactEmail":$("input[name=‘contactEmail‘]").val(),
                "visitors":visitors
        };
        //var data = getFormJson("#modifyForm");
        //data["totalOrderFee"] = $("#totalOrderFee").text();
        $.ajax({
            url:modifyUrl,
            contentType:"application/json",
            data:JSON.stringify(data),
            type:"POST",
            dataType:"json",
            success:function(res){
                //alertWindow("success","success");
            },
            error:function(){
                //alertWindow("操作失败","warn");
            }
        });

 

方法二:使用请求实体类接受参数
这种方法和第一种类型,只是在后台controller的参数不再是String类型,而是实体类。js代码是一样的。这种方式要求js中的参数字段必须在请求实体类中有对应的属性,而且有Date这样的类型需要类型转化的,因为springMVC提供了基本类型的类型转化,但是并没有提供Date类型的类型转化,其实并不是springMVC不想提供,而是日期类型格式本身就有很多,有的人喜欢用“-”分割有人喜欢用“/”分割.关于类型转化的问题在这里就不多说了.
相比与第一种方法,第二种方法更简单一些,不需要fastjson包。对于一般的请求参数这种方法都够用了。第一种方法简单粗暴,它可以处理层次很深的请求实体类,先接受到json字符串,在通过fastjson中的工具将字符串转化成相应的实体,也可以根据参数特点自定义转化工具类。
后台代码
@RequestMapping("modify")
     @ResponseBody
     public AjaxResponse modify(@RequestBody ModifyOrderRequestVo vo){
         
}

 

方法三 使用form表单提交请求
form表单用于提交参数是很方便的,它可以把form表单中的有name属性input都当做参数提交,checkbox和radio类型的input也可以提交。checkbox所有选中的内容会当做一个数组传递。
在这里使用form表单需要注意List<ErpVisitor> visitors这个属性。
使用这种方法可以直接将json对象当做请求数据,也不需要设置contentType,直接使用jquery默认的application/x-www-form-urlencoded即可。这种方法的关键就在form表单的中input框的name属性的设置上。
html代码
 
js代码
var data = getFormJson("#modifyForm");
        $.ajax({
            url:modifyUrl,
            //contentType:"application/json",
            data:data,
            type:"POST",
            dataType:"json",
            success:function(res){
                //alertWindow("success","success");
            },
            error:function(){
                //alertWindow("操作失败","warn");
            }
        });

 

后台代码
@RequestMapping("modify")
     @ResponseBody
     public AjaxResponse modify(ModifyOrderRequestVo vo){
         
}

 

 

 

 以上这三种方法都是针对比较复杂的参数的。对于请求参数比较简单的还可以有更多的方式。

总结下ajax传递参数无外就是以json对象传递或者json字符串传递。使用json字符串时需要注意contentType的设置和后台@RequestBody注解的使用。

springMVC之浏览器到后台的数据传递

标签:erro   contact   对象类型   工具   query   pre   admin   .ajax   复杂   

原文地址:http://www.cnblogs.com/qingsong-ding/p/7286953.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!