【百占百胜】-三创比赛，将form表单数据封装成对象使用ajax方式传到后台

大家好，我是被白菜拱的猪。

一个热爱学习废寝忘食头悬梁锥刺股，痴迷于girl的潇洒从容淡然coding handsome boy!

解决了上一问题，这不又来一个问题。真是问题接着问题。问题无穷尽也。

一、前台

1.将form表单数据序列化

首先我们传输的数据就是以key-value的形式传输

在以往的方式我们都是采用url？name=“帅哥”&age=18
字符串拼接到url的方式将数据传到后台，假如当数据量大的时候，比如有十多个属性，这样一个一个写未免有些麻烦。

而序列化对象就达到将属性与属性值对应的目的，自动帮我们封装好，no 代码 you say 个 jb！

	$.fn.serializeObject = function() {
      var o = {};
      var a = this.serializeArray();
      $.each(a, function() {
          if (o[this.name] !== undefined) {
              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;
    };

在ajax中有 serializeArray()方法 可以将form表单中的数据序列化成如下的格式

[
      {
        name: "a",
        value: "1"
      },
      {
        name: "b",
        value: "2"
      },
      {
        name: "c",
        value: "3"
      },
      {
        name: "d",
        value: "4"
      },
      {
        name: "e",
        value: "5"
      }
    ]

而自己封装的serializeObject 能够转换成

{
    name:1,
    age:11,
    weight:60
}

这样直接转化成对象格式，有利于与后台对象对接。

2.将json转化为字符串传输

这一点很重要，因为serializeObject 得到的是json对象，而在数据传输流程中，json是以文本，即字符串的形式传递的，而JS操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键。
我们要想传输数据，必须将json对象转化为字符串，这里使用了 JSON.stringify() 方法。注意ajax data属性值必须是字符串，否则将出现问题。

完整代码帖在下面

		$("#buttonSubmit").click(function(){
			var seatNum = $(".seat-choiced").length;
			var logmin=$("#logmin").val();
			var logmax=$("#logmax").val();
			if(seatNum==0){
				layer.alert('假如你要预约,请至少选择一个座位,不预约请返回', {icon: 6});
				return false;
			}else if(logmin==null || logmin==''|| logmax==null || logmax==''){
				layer.alert('请填写预约时间', {icon: 6});
				return false;
			}else{
				formSave();
			}
			
		})
	$.fn.serializeObject = function() {
      var o = {};
      var a = this.serializeArray();
      $.each(a, function() {
          if (o[this.name] !== undefined) {
              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;
    };
		
	 function formSave(){
			var order = $("form").serializeObject();
			var str = JSON.stringify(order); 
			alert(str);
			$.ajax({
				url:"../order/add.do",
				type : "POST",
				contentType : 'application/json;charset=utf-8', //设置请求头信息
				dataType : "json",
				data : str ,  //将Json对象序列化成Json字符串，toJSON()需要引用jquery.json.min.js
				success : function(data) {
					//提示信息
				},
				error : function(res) {
					alert("系统错误，请联系管理员");
				}
			});
		} 
	</script>

二、后台

@requestbody标签接收前台传过来的值

他只能接受post请求，不使用则无法接受到前台传过来的值

三、总结

通过实现这一功能，真的学到了好多东西啊，比较序列化对象，以及知道了在数据传输过程中，json必须以字符串的形式，还有@requestBody标签，这都是我以前所不知道的。