精华内容
下载资源
问答
  • 在这种错综复杂的情况下,完成表单的验证和提交 可以查看具体例子:例子中省略了很多琐碎的功能,只保留整体的复杂表单框架,用于展示解决方案 方案1: 在一个 vue 文件中 所有的表单项显示隐藏、验证、数据获取...
  • 背景当我们在做后台管理系统时,经常会遇到非常复杂表单:表单项非常多在各种表单类型下,显示不同的表单项在某些条件下,某些表单项会关闭验证每个表单项还会有其他自定义逻辑,比如输入框可以插入模板变量、输入...

    背景

    当我们在做后台管理系统时,经常会遇到非常复杂的表单:

    表单项非常多

    在各种表单类型下,显示不同的表单项

    在某些条件下,某些表单项会关闭验证

    每个表单项还会有其他自定义逻辑,比如输入框可以插入模板变量、输入字符数量显示、图片上传并显示、富文本。。。

    在这种错综复杂的情况下,完成表单的验证和提交

    可以查看具体例子:例子中省略了很多琐碎的功能,只保留整体的复杂表单框架,用于展示解决方案

    方案1: 在一个vue文件中

    所有的表单项显示隐藏、验证、数据获取、提交、自定义等逻辑放在一起

    根据表单类型,使用v-if/v-show处理表单项显示隐藏

    在elementui自定义验证中,根据表单类型,判断表单项是否验证

    根据表单类型,获取不同的数据,并提交到不同的接口

    其余所有的自定义逻辑

    缺点

    还是乱

    一个vue文件,轻轻松松上2000行

    在我尝试加入一种新的表单类型时,我发现我已经无。从。下。手。

    方案2:分离组件

    其实很容易想到根据不同的表单类型,分离出多个相应类型的子表单。但我在实践时还是遇到了很多问题:父子表单验证、整体提交数据的获取等等,并总结出一套解决方案:

    1. 子组件

    所有的子组件中都需要包含两个方法validate、getData供父组件调用。

    (1) validate方法

    用于验证本身组件的表单项,并返回一个promise对象

    vaildate() {

    // 返回`elementUI`表单验证的结果(为`promise`对象)

    return this.$refs["ruleForm"].validate();

    },

    (2) getData方法

    提供子组件中的数据

    getData() {

    // 返回子组件的form

    return this.ruleForm;

    },

    2. 父组件

    使用策略模式存储并获取子表单的ref(用于获取子表单的方法)和提交函数 。省略了大量的if-else判断。

    data:{

    // type和ref名称的映射

    typeRefMap: {

    1: "message",

    2: "mail",

    3: "apppush"

    },

    // type和提交函数的映射。不同类型,接口可能不同

    typeSubmitMap: {

    1: data => alert(`短信模板创建成功${JSON.stringify(data)}`),

    2: data => alert(`邮件模板创建成功${JSON.stringify(data)}`),

    3: data => alert(`push模板创建成功${JSON.stringify(data)}`)

    },

    }

    (2) submit方法

    用于父子组件表单验证、获取整体数据、调用当前类型提交函数提交数据

    因为elementUI表单验证的validate方法可以返回promise结果,可以利用promise的特性来处理父子表单的验证。

    比如then函数可以返回另一个promise对象、catch可以获取它以上所有then的reject、Promise.all。

    父表单验证通过才会验证子表单,存在先后顺序

    // 父表单验证通过才会验证子表单,存在先后顺序

    submitForm() {

    const templateType = this.typeRefMap[this.indexForm.type];

    this.$refs["indexForm"]

    .validate()

    .then(res => {

    // 父表单验证成功后,验证子表单

    return this.$refs[templateType].vaildate();

    })

    .then(res => {

    // 全部验证通过

    // 获取整体数据

    const reqData = {

    // 获取子组件数据

    ...this.$refs[templateType].getData(),

    ...this.indexForm

    };

    // 获取当前表单类型的提交函数,并提交

    this.typeSubmitMap[this.indexForm.type](reqData);

    })

    .catch(err => {

    console.log(err);

    });

    },

    父表单,子表单一起验证

    submitForm1() {

    const templateType = this.typeRefMap[this.indexForm.type];

    const validate1 = this.$refs["indexForm"].validate();

    const validate2 = this.$refs[templateType].vaildate();

    // 父子表单一起验证

    Promise.all([validate1, validate2])

    .then(res => {

    // 都通过时,发送请求

    const reqData = {

    ...this.$refs[templateType].getData(),

    ...this.indexForm

    };

    this.typeSubmitMap[this.indexForm.type](reqData);

    })

    .catch(err => {

    console.log(err);

    });

    },

    总结:很多项目我都遇到这种复杂的表单,也用了很多种解决方案,在此总结出了一种比较整洁简便的方案。当然还有其他很多方案,比如可以把数据提交的方法放在每一个子组件中,公共的表单项数据通过props传递给子组件用于提交。有其他更加简洁的方案,欢迎评论,或者github上提issue

    题外话: 看了前端架构师亲述:前端工程师成长之路的 N 问 及 回答中的几个回答后,对我有很大的启发。在对自己的技术方向、前景迷茫时、或者在埋怨自己的项目太low时、或者埋怨自己每天在做重复工作时、或者每天对层出不穷的新技术焦头烂额时,不妨认真的审视下自己的项目,

    每天重复的工作,是不是可以自己造轮子了;

    技术栈太low,是不是可以平滑过渡到新技术,提高开发效率;

    学再多的新技术,最终也会回归并实践到项目中。

    从工作流程和项目的痛点出发,你会在实践、总结并解决实际问题中进步的更加迅速。

    写这篇文章的感受:把这些东西表达出来的难度 >> 文章本身所包含的技术难度

    展开全文
  • 当我们在做后台管理系统时,经常会遇到非常复杂表单:表单项非常多在各种表单类型下,显示不同的表单项在某些条件下,某些表单项会关闭验证每个表单项还会有其他自定义逻辑,比如输入框可以插入模板变量、输入字符...

    当我们在做后台管理系统时,经常会遇到非常复杂的表单:

    表单项非常多

    在各种表单类型下,显示不同的表单项

    在某些条件下,某些表单项会关闭验证

    每个表单项还会有其他自定义逻辑,比如输入框可以插入模板变量、输入字符数量显示、图片上传并显示、富文本 。。。

    在这种错综复杂的情况下,完成表单的验证和提交

    可以查看具体例子:例子中省略了很多琐碎的功能,只保留整体的复杂表单框架,用于展示解决方案

    方案1: 在一个vue 文件中

    所有的表单项显示隐藏、验证、数据获取、提交、自定义等逻辑放在一起

    v-if/v-show

    elementui

    缺点

    还是乱

    一个vue 文件,轻轻松松上2000 行

    在我尝试加入一种新的表单类型时,我发现我已经无。从。下。手。

    方案2:分离组件

    其实很容易想到根据不同的表单类型,分离出多个相应类型的子表单 。但我在实践时还是遇到了很多问题:父子表单验证、整体提交数据的获取 等等,并总结出一套解决方案:

    1. 子组件

    所有的子组件中都需要包含两个方法validate 、getData 供父组件调用。

    (1) validate 方法

    用于验证本身组件的表单项,并返回一个promise 对象

    vaildate() {

    // 返回`elementUI`表单验证的结果(为`promise`对象)

    return this.$refs["ruleForm"].validate();

    },

    (2) getData 方法

    提供子组件中的数据

    getData() {

    // 返回子组件的form

    return this.ruleForm;

    },

    2. 父组件

    (1)策略模式

    使用策略模式存储并获取子表单的ref (用于获取子表单的方法)和提交函数 。省略了大量的 if-else 判断。

    data:{

    // type和ref名称的映射

    typeRefMap: {

    1: "message",

    2: "mail",

    3: "apppush"

    },

    // type和提交函数的映射。不同类型,接口可能不同

    typeSubmitMap: {

    1: data => alert(`短信模板创建成功${JSON.stringify(data)}`),

    2: data => alert(`邮件模板创建成功${JSON.stringify(data)}`),

    3: data => alert(`push模板创建成功${JSON.stringify(data)}`)

    },

    }

    (2) submit 方法

    用于父子组件表单验证、获取整体数据、调用当前类型提交函数提交数据

    因为elementUI表单验证的validate 方法可以返回promise 结果,可以利用promise 的特性来处理父子表单的验证。 比如then 函数可以返回另一个promise 对象、catch 可以获取它以上所有then 的reject 、Promise.all 。

    父表单验证通过才会验证子表单,存在先后顺序

    // 父表单验证通过才会验证子表单,存在先后顺序

    submitForm() {

    const templateType = this.typeRefMap[this.indexForm.type];

    this.$refs["indexForm"]

    .validate()

    .then(res => {

    // 父表单验证成功后,验证子表单

    return this.$refs[templateType].vaildate();

    })

    .then(res => {

    // 全部验证通过

    // 获取整体数据

    const reqData = {

    // 获取子组件数据

    ...this.$refs[templateType].getData(),

    ...this.indexForm

    };

    // 获取当前表单类型的提交函数,并提交

    this.typeSubmitMap[this.indexForm.type](reqData);

    })

    .catch(err => {

    console.log(err);

    });

    },

    父表单,子表单一起验证

    submitForm1() {

    const templateType = this.typeRefMap[this.indexForm.type];

    const validate1 = this.$refs["indexForm"].validate();

    const validate2 = this.$refs[templateType].vaildate();

    // 父子表单一起验证

    Promise.all([validate1, validate2])

    .then(res => {

    // 都通过时,发送请求

    const reqData = {

    ...this.$refs[templateType].getData(),

    ...this.indexForm

    };

    this.typeSubmitMap[this.indexForm.type](reqData);

    })

    .catch(err => {

    console.log(err);

    });

    },

    查看在线项目,项目github和组件代码

    总结

    以上所述是小编给大家介绍的vue+elementUI 复杂表单的验证、数据提交方案问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

    如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

    展开全文
  • ###Springmvc封装复杂表单数据:表单提交多个实体类的参数【对象类型参数,自动封装】name属性值不能重复。和实体类属性名一致。 =====================【很简单,实例加深印象】 ===实例: ===页面: 只看标签。=...

    ###Springmvc封装复杂表单数据:表单提交多个实体类的参数【对象类型参数,自动封装】name属性值不能重复。和实体类属性名一致。

    =====================【很简单,实例加深印象】

    ===实例:

    ===页面:

    只看标签。===js是提交时 封装参数用的。===额外学习。

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <jsp:include page="${pageContext.request.contextPath }/layout/inc.jsp"></jsp:include>
    <style>
    <!--
    
    -->
    tr{
    	font-size: 12px;
    }
    </style>
    <div style="padding:10px 10px 10px 10px">
    	<form id="itemAddForm" class="itemForm" method="post">
    	    <table cellpadding="5">
    	        <tr>
    	            <td style="font: italic;">商品类目:</td>
    	            <td>
    	            	<a href="javascript:void(0)" class="easyui-linkbutton selectItemCat">选择类目</a>
    	            	<input type="hidden" name="cid" style="width: 280px;"></input>
    	            </td>
    	        </tr>
    	        <tr>
    	            <td>商品标题:</td>
    	            <td><input class="easyui-textbox" type="text" name="title" data-options="required:true" style="width: 280px;"></input></td>
    	        </tr>
    	        <tr>
    	            <td>商品卖点:</td>
    	            <td><input class="easyui-textbox" name="sellPoint" data-options="multiline:true,validType:'length[0,150]'" style="height:60px;width: 280px;"></input></td>
    	        </tr>
    	        <tr>
    	            <td>商品价格:</td>
    	            <td><input class="easyui-numberbox" type="text" name="priceView" data-options="min:1,max:99999999,precision:2,required:true" />
    	            	<input type="hidden" name="price"/>
    	            </td>
    	        </tr>
    	        <tr>
    	            <td>库存数量:</td>
    	            <td><input class="easyui-numberbox" type="text" name="num" data-options="min:1,max:99999999,precision:0,required:true" /></td>
    	        </tr>
    	        <tr>
    	            <td>条形码:</td>
    	            <td>
    	                <input class="easyui-textbox" type="text" name="barcode" data-options="validType:'length[1,30]'" />
    	            </td>
    	        </tr>
    	        <tr>
    	            <td>商品图片:</td>
    	            <td>
    	            	 <a href="javascript:void(0)" class="easyui-linkbutton picFileUpload">上传图片</a>
    	                 <input type="hidden" name="image"/>
    	            </td>
    	        </tr>
    	        <tr>
    	            <td>商品描述:</td>
    	            <td>
    	                <textarea style="width:800px;height:300px;visibility:hidden;" name="itemDesc"></textarea>
    	            </td>
    	        </tr>
    	        <tr class="params hide">
    	        	<td>商品规格:</td>
    	        	<td>
    	        		
    	        	</td>
    	        </tr>
    	    </table>
    	    <input type="hidden" name="itemParams"/>
    	</form>
    	<div style="padding:5px">
    	    <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="submitForm()">提交</a>
    	    <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="clearForm()">重置</a>
    	</div>
    </div>
    <script type="text/javascript">
    	var itemAddEditor ;
    	//页面初始化完毕后执行此方法
    	$(function(){
    		//创建富文本编辑器
    		itemAddEditor = E3MALL.createEditor("#itemAddForm [name=itemDesc]");
    		//初始化类目选择和图片上传器
    		E3MALL.init({fun:function(node){
    			//根据商品的分类id取商品 的规格模板,生成规格信息。第6天内容。===选中分类后加载规格末班信息
    			//E3MALL.changeItemParam(node, "itemAddForm");//===404注释掉
    			E3MALL.changeItemParam(node, "itemAddForm");
    		}});
    	});
    	//提交表单
    	function submitForm(){
    		//有效性验证
    		if(!$('#itemAddForm').form('validate')){
    			$.messager.alert('提示','表单还未填写完成!');
    			return ;
    		}
    		//取商品价格,单位为“分”
    		$("#itemAddForm [name=price]").val(eval($("#itemAddForm [name=priceView]").val()) * 100);
    		//同步文本框中的商品描述======同步
    		itemAddEditor.sync();
    		//取商品的规格===###
    		var paramJson = [];
    		$("#itemAddForm .params li").each(function(i,e){
    			var trs = $(e).find("tr");//JQuery对象  
    			var group = trs.eq(0).text();
    			var ps = [];
    			for(var i = 1;i<trs.length;i++){
    				var tr = trs.eq(i);
    				ps.push({
    					"k" : $.trim(tr.find("td").eq(0).find("span").text()),
    					"v" : $.trim(tr.find("input").val())
    				});
    			}
    			paramJson.push({
    				"group" : group,
    				"params": ps
    			});//===数组添加json对象
    		});
    		
    		//把json对象转换成字符串
    		paramJson = JSON.stringify(paramJson);//==转String===封装整个规格  参数//===不能直接提交?===显示的规格都是在 tr里,规格数据没有 name属性
    		$("#itemAddForm [name=itemParams]").val(paramJson);
    		
    		//=================【参数组装完毕】ajax的post方式提交表单
    		//$("#itemAddForm").serialize()将表单序列号为key-value形式的字符串
    		//http请求体数据格式:username=zhangsan&age=19&address=.
    		$.post("/item/save",$("#itemAddForm").serialize(), function(data){
    			if(data.status == 200){
    				$.messager.alert('提示','新增商品成功!');
    			}
    		});
    	}
    	
    	function clearForm(){
    		$('#itemAddForm').form('reset');
    		itemAddEditor.html('');
    	}
    </script>
    
    ===controller:

    /**
    	 * 需求:保存商品对象
    	 * 请求:/item/save
    	 * 参数:TbItem item,TbItemDesc itemDesc,String praram  ===规格:String,页面表单序列化的一个String参数
    	 * 返回值:json格式E3mallResult
    	 * 
    	 *==============页面传递都是: name=itemParams ,这里可以用praram接收规格参数??? 
    	 * 
    	 */
    	@RequestMapping("/item/save")
    	@ResponseBody
    	//===######【Springmvc封装表单多个实体类的数据】:规律:
    	//===######【参数自动封装】name属性值不能重复。和实体类属性名一致
    	//==【###有name属性的直接对象参数,(多个对象参数也行)没有name的单独接收--亲测】
    	public E3mallResult saveItem(TbItem item,TbItemDesc itemDesc,String praram){
    		//调用远程service服务方法
    		E3mallResult result = itemService.saveItem(item, itemDesc,praram);
    		return result;
    	}


    service:

    /**
    	 * 需求:保存商品对象
    	 * 参数:TbItem item,TbItemDesc itemDesc,ItemParam praram
    	 * 返回值:E3mallResult
    	 */
    	public E3mallResult saveItem(TbItem item, TbItemDesc itemDesc,String itemParams) {
    		// 生成商品id
    		//毫秒+随机数
    		long itemId = IDUtils.genItemId();
    		item.setId(itemId);
    		//商品状态,1-正常,2-下架,3-删除'
    		item.setStatus((byte)1);
    		//创建时间
    		Date date = new Date();
    		item.setCreated(date);
    		item.setUpdated(date);
    		
    		//保存商品对象
    		itemMapper.insert(item);
    		
    		//保存商品描述对象
    		itemDesc.setItemId(itemId);
    		itemDesc.setCreated(date);
    		itemDesc.setUpdated(date);
    		
    		//保存商品描述对象
    		itemDescMapper.insert(itemDesc);
    		
    		//创建商品规格对象,封装规格值
    		TbItemParamItem itemParamItem = new TbItemParamItem();
    		//设置相关属性值
    		itemParamItem.setItemId(itemId);
    		itemParamItem.setParamData(itemParams);//###### 具体规格参数信息 ,数据库自保存一个字符串。
    		itemParamItem.setCreated(date);
    		itemParamItem.setUpdated(date);
    		
    		
    		//保存商品规格参数
    		itemParamItemMapper.insertSelective(itemParamItem);
    		
    		return E3mallResult.ok();
    	}
    

    dao:mybatis面向接口开发。

    调用逆向工程生成的接口函数。===######单表操作都 不需自定义 接口函数和SQL。===insertSelective比insert方法 对应的SQL语句更高效。

    <insert id="insert" parameterType="cn.e3.pojo.TbItemParamItem" >
        insert into tb_item_param_item (id, item_id, created, 
          updated, param_data)
        values (#{id,jdbcType=BIGINT}, #{itemId,jdbcType=BIGINT}, #{created,jdbcType=TIMESTAMP}, 
          #{updated,jdbcType=TIMESTAMP}, #{paramData,jdbcType=LONGVARCHAR})
      </insert>
      <insert id="insertSelective" parameterType="cn.e3.pojo.TbItemParamItem" >
        insert into tb_item_param_item
        <trim prefix="(" suffix=")" suffixOverrides="," >
          <if test="id != null" >
            id,
          </if>
          <if test="itemId != null" >
            item_id,
          </if>
          <if test="created != null" >
            created,
          </if>
          <if test="updated != null" >
            updated,
          </if>
          <if test="paramData != null" >
            param_data,
          </if>
        </trim>
        <trim prefix="values (" suffix=")" suffixOverrides="," >
          <if test="id != null" >
            #{id,jdbcType=BIGINT},
          </if>
          <if test="itemId != null" >
            #{itemId,jdbcType=BIGINT},
          </if>
          <if test="created != null" >
            #{created,jdbcType=TIMESTAMP},
          </if>
          <if test="updated != null" >
            #{updated,jdbcType=TIMESTAMP},
          </if>
          <if test="paramData != null" >
            #{paramData,jdbcType=LONGVARCHAR},
          </if>
        </trim>
      </insert>





    展开全文
  • 当我们在做后台管理系统时,经常会遇到非常复杂表单:表单项非常多在各种表单类型下,显示不同的表单项在某些条件下,某些表单项会关闭验证每个表单项还会有其他自定义逻辑,比如输入框可以插入模板变量、输入字符...

    当我们在做后台管理系统时,经常会遇到非常复杂的表单:

    表单项非常多

    在各种表单类型下,显示不同的表单项

    在某些条件下,某些表单项会关闭验证

    每个表单项还会有其他自定义逻辑,比如 输入框可以插入模板变量、输入字符数量显示、图片上传并显示、富文本 。。。

    在这种错综复杂的情况下,完成表单的验证和提交

    可以查看具体例子:例子中省略了很多琐碎的功能,只保留整体的复杂表单框架,用于展示解决方案

    方案1: 在一个

    所有的表单项显示隐藏、验证、数据获取、提交、自定义等逻辑放在一起

    v-if/v-show

    elementui

    缺点

    还是乱

    一个

    在我尝试加入一种新的表单类型时,我发现我已经无。从。下。手。

    方案2:分离组件

    其实很容易想到 根据不同的表单类型,分离出多个相应类型的子表单 。但我在实践时还是遇到了很多问题: 父子表单验证、整体提交数据的获取 等等,并总结出一套解决方案:

    1. 子组件

    所有的子组件中都需要包含两个方法 validate 、 getData 供父组件调用。

    (1) validate 方法

    用于验证本身组件的表单项,并返回一个 promise 对象

    vaildate() {

    // 返回`elementUI`表单验证的结果(为`promise`对象)

    return this.$refs["ruleForm"].validate();

    },

    (2) getData 方法

    提供子组件中的数据

    getData() {

    // 返回子组件的form

    return this.ruleForm;

    },

    2. 父组件

    (1)策略模式

    使用策略模式存储并获取 子表单的 ref (用于获取子表单的方法)和 提交函数 。省略了大量的 if-else 判断。

    data:{

    // type和ref名称的映射

    typeRefMap: {

    1: "message",

    2: "mail",

    3: "apppush"

    },

    // type和提交函数的映射。不同类型,接口可能不同

    typeSubmitMap: {

    1: data => alert(`短信模板创建成功${JSON.stringify(data)}`),

    2: data => alert(`邮件模板创建成功${JSON.stringify(data)}`),

    3: data => alert(`push模板创建成功${JSON.stringify(data)}`)

    },

    }

    (2) submit 方法

    用于父子组件表单验证、获取整体数据、调用当前类型提交函数提交数据

    因为 elementUI表单验证的 validate 方法可以返回 promise 结果 ,可以利用 promise 的特性来处理父子表单的验证。 比如 then 函数可以返回另一个 promise 对象 、 catch 可以获取它以上所有 then 的 reject 、 Promise.all 。

    父表单验证通过才会验证子表单,存在先后顺序

    // 父表单验证通过才会验证子表单,存在先后顺序

    submitForm() {

    const templateType = this.typeRefMap[this.indexForm.type];

    this.$refs["indexForm"]

    .validate()

    .then(res => {

    // 父表单验证成功后,验证子表单

    return this.$refs[templateType].vaildate();

    })

    .then(res => {

    // 全部验证通过

    // 获取整体数据

    const reqData = {

    // 获取子组件数据

    ...this.$refs[templateType].getData(),

    ...this.indexForm

    };

    // 获取当前表单类型的提交函数,并提交

    this.typeSubmitMap[this.indexForm.type](reqData);

    })

    .catch(err => {

    console.log(err);

    });

    },

    父表单,子表单一起验证

    submitForm1() {

    const templateType = this.typeRefMap[this.indexForm.type];

    const validate1 = this.$refs["indexForm"].validate();

    const validate2 = this.$refs[templateType].vaildate();

    // 父子表单一起验证

    Promise.all([validate1, validate2])

    .then(res => {

    // 都通过时,发送请求

    const reqData = {

    ...this.$refs[templateType].getData(),

    ...this.indexForm

    };

    this.typeSubmitMap[this.indexForm.type](reqData);

    })

    .catch(err => {

    console.log(err);

    });

    },

    查看在线项目,项目github和组件代码

    总结

    以上所述是小编给大家介绍的开发者网站的支持!

    如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

    展开全文
  • java 提交数据表单

    千次阅读 2010-11-25 16:48:00
    (1)使用Java程序自动发博客的尝试-带附件 这个文章主要是熟悉Upload数据时的数据格式,许多的upload组件看上去很神秘,其实内部并不复杂。 <br />一、我们先来看看当表单 <br />类型为...
  • 公司项目有个模块需要优化form表单内,插入独立的数据表格,表格内容是文件上传,需要利用外部表单提交时,根据后台返回rules动态校验每一行的文件上传功能以及文件类型。 思路 利用表单校验 原有的部分功能和样式,...
  • axis2系列之传输复杂类型数据

    千次阅读 2016-11-21 17:59:32
    复杂数据类型操作主要有两个方面:1、参数传递2、返回值 参数传递:自定义类、表单提交(上传文件等)、数组(在文件上传中都有体现)、集合 返回值:数组、自定类、集合等 一、参数传递: (1)、自定义类: ...
  • 使用@ModelAttribute和表单...作用:用于转化表单数据类型,同时便于将表单值传递到类中,在复杂提交中很有用。 下面例子将讲述怎么使用: 控制类: @RequestMapping(value=&amp;amp;amp;amp;amp;quot;/...
  • 你对http协议的内容类型和结构了解的不够首先, 你的表单数据比较复杂, 所以信息头 Content-Type:application/json 最为合适, 前提是接收post请求的服务端, 对body的json解析是支持的服务端通常的只支持或不支持body...
  • WEB开发时,页面上的数据输入通常有下面几种类型,从简单到复杂依次有 表单数据输入:一维结构 表格数据输入:二维结构 树状数据输入:三维以上的结构 表单数据最简单,表格数据比较麻烦,树状数据比较复杂。 ...
  • - `application/x-www-form-urlencoded` 普通的form表单提交 - `application/json` 用于 复杂JSON数据的提交 - `multipart/form-data` 用于 文件上传
  • 主要功能:在前端主要负责页面数据的交互,让页面动起来,必须点击按钮实现表单数据提交,点击某个区域实现区域样式的变化,鼠标移入时实现鼠标样式的变化等等,这样用户的体验才会更好。 应用场景:简单到幻灯片、...
  • 提交表单时,controller会把表单元素注入到command类里,但是系统注入的只能是基本类型,如int,char,String。但当我们在command类里需要复杂类型,如Integer,date,或自己定义的类时,必须手动配置 SpringMVC...
  • 在web应用中,经常需要处理HTTP请求,请求通常会携带指定格式的数据,包括普通格式的数据,如表单、AJAX默认格式的数据,也有json这样更复杂的...这里说的普通数据主要指如下类型表单提交、get形式的链接请求、...
  • 表单格式自动填写小软件

    热门讨论 2012-09-15 03:41:22
    - 在填写表格时,您可以选择“表单域连接”的规定:“由字段名和字段类型”或“字段顺序号和字段类型”,大大增加了数量,可以使用表格自动填充填充的形式。 - 对于每一个Web表单中,您可以设置默认的填充表单的...
  • 在学习BaseCommandController时,我们知道,当提交表单时,controller会把表单元素注入到Command类里,但是系统注入的只能是基本类型,如int,char,String。但当我们在Command类里需要复杂类型,如Integer或自己...
  • // TODO 提交表单 }) }, resetForm() { this.$refs['elForm'].resetFields() }, } } </code></pre> 对于解析器来说,这是一个抽象的过程: - 数据部分: 构建表单数据实现如下&#...
  • 我们知道,当提交表单时,controller会把表单元素注入到command类里,但是系统注入的只能是基本类型,如int,char,String。但当我们在command类里需要复杂类型,如Integer,date,或自己定义的类时,controller就...
  • 如果数据是简单、平面的...简单点说,application/x-www-form-urlencoded是以表单的形式提交数据拼接方式为key=value的方式,后台如果使用对象接收的话,可以自动封装成对象 @RequestMapping("xxx") public Object.
  • 继承一个DBObject或者 MultiDBObject类(这个名字学习自一个开源项目expresso,功能也类似),只要 定义好schema,也就是手动设定一下每个column的名称、数据类型、是否主键、 是否可为空、是否参照其他表的主键、...
  • Chapter 5. Forms

    2015-07-15 14:03:21
    和 得到结果页, 覆盖了复杂的话题,我们考虑包装形式数据为获得和POST请求,如何每种类型的HTML表单元素产生表单数据,和 如何对自动化过程的提交表单数据和处理的响应. Web的基本模型的典型的主题是与一个已知的...
  • 问题一:form表单提交复杂类型没有问题,但是load负责类型的时候,如何吧json的数据转换 http://blog.csdn.net/cz7301332cz/article/details/6119052 有很好的办法 问题二:json插件的问题 1.过滤生成json的...
  • Bea Weblogic Workshop8.1 JPF开发经验总结

    千次阅读 2004-10-01 09:17:00
    继承FormData的内部静态类,如果使用的是简单类型,就是一个javaBean,当表单 Bean 包含复杂数据类型时,必须将 reset 方法添加到表单 Bean 定义,以确保复杂类的实例可用于存放用户在表单中输入、随后提交(发送)...

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 167
精华内容 66
关键字:

表单提交复杂数据类型