100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > html+form+提交json数据 form表单提交json格式数据

html+form+提交json数据 form表单提交json格式数据

时间:2018-12-17 04:58:53

相关推荐

html+form+提交json数据 form表单提交json格式数据

我的实践整理。java

方式一:

发送数据web

$(':submit').on('click',function(){

$.ajax({

url:"buy",

type:"POST",

data:JSON.stringify($('form').serializeObject()),

contentType:"application/json", //缺失会出现URL编码,没法转成json对象

success:function(){

alert("成功");

}

});

});

/**

* 自动将form表单封装成json对象

*/

$.fn.serializeObject = function() {

var o = {};

var a = this.serializeArray();

$.each(a, function() {

if (o[this.name]) {

if (!o[this.name].push) {

o[this.name] = [ o[this.name] ];

}

o[this.name].push(this.value || '');

} else {

o[this.name] = this.value || '';

}

});

return o;

};

contentType:”application/json”不能缺失,缺失数据会成为URL编码,形成没法转成json对象,后台接收的内容以下ajax

String: %7B%22huohao%22%3A%22234%22%2C%22changjia%22%3A%221234%22%2C%22yanse%22%3A%22%22%2C%22xiangshu%22%3A%22%22%2C%22shuangshu%22%3A%22%22%2C%22jinjia%22%3A%22%22%2C%22riqi%22%3A%22%22%2C%22shoujia%22%3A%22%22%2C%22beizhu%22%3A%22asdf%22%7D=

controller接收spring

@RequestMapping(value = "/buy")

public void addBuy(@RequestBody String buyAdd){

System.out.println("String: "+buyAdd);

BuyAdd add = JSON.parseObject(buyAdd, BuyAdd.class); //此处用的FastJson转换为对象

System.out.println("**************");

System.out.println("Object: "+add);

System.out.println("==============================");

}

接收显示为json

String: {

"huohao":"111","changjia":"222","yanse":"33","xiangshu":"","shuangshu":"","jinjia":"","riqi":"","shoujia":"","beizhu":"aaa"}

**************

Object: BuyAdd{huohao='111', changjia='222', yanse='33', xiangshu='', shuangshu='', jinjia='', riqi='', shoujia='', beizhu='aaa'}

==============================

声明:这里我用的是FastJson转换,由于@RequestBody并不支持FastJson,因此进行的手动转换。Jackson能够直接用@RequestBody对象类型自动转换(即addBuy(@RequestBody BuyAdd buyAdd))。mvc

此处记录一种特殊需求,表单传递的为多个相同对象

用上述方式是这种结果app

String: {

"huohao":["5678","4567"],"changjia":["978","9678"],"yanse":"","xiangshu":"","shuangshu":"","jinjia":"","riqi":"","shoujia":"","beizhu":""}

两个对象合并为一个json发送过去,后台解析会很麻烦

这里我将form表单封装成json对象的方法进行了更改,使其最后为json对象的集合,后台能够直接读取集合进行解析svg

/**

* 自动将form表单封装成json对象

*/

$.fn.serializeObject = function() {

var list = [];

var o = {};

var a = this.serializeArray();

$.each(a, function() {

if (!o[this.name] && o[this.name]!='') {

o[this.name] = this.value || '';

} else {

list.push(o);

o={};

o[this.name] = this.value || '';

}

});

list.push(o);

return list;

};

controllerpost

@RequestMapping(value = "/buy")

public void addBuy(@RequestBody String requestAddBuy){

System.out.println("String: "+ requestAddBuy);

List addBuy = JSON.parseArray(requestAddBuy, RequestAddBuy.class);

System.out.println(addBuy);

}

最后的结果

String: [{

"huohao":"54674","changjia":"78i","yanse":"","xiangshu":"","shuangshu":"","jinjia":"","riqi":"","shoujia":"","beizhu":""},{

"huohao":"457","changjia":"","yanse":"","xiangshu":"457","shuangshu":"","jinjia":"","riqi":"","shoujia":"","beizhu":"678ur7t"}]

[RequestAddBuy{huohao='54674', changjia='78i', yanse='', xiangshu='', shuangshu='', jinjia='', riqi='', shoujia='', beizhu=''}, RequestAddBuy{huohao='457', changjia='', yanse='', xiangshu='457', shuangshu='', jinjia='', riqi='', shoujia='', beizhu='678ur7t'}]

声明:这里一样是存在FastJson的问题,若是用Jackson则能够把controller改成addBuy(@RequestBody List requestAddBuy)

方式二:

发送数据

$(':submit').on('click',function(){

$.ajax({

url:"buy",

type:"POST",

data:$('form').serializeArray(),

contentType:"application/x-www-form-urlencoded",

success:function(){

alert("成功");

}

});

});

使用jQuery自带方法$.serializeArray()转换

而后使用contentType:”application/x-www-form-urlencoded”格式

controller接收

@RequestMapping(value = "/buy")

public void addBuy(BuyAdd buyAdd){

System.out.println(buyAdd);

}

接收显示

BuyAdd{huohao='245', changjia='wef', yanse='', xiangshu='', shuangshu='', jinjia='', riqi='', shoujia='', beizhu='2345'}

这种方式能够直接接收对象,不如直接使用form自动提交省事(方式三)

方式三:

数据传输

controller接收

@RequestMapping(value = "/buy")

public void addBuy(BuyAdd buyAdd){

System.out.println(buyAdd);

}

接收显示

BuyAdd{huohao='245', changjia='wef', yanse='', xiangshu='', shuangshu='', jinjia='', riqi='', shoujia='', beizhu='2345'}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。