`

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

    博客分类：
  • JS
jsonAjaxjQueryHTMLJSP 
阅读更多

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

如果通过传统的方式提交，后台难免难以获取。现在公司通过利用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]);	//统筹产品代码

 

分享到：
| PHP 常用字符串函数
评论
1 楼 spp_1987 2010-10-22  
我是通过jquery的插件form.js来做ajax，并组织了json数据，提交到后台去，但是我的后台却不无法正常的获取数据
  后台获取数据的方法我是用request.getParameter()的
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Android高级应用源码-单排显示gridview并从解析JSON读取数据加载项目.rar

    GridView是Android中的AdapterView家族成员之一，可以展示多行多列的数据。在XML布局文件中，我们需要定义GridView的id、列数（android:numColumns）以及其它样式属性。在Java代码中，我们通过设置Adapter来绑定...

    【JQuery Easy UI】后台管理系统的简单布局

    Easy UI 的 `datagrid` 组件支持灵活的列宽分配，通过 `colspan` 和 `rowspan` 属性可以实现复杂的单元格合并，从而创建出多列多行的网格布局。 3. **响应式布局**：随着移动设备的普及，后台管理系统也需要适应...

    EXTJS 行列转换

    3. **数据源处理**：通常，后台数据库会将数据进行行列转换，比如将多行的课程成绩数据转换为以学生为行，课程为列的格式。这可能涉及到SQL查询中的PIVOT操作或者自定义的存储过程。 4. **分页处理**：为了提高性能...

    jqGrid模板

    1. 数据网格：jqGrid能够轻松创建复杂的表格布局，支持多列、自定义格式化、行内编辑等多种显示模式。 2. 分页：内置分页功能，允许用户浏览大量数据而无需加载整个数据集，提高页面性能。 3. 排序：用户可以对任何...

    multicol_combo2_demo.zip_DEMO

    4. **数据绑定**：如何将用户在复选框中的选择与后台数据模型同步，这可能涉及到JSON格式的数据交换和Ajax通信。 5. **测试和调试**：DEMO可能提供了调试信息和测试用例，帮助开发者理解代码工作原理并找出潜在问题...

    myDataGrid

    1. **数据绑定**：myDataGrid的核心功能之一是数据绑定，它能将后台的数据源（如数据库、XML文件或JSON对象）与网格视图连接起来，自动更新视图中的内容以反映数据源的变化。 2. **排序**：用户可以通过点击列头...

    Ext 开发指南 学习资料

    4.6. form提交数据的三重门 4.6.1. ext中默认的提交形式 4.6.2. 使用html原始的提交形式 4.6.3. 单纯ajax 4.7. 验证苦旅 4.7.1. 不能为空 4.7.2. 最大长度，最小长度 4.7.3. 借助vtype 4.7.4. 自定义验证规则 4.7.5....

    EXT2.0中文教程

    4.6. form提交数据的三重门 4.6.1. ext中默认的提交形式 4.6.2. 使用html原始的提交形式 4.6.3. 单纯ajax 4.7. 验证苦旅 4.7.1. 不能为空 4.7.2. 最大长度，最小长度 4.7.3. 借助vtype 4.7.4. 自定义验证规则 4.7.5....

    jQuery学习笔记——jqGrid的使用记录（实现分页、搜索功能）

    在服务器端，你需要处理来自jqGrid的请求，根据`rowNum`、`sidx`（排序字段）和`sord`（排序方式）等参数来查询数据库并返回符合要求的数据。同时，别忘了在响应中包含分页信息，如总页数和总记录数。 通过以上...

    Makestagram：用于练习iOS开发的Instagram副本

    集合视图则适合展示多列或多行的布局，如Instagram的照片网格。 五、网络请求与JSON解析 为了让Makestagram具有类似Instagram的功能，你需要从服务器获取数据，这涉及到网络请求。通常，我们会使用URLSession或第...

Magicbox
Global site tag (gtag.js) - Google Analytics