CN113377264A - 一种网页中反馈式交互方法 - Google Patents
一种网页中反馈式交互方法 Download PDFInfo
- Publication number
- CN113377264A CN113377264A CN202110612887.XA CN202110612887A CN113377264A CN 113377264 A CN113377264 A CN 113377264A CN 202110612887 A CN202110612887 A CN 202110612887A CN 113377264 A CN113377264 A CN 113377264A
- Authority
- CN
- China
- Prior art keywords
- interaction
- feedback
- processing method
- information
- event
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 43
- 230000003993 interaction Effects 0.000 title claims abstract description 28
- 230000002452 interceptive effect Effects 0.000 claims abstract description 18
- 238000012545 processing Methods 0.000 claims abstract description 9
- 238000003672 processing method Methods 0.000 claims description 23
- 230000000694 effects Effects 0.000 claims description 6
- 230000001960 triggered effect Effects 0.000 claims description 6
- 230000008859 change Effects 0.000 abstract description 2
- 239000003086 colorant Substances 0.000 abstract description 2
- 238000005516 engineering process Methods 0.000 abstract description 2
- 239000003795 chemical substances by application Substances 0.000 description 9
- 238000010586 diagram Methods 0.000 description 4
- 238000013461 design Methods 0.000 description 3
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000008569 process Effects 0.000 description 2
- 238000006467 substitution reaction Methods 0.000 description 2
- 230000004075 alteration Effects 0.000 description 1
- 230000006399 behavior Effects 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 238000013524 data verification Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000012217 deletion Methods 0.000 description 1
- 230000037430 deletion Effects 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 238000001914 filtration Methods 0.000 description 1
- 238000002955 isolation Methods 0.000 description 1
- 238000007781 pre-processing Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/46—Multiprogramming arrangements
- G06F9/54—Interprogram communication
- G06F9/542—Event management; Broadcasting; Multicasting; Notifications
Abstract
本发明涉及WEB技术应用领域，具体提供了一种网页中反馈式交互方法，具有以下步骤：S1、使用特定格式书写表单；S2、为表单中的元素绑定事件；S3、显示交互；S4、隐藏提示信息；S5、异步请求的处理。与现有技术相比，本发明依据用户的使用习惯，在用户进行表单操作时，通过色彩，图标以及提示信息等具有可明显感知的变化方式，使用户当前关注的区域突出显示出来，给用户正确的交互反馈，让用户更好的适应、使用网站功能，提升用户的使用体验。
Description
技术领域
本发明涉及WEB技术应用领域，具体提供一种网页中反馈式交互方法。
背景技术
伴随着互联网的发展,网上办公已成为主流趋势当下,用户对于网页的需求也越来越多,要求也越来越高。
对于表单填写类的网页来说，反馈形式直接影响到网站的质量、系统优劣。现有的页面设计不是很美观，且网页不能给用户更方便快捷和实用的交流互动。使交互页面不能满足用户需求。
发明内容
本发明是针对上述现有技术的不足，提供一种实用性强的网页中反馈式交互方法。
本发明解决其技术问题所采用的技术方案是：
一种网页中反馈式交互方法，具有以下步骤：
S1、使用特定格式书写表单；
S2、为表单中的元素绑定事件；
S3、显示交互；
S4、隐藏提示信息；
S5、异步请求的处理。
进一步的，在步骤S1中，文档元素的属性中添加自定义属性，指明当前元素触发事件名称，触发事件的规则，以及对应的提示信息。
进一步的，在步骤S2中，首先预先定义好每个表单元素的处理方法，根据元素中已定义的触发事件名称，为所有需要绑定事件的元素添加处理方法，在处理方法中根据在此元素上已定义好的规则，对元素的值域进行判定，当值域符合预期时，展示反馈信息；不符合预期时，展示负反馈信息。
进一步的，添加处理方法时，定义好的处理方法会对应生成一个代理方法，元素触发事件后执行的是代理方法，在代理方法中除执行原始的事件处理方法，还会额外的执行许多及时交互的操作。
进一步的，在步骤S3中，当用户操作后，触发处理方法，在处理方法中通过对当前元素的层叠样式信息进行改变、添加和删除，进而及时有效的做出正确的反馈，交互信息展示的范围即是当前元素的相应位置，层叠样式信息中会写入当前元素中定义好的错误信息。
进一步的，在步骤S4中，表单重置或特定需求需要清除所有的交互信息，通过执行特定方法查找并遍历所有特定元素，在遍历元素的过程中根据规则移除所有多余交互信息。
进一步的，在步骤S5中，当用户点击提交按钮时，会触发绑定在元素上的代理事件，代理事件动态的为当前页面添加蒙版元素，执行异步操作，接收异步数据并在蒙版的基础上添加加载效果图示。
进一步的，在异步请求结束时，交互事件会移除加载效果；在异步请求出错时，给出负反馈信息。
本发明的一种网页中反馈式交互方法和现有技术相比，具有以下突出的有益效果：
本发明依据用户的使用习惯，在用户进行表单操作时，通过色彩，图标以及提示信息等具有可明显感知的变化方式，使用户当前关注的区域突出显示出来，给用户正确的交互反馈，让用户更好的适应、使用网站功能，提升用户的使用体验。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
附图1是一种网页中反馈式交互方法的流程示意图；
附图2是一种网页中反馈式交互方法中代理模式示意图；
附图3是一种网页中反馈式交互方法中使用特定格式书写表单的示意图；
附图4是一种网页中反馈式交互方法中表单中的元素绑定事件的流程示意图；
附图5是一种网页中反馈式交互方法中显示交互的流程示意图；
附图6是一种网页中反馈式交互方法中隐藏提示信息的流程示意图；
附图7是一种网页中反馈式交互方法中异步请求的处理的流程示意图。
具体实施方式
为了使本技术领域的人员更好的理解本发明的方案，下面结合具体的实施方式对本发明作进一步的详细说明。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例都属于本发明保护的范围。
下面给出一个最佳实施例：
H5增加多个表单输入类型、表单元素、表单属性：
表单是实现用户与页面后台交互主要组成部分，HTML5在表单的设计上功能更加强大。
input类型和属性的多样性大大地增强了HTML可表达的表单形式，再加上新增加的一些表单标签，使得原本需要JavaScript来实现的控件，可以直接使用HTML5的表单来实现；一些如内容提示、焦点处理、数据验证等功能，也可以通过HTML5的智能表单属性标签来完成。
H5元素自定义属性：
H5中新增的自定义属性功能，能够让开发者在H5元素上定义多种多样的属性，这些属性需以“data-”开头。
通过自定义属性，开发者可以在元素上赋予更多的内容，方便的实现元素的查找，页面的交互。
Javascript操作H5：
通过JavaScript脚本访问页面元素，能够实现对页面元素的添加，删除，修改元素的外观，调整元素的位置，访问元素的方法，操作元素的行为。
Javascript作为操作页面元素的入口，凭借其强大的功能，能够实现绝大多数用户与页面的交互，通过这种方式可以极大的提升用户体验。
代理模式：
代理模式给某一个对象提供一个代理对象，并由代理对象控制对原对象的引用。
代理模式特点：
中介隔离作用：在某些情况下，一个客户类不想或者不能直接引用一个委托对象，而代理类对象可以在客户类和委托对象之间起到中介的作用，其特征是代理类和委托类实现相同的接口。
开闭原则，增加功能：代理类除了是客户类和委托类的中介之外，我们还可以通过给代理类增加额外的功能来扩展委托类的功能，这样做我们只需要修改代理类而不需要再修改委托类，符合代码设计的开闭原则。代理类主要负责为委托类预处理消息、过滤消息、把消息转发给委托类，以及事后对返回结果的处理等。代理类本身并不真正实现服务，而是同过调用委托类的相关方法，来提供特定的服务。真正的业务功能还是由委托类来实现，但是可以在业务功能执行的前后加入一些公共的服务。
如图1、2、3所示，本实施例中的一种网页中反馈式交互方法，具有以下步骤：
S1、使用特定格式书写表单：
增加交互方式的关键在于获取用户当前聚焦的元素，并为之执行所绑定的事件处理函数，为了方便的查找当前激活的元素，并绑定处理事件，需要在文档元素的属性中添加自定义属性。属性中需要指明的有当前元素触发事件名称，触发事件的规则，以及对应的提示信息。
S2、为表单中的元素绑定事件：
如图4所示，首先需要预先定义好每个表单元素的处理方法。
根据元素中已定义的触发事件名称，为所有需要绑定事件的元素添加处理方法，处理方法中需要根据在此元素上已定义好的规则，对元素的值域进行判定，当值域符合预期时，展示正反馈信息；不符合预期时，展示负反馈信息。
定义好的处理方法会对应生成一个代理方法，元素触发事件后执行的是代理方法，在代理方法中除了执行原始的事件处理方法，还会额外的执行许多及时交互的操作。
S3、显示交互：
如图5所示，当用户操作后，触发处理方法，在处理方法中通过对当前元素的层叠样式信息进行改变，添加，删除，进而及时有效的做出正确的反馈。交互信息展示的范围即是当前元素的相应位置。层叠样式信息中会写入当前元素中定义好的错误信息。
S4、隐藏提示信息：
如图6所述，表单重置或特定需求需要清除所有的交互信息，具体方式是通过执行某个特定方法查找并遍历所有特定元素，在遍历元素的过程中根据规则移除所有多余交互信息。
S5、异步请求的处理：
如图7所示，表单完成后需要提交到服务器进行数据的存储，请求时间跟数据的大小，网络的快慢有直接的关系。此时需要给与用户明确的提示信息，表示当前表单正在提交，需要用户耐心等待上传完成。
具体做法是：当用户点击提交按钮时，会触发绑定在元素上的代理事件，代理事件动态的为当前页面添加蒙版元素，执行异步操作，接收异步数据并在蒙版的基础上添加加载效果图示。在异步请求结束时，交互事件会移除加载效果。在异步请求出错时，给出负反馈信息。
上述具体的实施方式仅是本发明具体的个案，本发明的专利保护范围包括但不限于上述具体的实施方式，任何符合本发明的一种网页中反馈式交互方法权利要求书的且任何所述技术领域普通技术人员对其做出的适当变化或者替换，皆应落入本发明的专利保护范围。
尽管已经示出和描述了本发明的实施例，对于本领域的普通技术人员而言，可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由所附权利要求及其等同物限定。
Claims (8)
1.一种网页中反馈式交互方法，其特征在于，具有以下步骤：
S1、使用特定格式书写表单；
S2、为表单中的元素绑定事件；
S3、显示交互；
S4、隐藏提示信息；
S5、异步请求的处理。
2.根据权利要求1所述的一种网页反馈式交互方法，其特征在于，在步骤S1中，文档元素的属性中添加自定义属性，指明当前元素触发事件名称，触发事件的规则，以及对应的提示信息。
3.根据权利要求2所述的一种网页反馈式交互方法，其特征在于，在步骤S2中，首先预先定义好每个表单元素的处理方法，根据元素中已定义的触发事件名称，为所有需要绑定事件的元素添加处理方法，在处理方法中根据在此元素上已定义好的规则，对元素的值域进行判定，当值域符合预期时，展示反馈信息；不符合预期时，展示负反馈信息。
4.根据权利要求3所述的一种网页反馈式交互方法，其特征在于，添加处理方法时，定义好的处理方法会对应生成一个代理方法，元素触发事件后执行的是代理方法，在代理方法中除执行原始的事件处理方法，还会额外的执行许多及时交互的操作。
5.根据权利要求1所述的一种网页反馈式交互方法，其特征在于，在步骤S3中，当用户操作后，触发处理方法，在处理方法中通过对当前元素的层叠样式信息进行改变、添加和删除，进而及时有效的做出正确的反馈，交互信息展示的范围即是当前元素的相应位置，层叠样式信息中会写入当前元素中定义好的错误信息。
6.根据权利要求1所述的一种网页反馈式交互方法，其特征在于，在步骤S4中，表单重置或特定需求需要清除所有的交互信息，通过执行特定方法查找并遍历所有特定元素，在遍历元素的过程中根据规则移除所有多余交互信息。
7.根据权利要求1所述的一种网页反馈式交互方法，其特征在于，在步骤S5中，当用户点击提交按钮时，会触发绑定在元素上的代理事件，代理事件动态的为当前页面添加蒙版元素，执行异步操作，接收异步数据并在蒙版的基础上添加加载效果图示。
8.根据权利要求7所述的一种网页反馈式交互方法，其特征在于，在异步请求结束时，交互事件会移除加载效果；在异步请求出错时，给出负反馈信息。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110612887.XA CN113377264A (zh) | 2021-06-02 | 2021-06-02 | 一种网页中反馈式交互方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110612887.XA CN113377264A (zh) | 2021-06-02 | 2021-06-02 | 一种网页中反馈式交互方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113377264A true CN113377264A (zh) | 2021-09-10 |
Family
ID=77575369
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110612887.XA Pending CN113377264A (zh) | 2021-06-02 | 2021-06-02 | 一种网页中反馈式交互方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113377264A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116663517A (zh) * | 2023-08-02 | 2023-08-29 | 江苏中威科技软件系统有限公司 | 基于工作流表单系统数据交互与输入内容单屏式操作方法 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102306174A (zh) * | 2011-08-24 | 2012-01-04 | 百度在线网络技术（北京）有限公司 | 一种基于网页元素与用户进行互动的方法与设备 |
| CN102324004A (zh) * | 2011-05-26 | 2012-01-18 | 重庆猪八戒网络有限公司 | 一种网页表单输入信息验证方法及装置 |
| CN102779137A (zh) * | 2011-05-13 | 2012-11-14 | 北京搜狗科技发展有限公司 | 针对网页的用户个性化反馈信息的处理方法和装置 |
| CN102999598A (zh) * | 2012-11-16 | 2013-03-27 | 北京奇虎科技有限公司 | 改变网页中的内容的显示状态的方法及设备 |
| CN109783750A (zh) * | 2018-12-13 | 2019-05-21 | 北京字节跳动网络技术有限公司 | 事件机制定义网页交互行为的方法、装置及电子设备 |
-
2021
- 2021-06-02 CN CN202110612887.XA patent/CN113377264A/zh active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102779137A (zh) * | 2011-05-13 | 2012-11-14 | 北京搜狗科技发展有限公司 | 针对网页的用户个性化反馈信息的处理方法和装置 |
| CN102324004A (zh) * | 2011-05-26 | 2012-01-18 | 重庆猪八戒网络有限公司 | 一种网页表单输入信息验证方法及装置 |
| CN102306174A (zh) * | 2011-08-24 | 2012-01-04 | 百度在线网络技术（北京）有限公司 | 一种基于网页元素与用户进行互动的方法与设备 |
| CN102999598A (zh) * | 2012-11-16 | 2013-03-27 | 北京奇虎科技有限公司 | 改变网页中的内容的显示状态的方法及设备 |
| CN109783750A (zh) * | 2018-12-13 | 2019-05-21 | 北京字节跳动网络技术有限公司 | 事件机制定义网页交互行为的方法、装置及电子设备 |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116663517A (zh) * | 2023-08-02 | 2023-08-29 | 江苏中威科技软件系统有限公司 | 基于工作流表单系统数据交互与输入内容单屏式操作方法 |
| CN116663517B (zh) * | 2023-08-02 | 2023-11-10 | 江苏中威科技软件系统有限公司 | 基于工作流表单系统数据交互与输入内容单屏式操作方法 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US20220100947A1 (en) | Systems and methods for sharing user generated slide objects over a network | |
| JP7013466B2 (ja) | アプリケーションデータ処理方法、装置、及びコンピュータプログラム | |
| US7233951B1 (en) | Spreadsheet grid-like control for a web-based collaboration system | |
| US7346848B1 (en) | Single window navigation methods and systems | |
| CN112632942B (zh) | 一种文档处理方法、装置、设备及介质 | |
| CN116225399A (zh) | 基于电子表格的软件应用程序开发 | |
| KR20150119003A (ko) | 제 3 자 애플리케이션 통신 에이피아이 | |
| US20130097485A1 (en) | Template-based content creation | |
| US20070143662A1 (en) | Inserting user interface elements into native applications | |
| US11599584B2 (en) | Method and system for processing information in social network system | |
| US7814411B2 (en) | Method and apparatus for adapting external controls to a portal design | |
| JP2021505998A (ja) | スプレッドシートに基づくソフトウェアアプリケーションの開発 | |
| US20070136268A1 (en) | Just in time loading list | |
| CN102194003A (zh) | 一种网页弹窗方法及装置 | |
| CN110708235B (zh) | 消息生成方法、装置、存储介质和计算机设备 | |
| CN104321743A (zh) | 用于开发在通信网络上查询内容和服务的应用程序的方法和系统 | |
| CN113377264A (zh) | 一种网页中反馈式交互方法 | |
| CN110020279A (zh) | 页面数据处理方法、装置及存储介质 | |
| CN111970192A (zh) | 基于会话群组的信息编辑方法及装置 | |
| CN116301788A (zh) | 一种网页配置方法、网页配置装置和可读存储介质 | |
| CN114935999A (zh) | 网页复制方法、装置以及设备 | |
| Kaushik | A CloudFormation template using AWS golden standards to avoid cascading failures in hardware | |
| TWM511643U (zh) | 植基於ajax技術的數據集中控管系統 | |
| CN115248800A (zh) | 一种文件处理方法、计算机及可读存储介质 | |
| CN115543288A (zh) | 代码信息的生成方法、装置、设备及存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20210910 |
|
| RJ01 | Rejection of invention patent application after publication |