html 表单自动填充,自动填充Web表单的方法与流程

3739eadfeca0fe5c72748064c9111548.gif

本发明涉及表单填充技术领域,特别涉及一种基于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属性扫描器自动寻找与对象实体的属性对应的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语言实现。

本发明虽然已以较佳实施例公开如上,但其并不是用来限定本发明,任何本领域技术人员在不脱离本发明的精神和范围内,都可以利用上述揭示的方法和技术内容对本发明技术方案做出可能的变动和修改,因此,凡是未脱离本发明技术方案的内容,依据本发明的技术实质对以上实施例所作的任何简单修改、等同变化及修饰,均属于本发明技术方案的保护范围。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值