html表单⾃动填充,⾃动填充Web表单的⽅法与流程
本发明涉及表单填充技术领域，特别涉及⼀种基于AJAX框架和HTML⾃定义属性⾃动填充Web表单的⽅法。
背景技术：
HTML是⽤来描述⽹页的⼀种语⾔，是⼀种超⽂本标记语⾔(Hyper Text Markup Language)，HTML使⽤标记标签来描述⽹页，HTML 标记标签通常称为HTML标签(HTML tag)，如尖括号包围的关键字，
等，HTML标签具体呈现的内容以及样式是根据标签中的属性进⾏展⽰，如样式style，样式类class，标⽰id，宽width，⾼height等。标签属性不局限于只有浏览器识别的固定属性，也可以⾃定义的属性，浏览器对不识别的属性会⾃定进⾏过滤并不影响浏览器展⽰。
在Web起步早期，⼤部分⽹站都是静态页⾯，其中HTML内容是固定的，⼀个请求对应⼀个固定的HTML页⾯，但是对于静态HTML维护更新⽹站内容⼯作量巨⼤，之后出现了动态Web技术，如Java Servlet，ASP.NET等，服务器根据不同的请求动态⽣成相应的HTML返回给客户端，此⽅法解决了更新维护HTML难的问题，此⽅法对于动态更新内容有⼀定的局限性就是更新需要重新加载整个页⾯。后续就诞⽣了AJAX(Asynchronous JavaScript and XML，异步JavaScript和XML)技术，AJAX并不是⼀种新的编程语⾔，⽽是⼀种使⽤现有标准的新⽅法，实现在不重新加载整个页⾯的情况下，与服务器交互数据并实现局部更新⽹页的技术。
动态Web系统⼀般分为MVC(MODEL，VIEW，CONTROLLER，模型-视图-控制器)三层，VIEW指的就是上⽂提到的HTML，MODE层和CONTROLLER根据后台服务器的语⾔有各⾃的实现⽅法。通过AJAX可以屏蔽掉MODE、CONTROLLER实现的不同，提供给客户端只是单纯的数据，在客户端只需要考虑通过JS脚本去实现表单数据的填充，通常情况下填充⽅式是⼀对⼀的去填充，事先知道有哪些
DOM(Document Object Model，⽂档对象模型)元素需要去填充，再从数据实体中获取对应属性的值，再更新到DOM元素上实现表单数据的更新。但在数据对象的结构进⾏变更的时候，如增加⼀个属性，删除⼀个属性，修改属性的名称等，都需要涉及HTML和JS脚本的变更，⽽且HTML页⾯和JS脚本之间相互依赖，其维护成本是很⼤，出错率很⾼。
现有的技术⽅案如下：
1、客户端(通常指浏览器)向服务器请求静态页⾯，获取Web表单视图；
2、客户端JS脚本根据预设好的数据请求地址和参数，向服务器请求数据；
3、服务器端Web处理器接收到客户端请求，解析对象参数，并分发给对应的对象实体处理器进⾏处理；
4、对象实体处理器解析对象参数，从数据库数据源中查询相应的对象实体；
5、如果存在对应的对象实体，填充对象并返回给服务器Web请求处理器，如果不存在，则返回不存在数据的标⽰给服务器Web请求处理器。
6、服务器Web处理器将对象处理器获取的结果封装成⼀定的数据格式，如JSON(JavaScript Object Notation JS，对象标记，是⼀种轻量级的数据交换格式)或者XML格式等，返回消息给客户端。
7、客户端接收到消息后回，回调到客户端AJAX接⼝调⽤模块，并将服务器返回的数据传递给表单数据填充器。
8、客户端JS脚本根据预设好的代码-其中每⼀个需要去填充的DOM元素都需要编写相应的获取数据逻辑以及填充DOM元素内容的逻辑，从⽽实现视图的更新。
现有技术⽅案存在的问题如下：
1、填充表单内容的逻辑累赘⽽复杂，需要针对每⼀个字段编写对应的获取数据逻辑和填充内容的逻辑，对于表单内容的变更，需要在HTML页⾯和JS脚本中同时进⾏变更。可维护性差，出错率⾼。
2、数据请求的地址通过写在JS脚本中，⽽表单的结构在HTML中，阅读性差。
技术实现要素：
本发明提出了⼀种⾃动填充Web表单的⽅法，解决了对象实体到Web表单⾃动填充的技术问题。
本发明采⽤的技术⽅案是：
⼀种⾃动填充Web表单的⽅法，所述⽅法基于AJAX框架并使⽤HTML⾃定义属性，包括以下步骤：
步骤1，客户端向Web服务器请求静态页⾯，获取Web表单视图；
步骤2，HTML属性扫描器获取Web表单数据请求的地址以及参数；
步骤3，客户端根据步骤2中获取的地址及参数，组装Web请求地址，通过客户端AJAX接⼝调⽤模块，向Web服务器发出获取Web表单数据请求；
步骤4，Web请求处理器接收到客户端Web表单数据请求，解析Web表单数据请求参数，并分发给对象实体处理器进⾏处理；
步骤5，对象实体处理器根据对象标⽰，从对象实体容器中查询相应的对象实体；
步骤6，如果对象实体容器存在对应的对象实体，获取对象并返回给Web请求处理器；如果不存在对应的对象实体，则返回不存在的标⽰给Web请求处理器；
步骤7，Web请求处理器将对象实体处理器获取的结果封装成数据格式，返回消息给客户端；
步骤8，客户端接收到服务器消息响应后，回调客户端AJAX接⼝调⽤模块，AJAX接⼝调⽤模块将服务器返回的数据组装为对象实体传递给对象实体分析器；
步骤9，对象实体分析器判断对象实体是否存在，如果不存在，执⾏步骤10；如果存在，执⾏步骤11；
步骤10，不更新Web表单数据；
步骤11，遍历对象实体的属性-值组成的键值对；
步骤12，HTML属性扫描器根据步骤11中的属性对HTML页⾯进⾏扫描，判断是否存在对应的DOM元素，如果不存在，执⾏步骤13；如果存在，执⾏步骤14；
步骤13，执⾏步骤11，继续遍历对象实体的属性-值组成的键值对，直到遍历完所有的键值对；
步骤14，表单数据填充器将寻到的DOM元素的内容更新为与对象实体的属性对应的值。
进⼀步地，所述⽅法通过HTML和JS语⾔实现。
进⼀步地，所述HTML⾃定义属性包括field、name和serverurl字段。
进⼀步地，所述步骤1中客户端是浏览器。
进⼀步地，所述步骤3中AJAX接⼝调⽤模块集成于第三⽅AJAX框架，实现对指定地址和参数请求Web服务器并接收Web服务器响应。
进⼀步地，所述步骤7中数据格式包括JSON或XML。
进⼀步地，所述步骤8中对象实体分析器分析对象实体的结构内容、属性以及与属性对应的值。
进⼀步地，所述步骤2和步骤12中HTML属性扫描器根据指定的属性扫描HTML页⾯，获取对应的DOM元素及其属性值。
进⼀步地，所述步骤14中表单数据填充器集成于第三⽅的Javascript框架，实现对DOM元素进⾏内容填充变更。
本发明数据请求地址和参数通过⾃定义属性声明在Web表单的标签中，与表单在⼀起，本发明有益效果如下：
1、填充表单内容是⼀个通⽤的逻辑，在表单结构变更的时候，只需要在对应的修改的DOM元素上编辑对应的⾃定义属性，就能实现表单内容的⾃动填充更新。
2、表单结构变更只⽤单⼀维护表单本⾝，不⽤关⼼JS脚本，降低开发成本，提⾼开发效率，增强系统拓展性和可维护性。
附图说明
图1是本发明系统结构图。
图2是本发明流程图。
具体实施⽅式
html中提交表单用什么属性本发明通过HTML⾃定义属性，声明与对象实体的之间的对应关系，通过遍历对象实体的属性和值，通过HTML属性扫描器⾃动寻与对象实体的属性对应的DOM元素，并更新其内容。下⽂中，结合附图和实施例对本发明作进⼀步阐述。
图1是本发明系统结构图，包括客户端20和Web服务器30，客户端20通常指浏览器，包括HTML属性扫描器22，表单数据填充器23，对象实体分析器24和AJAX接⼝调⽤模块25；Web服务器包括Web请求处理器31，对象实体处理器32，对象实体容器33。
本发明⼀种⾃动填充Web表单的⽅法基于AJAX框架并使⽤HTML⾃定义属性实现，所述的HTML⾃定义属性不局限于具体的某⼀个属性，依赖HTML属性扫描器22的具体实现⽅法，如field、name、serverurl字段等。图2是本发明流程图，包括以下步骤：
步骤1，客户端20向Web服务器30请求静态页⾯，获取Web表单视图。
步骤2，HTML属性扫描器22获取Web表单数据请求的地址以及参数。
步骤3，客户端20根据步骤2中获取的地址及参数，组装Web请求地址，通过客户端的AJAX接⼝调⽤模块25，向Web服务器30发出获取Web表单数据请求。
步骤4，Web请求处理器31接收到客户端Web表单数据请求，解析Web表单数据请求参数，并分发给对象实体处理器32进⾏处理。
步骤5，对象实体处理器32根据对象标⽰，从对象实体容器33中查询相应的对象实体。
步骤6，如果对象实体容器33存在对应的对象实体，获取对象并返回给Web请求处理器31；如果不存在对应的对象实体，则返回不存在的标⽰给Web请求处理器31。
步骤7，Web请求处理器31将对象实体处理器32获取的结果封装成⼀定的数据格式，如JSON或者XML格式等，返回消息给客户端20。
步骤8，客户端20接收到服务器消息响应后，回调客户端的AJAX接⼝调⽤模块25，AJAX接⼝调⽤模块25将服务器返回的数据组装为对象实体传递给对象实体分析器24。对象实体分析器24分析对象实体的结构内容，有哪些属性，以及与属性对应的值。
步骤9，对象实体分析器24判断对象实体是否存在，如果不存在，执⾏步骤10；如果存在，执⾏步骤11。
步骤10，不更新Web表单数据。
步骤11，遍历对象实体的属性-值组成的键值对，其中对每⼀组键值对进⾏如下步骤12-步骤14操作。
步骤12，HTML属性扫描器22根据步骤11中的属性对HTML页⾯进⾏扫描，判断是否存在与此属性对应的DOM元素，如果不存在，执⾏步骤13；如果存在，执⾏步骤14；
步骤13，执⾏步骤11，继续遍历对象实体的属性-值组成的键值对，直到遍历完所有的键值对；
步骤14，表单数据填充器23将寻到的DOM元素的内容更新为与对象实体的属性对应的值。
较佳地，所述AJAX接⼝调⽤模块25集成于第三⽅AJAX框架，实现对指定地址和参数请求Web服务器30并接收Web服务器30响应。
较佳地，所述HTML属性扫描器22根据指定的属性扫描HTML页⾯，获取对应的DOM元素及其属性值。
较佳地，所述表单数据填充器23集成于第三⽅的Javascript框架，实现对指定DOM元素进⾏内容填充变更。
所述Web请求处理器31、对象实体处理器32、对象实体容器33不局限于某⼀种语⾔和技术⽅案，优选采⽤HTML和JS语⾔实现。
本发明虽然已以较佳实施例公开如上，但其并不是⽤来限定本发明，任何本领域技术⼈员在不脱离本发明的精神和范围内，都可以利⽤上述揭⽰的⽅法和技术内容对本发明技术⽅案做出可能的变动和修改，因此，凡是未脱离本发明技术⽅案的内容，依据本发明的技术实质对以上实施例所作的任何简单修改、等同变化及修饰，均属于本发明技术⽅案的保护范围。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。