模拟Form表单完成数据交互

前言：

之前和后端配合完成数据交互时，只需要拿到后端API进行POST/GET就可以完成数据交互。最近开发老项目，遇到一个需求：

在当前页面选择需要结算的课程可以选多个课程，点击下一步，不请求后端API，跳到下个页面；对于这个数据交互需要兼容性一开始没想起来解决办法。后面大伙讨论使用form特征解决。

方案：

• 如果不考虑兼容性问题，可以使用浏览器存储localStorage/sessionStorage方式解决。
• 如果考虑兼容性使用form来模拟表单方式提交数据，完成页面跳转。

用法：

• 使用浏览器存储解决
  在当前页面选择多个课程时，把数据存储到浏览器存储中，跳转到下个页面取出浏览器存储中的数据。

存储数据：

var courseList = [...]

localStorage.setItem('courseList', courseList);

取出数据：

var localCourseList = localStorage.getItem('courseList');

• 使用form表单方式

使用jQuery中的extends方法扩展一个POST方法

$.extend({
	StandardPost:function(url, args){
		var form = $("<form method='post' style='display:none'></form>"), input;
		form.attr({ "action":url });
		args=JSON.parse(args);
		$.each(args, function(key2, value2) {
			$.each(value2,function(key, value){
				input = $("<input type='hidden'>");
				input.attr({ "name":'objectArray['+key2+']['+key+']'});
				input.val(value);
				form.append(input);
			});
		});
		form.appendTo($('body'));
		form.submit();
		form.remove();
	}
});

用法：

$.post(url, { data:data }, function(r) {
	if(r.code==0) {
		// 传入url 和 data
		//url 是要跳转到下个界面的路径
		$.StandardPost(url, data); 
	}
}, 'json');