利用 JSON 将复杂动态多行多列数据提交至后台的方式

最新推荐文章于 2022-03-03 15:03:22 发布

jxdwuao

最新推荐文章于 2022-03-03 15:03:22 发布

阅读量421

点赞数

分类专栏： JS 文章标签： json Ajax jQuery HTML JSP ViewUI

本文链接：https://blog.csdn.net/jxdwuao/article/details/83633803

版权

JS 专栏收录该内容

72 篇文章 0 订阅

订阅专栏

公司创建投保方案页面是一个多因子，多保障，连带附加险种的表单。

如果通过传统的方式提交，后台难免难以获取。现在公司通过利用JSON对象组织成参数，通过AJAX提交，不但无刷新，而且后台也比较好的获得数据。

方式如下：

先将用到的JS 验证方法列出如下：

function isString(el, lbl) {
	el = this.getDom(el);
	if (el.value == "") {
		alert(lbl + "是必填项，不能为空！");
		this.focus(el, "");
		return false;
	}
	var value = el.value;
	if (/<\/?([a-z]|[A-Z])+>/g.test(value)) {
		alert(lbl + "字段不能包含HTML标签代码，比如<html>、</html>、<HTML>、</HTML>！");
		this.focus(el, "");
		return false;
	}
	return true;
}
function isInt(el, lable) {
	el = this.getDom(el, true);
	if (el.value == "") {
		alert(lbl + "是必填项，不能为空！");
		this.focus(el, "");
		return false;
	}
	var value = el.value;
	if (!/^\d*$/.test(value)) {
		alert(lable + "输入的值必须为整数！");
		this.focus(el, "");
		return false;
	}
	return true;
}
function isDecimal(el, length, scale, lable) {
	var self = this;
	el = self.getDom(el, true);
	if (el.value == "") {
		alert(lbl + "是必填项，不能为空！");
		this.focus(el, "");
		return false;
	}
	var value = el.value;
	var regString = "^\\d{1," + (length - scale) + "}(\\.\\d{1," + scale +"})?$";
	var reg = new RegExp(regString);
	if (!reg.test(value)) {
		alert(lable + "输入的值必须为数值，且总位数不超过" + length + "，小数位数不能超过" + scale + "！");
		self.focus(el, "");
		return false;
	}
	return true;
}
function isDate(el, lable) {
	var self = this;
	el = self.getDom(el, true);
	if (el.value == "") {
		alert(lbl + "是必填项，不能为空！");
		this.focus(el, "");
		return false;
	}
	var value = el.value;
	//var reg = new RegExp("^\\d{4}-((((0[13578])|(1[02]))-(([0-2][0-9])|(3[01])))|(((0[469])|(11))-(([0-2][0-9])|(30)))|(02-[0-2][0-9]))$");
	var reg = new RegExp("^\\d{4}-(((([13578])|(0[13578])|(1[02]))-(([1-9])|([0-2][0-9])|(3[01])))|((([469])|(0[469])|(11))-(([1-9])|([0-2][0-9])|(30)))|((2|02)-(([1-9])|([0-2][0-9]))))$");
	if (!reg.test(value)) {
		alert(lable + "输入值的格式不对，格式为yyyy-MM-dd！");
		self.focus(el, "");
		return false;
	}
	return true;
}
function isDateTime(el, lable) {
	var self = this;
	el = self.getDom(el, true);
	if (el.value == "") {
		alert(lbl + "是必填项，不能为空！");
		this.focus(el, "");
		return false;
	}
	var value = el.value;
	//var reg = new RegExp("^\\d{4}-((((0[13578])|(1[02]))-(([0-2][0-9])|(3[01])))|(((0[469])|(11))-(([0-2][0-9])|(30)))|(02-[0-2][0-9])) ([01]\\d|2[0-3]):[0-5]\\d:[0-5]\\d$");
	var reg = new RegExp("^\\d{4}-(((([13578])|(0[13578])|(1[02]))-(([1-9])|([0-2][0-9])|(3[01])))|((([469])|(0[469])|(11))-(([1-9])|([0-2][0-9])|(30)))|((2|02)-(([1-9])|([0-2][0-9])))) ([01]\\d|2[0-3]):[0-5]\\d$");
	if (!reg.test(value)) {
		alert(lable + "输入值的格式不对，格式为yyyy-MM-dd HH:mm！");
		self.focus(el, "");
		return false;
	}
	return true;
}

数据组织的JS：

//初始化数据JSON对象，用于容纳所有表单数据
var datas = {
	ensureCode: new Array()
};

//循环添加基础数据
for(var i = 0; i < baseConfig.length; i++){
	var el = document.getElementById(baseConfig[i].name);
	if(el){
		datas[baseConfig[i].name] = el.value;
	}
}

//添加保障数据
name = "isDefault_" + ensureName;
el = document.getElementById(name);
if(el){
	datas[name] = el.value;
}
name = "ensureName_" + ensureName;
el = document.getElementById(name);
if(el){
	datas[name] = el.value;		
}
name = "ensureShortName_" + ensureName;
el = document.getElementById(name);
if(el){
	datas[name] = el.value;
}

//组织并且发送数据
	new Ajax.Request(
			_ryx_root + "/policyPrecept.do?method=preceptDataSubmit", // url
			{
				encoding: 'UTF-8',
				parameters: $H(datas),
				onSuccess: function (request) {
					var obj = request.responseText.strip().evalJSON();
					var errors = obj.errors;
					var errorMsg = "";
					for (var i = 0; i < errors.length; i++) {
						errorMsg += ("(&nbsp;" + (i + 1) + "&nbsp;)&nbsp;&nbsp;" + errors[i] + "。");
					}
					if (errors.length > 0) {
						alert(errorMsg);
					}else{
						var resultValue = window.showModalDialog(_ryx_root + "/policyprecept/infoFinish.jsp", '', 'dialogWidth=200px;dialogHeight=100px');
						if(resultValue != null && resultValue[0] == 'true' && resultValue[1] != null){
							var productCode = obj.productCode;
							if(resultValue[1] == "3"){
								window.location.href = _ryx_root + "/policyPrecept.do?method=initPolicyPrecept&classProductCode=" + productCode;
							}
						}
					}
				},
				onFailure: function (request) {
					if ((request.status + "").startsWith("4")) {
						alert("发送服务器请求连接失败，可能是网络原因，请重试！");
					}
					else if ((request.status + "").startsWith("5")) {
						alert("服务器端发生异常，请与系统管理员联系！");
					}
				},
				onException: function (request, e) {
					alert(e.message);
				},
				onComplete: function (request) {
				}
			}
		);

后台可以通过正常的 request.getParameters(); 的方式来获取数据拉。

	String [] ensureCodes = request.getParameterValues("ensureCodes");

//初始化投保方案保障信息
		for(int x = 0; x < ensureCodes.length; x++){
			TSchemeEnsure tEnsure = new TSchemeEnsure();
			String ensureCodeStrings [] = ensureCodes[x].split("_");
			
			String ensureCode = valiPreceptDate("保障代码", ensureCodeStrings[0]);	//保障代码
			String classCode = valiPreceptDate("险种代码", ensureCodeStrings[1].substring(0, 8));	//险种代码			
			String commonProductCode = valiPreceptDate("统筹产品代码", ensureCodeStrings[1]);	//统筹产品代码