本发明涉及网络页面处理技术领域，具体而言，涉及一种页面元素联动方法、装置及服务器。
背景技术
在工具或者后台类的项目中，页面存在大量的元素间的数据联动需求。比如某小说运营平台有个表单，表单里有小说类型、作者名、小说名等用户输入或者下拉选择的元素。例如，当用户将小说类型设为‘武侠’时，作者名选项列表自动变成金庸、古龙等内容，小说名列表也随之改变。针对这种联动需求，当有目标页面元素发生变化时，传统的实现方法是反复多次地向服务端接口进行异步请求，以获取所有因目标页面元素变化而联动变化的其他页面元素。现有的这种处理方式不但效率低下，而且前端的页面配置不具有普适性，当增加或删除新的联动关系时必须适应性的修改前端的页面代码和逻辑，这对于开发和维护人员来说是一项繁重的工作。
技术实现要素：
有鉴于此，本发明的目的在于提供一种页面元素联动方法、装置及服务器，以改善上述问题。
第一方面，本发明较佳实施例提供一种页面元素联动方法，应用于客户端，该方法包括：将多个页面元素存储于一个数据容器中；当侦测到所述数据容器中有任意目标页面元素的元素数据发生变化时，向服务器发送联动更新请求，该联动更新请求中包括该目标页面元素及其变化后的元素数据；接收所述服务器根据所述联动更新请求返回的响应数据；根据所述响应数据对用户终端所显示的页面上的对应于所述数据容器中的至少一个其他页面元素的元素数据进行更新。
第二方面，本发明较佳实施例提供一种页面元素联动装置，该装置包括：页面元素存储模块，用于将多个页面元素存储于一个数据容器中；更新请求发送模块，用于当侦测到所述数据容器中有任意目标页面元素的元素数据发生变化时，向服务器发送联动更新请求，该联动更新请求中包括该目标页面元素及其变化后的元素数据；响应数据接收模块，用于接收所述服务器根据所述联动更新请求返回的响应数据；元素数据更新模块，用于根据所述响应数据对用户终端所显示的页面上的对应于所述数据容器中的至少一个其他页面元素的元素数据进行更新。
第三方面，本发明较佳实施例提供一种页面元素联动方法，应用于服务器，该方法包括：接收客户端发送的联动更新请求，其中，所述客户端将多个页面元素存储于一个数据容器中，当侦测到所述数据容器中有任意目标页面元素的元素数据发生变化时，生成所述联动更新请求，该联动更新请求中包括该目标页面元素及其变化后的元素数据；根据所述联动更新请求返回响应数据至所述客户端，以使所述客户端根据所述响应数据对用户终端所显示的页面上的元素数据进行更新，被更新的元素数据对应于所述数据容器中的至少一个除所述目标页面元素外的其他页面元素。
第四方面，本发明较佳实施例提供一种服务器，所述服务器包括：存储器；处理器；以及，页面元素联动装置，该装置安装于所述存储器中并包括一个或多个由所述处理器执行的软件功能模块，该装置包括：
更新请求接收模块，用于接收客户端发送的联动更新请求，其中，所述客户端将多个页面元素存储于一个数据容器中，当侦测到所述数据容器中有任意目标页面元素的元素数据发生变化时，生成所述联动更新请求，该联动更新请求中包括该目标页面元素及其变化后的元素数据；更新请求响应模块，用于根据所述联动更新请求返回响应数据至所述客户端，以使所述客户端根据所述响应数据对用户终端所显示的页面上的元素数据进行更新，被更新的元素数据对应于所述数据容器中的至少一个除所述目标页面元素外的其他页面元素。
本发明分别在第一方面和第二方面的实施例中提供的页面元素联动方法及装置，应用于客户端。所述客户端将多个页面元素存储于一个数据容器中，然后侦测该数据容器中是否有页面元素发生变化，若有，则向服务器发送根据该发生变化的页面元素所生成的联动更新请求。当客户端接收到服务器的反馈数据时，可以根据所述反馈数据对页面上的元素数据进行更新，其中，被更新的元素数据对应于所述数据容器中的其他页面元素，被对应的所述其他页面元素的数目为一个或多个。与现有技术相比，这种联动更新处理方式的更新效率更高，用户体验明显改善，另外这种处理方式无需反复多次的向服务器请求数据，而且页面的前端配置可实现普适性，当增加或删除联动关系时无需对前端页面代码和逻辑进行修改，仅需在服务器进行适应性的逻辑修改即可。
本发明分别在第三方面和第四方面的实施例中提供的页面元素联动方法及服务器，在接收客户端发送的联动更新请求后，根据所述联动更新请求返回响应数据至所述客户端，以使所述客户端根据所述响应数据对页面上的元素数据进行更新。其中，被更新的元素数据对应于所述数据容器中的至少一个除所述目标页面元素外的其他页面元素。这种页面元素联动更新方式可以使服务器在数据容器中有目标页面元素发生变化时，将所有与该目标页面元素存在联动关系的页面元素一次性返回给客户端，使得客户端在联动关系较为复杂的处理场景下也无需反复地多次访问服务器，有效提升了联动更新的处理效率，用户体验明显提升。
为使本发明的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。
附图说明
为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
图1为本发明实施例提供的一种客户端与服务器进行通信的交互示意图；
图2为本发明实施例提供的所述客户端的方框示意图；
图3为本发明实施例提供的所述服务器的方框示意图；
图4为本发明实施例提供的一种应用于所述客户端的页面元素联动方法的流程图；
图5为本发明实施例提供的客户端的第一页面元素联动装置的功能模块示意图；
图6为本发明实施例提供的一种应用于所述服务器的页面元素联动方法的流程图；
图7为本发明实施例提供的服务器的第二页面元素联动装置的功能模块示意图。
图标：100-客户端；200-服务器；110-第一页面元素联动装置；120-第一存储器；130-第一处理器；140-第一通信单元；150-显示单元；210-第二页面元素联动装置；220-第二存储器；230-第二处理器；240-第二通信单元；1102-页面元素存储模块；1104-更新请求发送模块；1106-响应数据接收模块；1108-元素数据更新模块；2102-更新请求接收模块；2104-更新请求响应模块。
具体实施方式
为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。
因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
请参阅图1，是本发明实施例提供的一种客户端100与服务器200进行通信交互的示意图。所述服务器200可通过网络与所述客户端100进行通信，以实现数据传输或交互。所述服务器200可以提供至少一个适用于各种操作系统的应用程序(application，app)的安装包供所述客户端100下载。所述应用程序可以是，但不限于，各类小说阅读器、浏览器或购物app等。所述客户端100通过所述网络访问所述服务器200后，可通过所述网络从服务器200下载适用于自身操作系统的应用程序的安装包后，以将所述应用程序安装到所述客户端100中。
本实施例中，所述客户端100可以是智能手机、个人电脑、平板电脑、个人数字助理、移动上网设备等，但不限于此。所述服务器200可以是网络服务器、文件传输协议服务器(ftp服务器)等，但不限于此。所述网络可以是有线网络或无线网络。所述客户端100的操作系统可以是，安卓(android)系统、ios(iphoneoperatingsystem)系统、windowsphone系统、windows系统等，但不限于此。
请参阅图2，是本发明实施例提供的所述客户端100的方框示意图。所述客户端100包括第一页面元素联动装置110、第一存储器120、第一处理器130、第一通信单元140、显示单元150。
所述第一存储器120、第一处理器130、第一通信单元140以及显示单元150各元件相互之间直接或间接地电性连接，以实现数据的传输或交互。所述第一页面元素联动装置110包括至少一个可以软件或固件的形式存储于所述第一存储器120中或固化在所述客户端100的操作系统中的软件功能模块。所述第一处理器130用于执行所述第一存储器120中存储的可执行模块，例如第一页面元素联动装置110所包括的软件功能模块及计算机程序等。
所述第一存储器120用于存储程序，所述第一处理器130在接收到执行指令后，执行所述程序。所述第一通信单元140用于通过所述网络建立所述服务器200与该客户端100之间的通信连接，并用于通过所述网络收发数据。
所述显示单元150在所述客户端100与用户之间提供一个交互界面(例如用户操作界面)或用于显示图文数据给用户参考。在本实施例中，所述显示单元可以是液晶显示器或触控显示器。若为触控显示器，其可为支持单点和多点触控操作的电容式触控屏或电阻式触控屏等。
请参阅图3，是本发明实施例提供的一种服务器200的方框示意图。所述服务器200包括第二页面元素联动装置210、第二存储器220、第二处理器230以及第二通信单元240。
所述第二存储器220、第二处理器230以及第二通信单元240各元件相互之间直接或间接地电性连接，以实现数据的传输或交互。所述第二页面元素联动装置210包括至少一个可以软件或固件的形式存储于所述第二存储器220中或固化在所述服务器200的操作系统中的软件功能模块。所述第二处理器230用于执行所述第二存储器220中存储的可执行模块，例如第二页面元素联动装置210所包括的软件功能模块及计算机程序等。
所述第二存储器220用于存储程序，所述第二处理器230在接收到执行指令后，执行所述程序。所述第二通信单元240用于通过所述网络建立所述客户端100与该服务器200之间的通信连接，并用于通过所述网络收发数据。
请参阅图4，是本发明实施例提供的一种页面元素联动方法的流程图。本实施例中的方法适用于所述客户端100。所应说明的是，本方法不以图4及下述的具体顺序为限制。下面将对图4所示的各步骤进行详细阐述。
步骤s101，将多个页面元素存储于一个数据容器中。
本实施例中，所述数据容器可以广义的理解为一个用于存储数据的容器或单元，例如list容器、vector容器、数据库等。
作为一种实施方式，存储于同一数据容器的多个页面元素中，至少部分页面元素之间存在直接或间接联动关系。例如，页面元素a、b、c、e和f存储在同一数据容器，其中，页面元素a与b联动，页面元素b又与c联动，页面元素e和f联动。本示例中，对于上述a与b、b与c、e与f之间的联动可以称为直接联动，而a与c之间的联动则可以称为间接联动。
可以理解，该步骤s101在其他实施例中是可以省略的，即将多个页面元素存储于一个数据容器可以是预先完成的操作。
步骤s103，侦测所述数据容器中是否有任意目标页面元素的元素数据发生变化。若有，则执行下述步骤s105，否则结束本流程。
本实施例中，作为一种示例，所述数据容器中存储有上述页面元素a、b、c、e和f。其中，页面元素a表示“小说类型”，页面元素b表示“作者”，页面元素c表示“小说名”，页面元素e表示“价格”，页面元素f表示“出版社”。
所述客户端100实时侦测该数据容器中的页面元素对应的元素数据是否发生了变化。例如，所述页面元素a前一时刻的元素数据为“奇幻”，而当前时刻的元素数据为“武侠”，则可判定该页面元素a发生了变化。
步骤s105，向服务器200发送联动更新请求，该联动更新请求中包括该目标页面元素及其变化后的元素数据。
本实施例中，当侦测到有目标页面元素的元素数据发生变化时，所述客户端100根据变化的页面元素及其元素数据生成相应的联动更新请求，并将该请求发送至服务器200。
例如，当上述页面元素a的元素数据由“奇幻”变化为“武侠”后，所述客户端100将根据页面元素a及其变化后的元素数据“武侠”对应生成联动更新请求并发送至服务器200，以使服务器200根据该请求返回响应数据。
步骤s107，接收所述服务器200根据所述联动更新请求返回的响应数据。
作为一种实施方式，所述响应数据中包括至少一个与所述目标页面元素存在联动关系的其他页面元素及其相应的元素数据。其中，所述联动关系包括上述的直接联动和间接联动。例如，页面元素a发生变化时，所述响应数据中可以至少包括与之直接联动的页面元素b及其对应变化后的元素数据。更进一步地，作为一种示例，假设页面元素a的元素数据由“奇幻”变化为“武侠”，则页面元素b的元素数据可以由“辰东、烟雨江南…….”变化为“金庸、古龙……”。
作为另一种实施方式，所述响应数据中包括所有与所述目标页面元素存在联动关系的其他页面元素及其相应的元素数据。例如，页面元素a发生变化时，所述响应数据中可以至少包括与之直接联动的页面元素b及其对应变化后的元素数据，以及与之间接联动的页面元素c及其对应变化后的元素数据。更进一步地，作为一种示例，假设页面元素a的元素数据由“奇幻”变化为“武侠”，则页面元素b的元素数据可以由“辰东、烟雨江南…….”变化为“金庸、古龙……”，页面元素c的元素数据可以由“《完美世界》、《永夜君王》…….”变化为“《射雕英雄传》、《小李飞刀》……”。
再作为另一种实施方式，所述响应数据中包括所述数据容器中的除所述目标页面元素外的所有其他页面元素，以及所述所有其他页面元素相应的元素数据。例如上述举例的数据容器中包括页面元素a、b、c、e和f，假设页面元素a的元素数据发生了变化，则所述服务器200返回的响应数据中包括页面元素b、c、e和f，以及各自对应的元素数据。可以理解，页面元素e和f与页面元素a之间不存在联动关系，所以当a产生变化时，e和f的元素数据通常不会随之联动变化，所以所述响应数据中包含的这两个页面元素的元素数据可能为空或者是与当前页面上的e和f的元素数据相同。
当然，所述响应数据中也可以包含所述数据容器中的所有页面元素及其对应的元素数据。仍以上述示例为例，也就是说，当页面元素a的元素数据发生变化时，所述服务器200返回的响应数据中包括页面元素a、b、c、e和f，以及各自对应的元素数据。可以理解，所述响应数据中页面元素a的元素数据应为“武侠”。
可选地，所述服务器200返回的响应数据中包含的各页面元素及其元素数据以键值对的形式顺序存储于一数组中，例如：
其中，a＝>data_a表示页面元素a的元素数据为a，其余同理，不再赘述。
假设页面元素a的元素数据由a'变化为上述a后，服务器200返回的响应数据如上所示，可以看出，页面元素b联动更新为b，页面元素c联动更新为c，而页面元素e和f返回的数据为空(表明元素数据未发生变化)。
步骤s109，根据所述响应数据对客户端100所显示的页面上的对应于所述数据容器中的至少一个其他页面元素的元素数据进行更新。
于本实施例中，对页面上的元素数据进行更新的方式可以是，针对所述响应数据中包含的每个页面元素，分别检测该页面元素的元素数据是否为空，若非空，则根据该非空的元素数据对所述页面上的该页面元素的元素数据进行更新，若为空，则不改变所述页面上的该页面元素的元素数据。
本实施例提供的页面元素联动方法，客户端100不需要关心各页面元素的联动逻辑，只要侦测数据容器中是否有目标页面元素的元素数据发生变化即可。若有，则发送包含该目标页面元素及其变化后的元素数据的联动更新请求给服务器200，以从服务器200获取对应的所述响应数据。与现有技术相比，这种联动更新处理方式的更新效率更高，可以一次性获取所有与目标页面元素存在联动关系的所述数据容器中其他页面元素的更新数据，或者直接获取所述数据容器中的所有其他页面元素的元素数据，无论是否与该目标页面元素存在联动关系。也就是说，即使联动逻辑再复杂，客户端100也无需反复多次的向服务器200请求数据。而且，页面的前端配置可实现普适性，当增加或删除联动关系时无需对前端页面代码和逻辑进行修改，仅需在服务器200进行适应性的逻辑修改即可。
请参阅图5，是本发明实施例提供的所述第一页面元素联动装置110的功能模块示意图。该第一页面元素联动装置110包括页面元素存储模块1102、更新请求发送模块1104、响应数据接收模块1106、元素数据更新模块1108。
所述页面元素存储模块1102，用于将多个页面元素存储于一个数据容器中。关于页面元素存储模块1102的具体操作方法可以参照上述图4所示的步骤s101的详细描述，在此不再赘述。
所述更新请求发送模块1104，用于当侦测到所述数据容器中有任意目标页面元素的元素数据发生变化时，向服务器200发送联动更新请求，该联动更新请求中包括该目标页面元素及其变化后的元素数据。关于更新请求发送模块1104的具体操作方法可以参照上述图4所示的步骤s103和s105的详细描述，在此不再赘述。
所述响应数据接收模块1106，用于接收所述服务器200根据所述联动更新请求返回的响应数据。关于响应数据接收模块1106的具体操作方法可以参照上述图4所示的步骤s107的详细描述，在此不再赘述。
所述元素数据更新模块1108，用于根据所述响应数据对用户终端所显示的页面上的对应于所述数据容器中的至少一个其他页面元素的元素数据进行更新。关于元素数据更新模块1108的具体操作方法可以参照上述图4所示的步骤s109的详细描述，在此不再赘述。
请参阅图6，是本发明实施例提供的另一种页面元素联动方法的流程图。该方法应用于所述服务器200。下面对图6中所示的步骤进行详细阐述。
步骤s201，接收客户端100发送的联动更新请求。
本实施例中，作为一种实施方式，所述客户端100将多个页面元素存储于一个数据容器中。然后，实时侦测所述数据容器中是否有任意目标页面元素的元素数据发生变化。当侦测到有目标页面元素的元素数据发生变化时，则生成所述联动更新请求，该联动更新请求中包括该目标页面元素及其变化后的元素数据。
步骤s203，根据所述联动更新请求返回响应数据至所述客户端100，以使所述客户端100根据所述响应数据对客户端100所显示的页面上的元素数据进行更新，被更新的元素数据对应于所述数据容器中的至少一个除所述目标页面元素外的其他页面元素。
作为一种实施方式，所述响应数据中包括所述数据容器中的除所述目标页面元素外的所有其他页面元素，以及所述所有其他页面元素相应的元素数据。
进一步地，所述响应数据中还可以包括发生变化的所述目标页面元素及其变化后的元素数据。
作为另一种实施方式，所述响应数据中包括至少一个与所述目标页面元素存在联动关系的其他页面元素及其相应的元素数据。其中，所述联动关系包括直接联动和间接联动。
进一步地，所述响应数据中可以包括所有与所述目标页面元素存在联动关系的其他页面元素及其相应的元素数据。
作为一种实施方式，所述响应数据中包含的各页面元素及其元素数据以键值对的形式顺序存储于一数组中。
另外，于本实施例中，所述客户端100根据所述响应数据对页面上的元素数据进行更新的方式可以是，针对所述响应数据中包含的每个页面元素，分别检测该页面元素的元素数据是否为空，若非空，则根据该非空的元素数据对所述页面上的该页面元素的元素数据进行更新，若为空，则不改变所述页面上的该页面元素的元素数据。
本实施例中，各步骤的进一步详细的操作方法可以参照图4所示的方法实施例中相应的内容。
本实施例中，当联动关系发生变化时，例如所述数据容器中增加或删除了某个页面元素，或者在之前不存在联动关系的两个页面元素之间增设新的联动逻辑等，仅需要对服务器200中的联动逻辑进行修改，无需改动客户端100的前端代码和逻辑，如此可以使得前端页面的配置更具普适性。
另外，所述服务器200可以根据所述联动更新请求将所述数据容器中所有其他页面元素及其对应的元素数据一起返回给客户端100，或者将所述数据容器中所有与发生变化的目标页面元素存在联动关系的页面元素及其元素数据一起返回给客户端100，这样可以提升客户端100的联动更新效率，提升用户体验，也避免了服务器200被频繁访问占用的弊端。
请参阅图7，是本发明实施例提供的所述第二页面元素联动装置210的功能模块框图。该第二页面元素联动装置210包括更新请求接收模块2102、更新请求响应模块2104。
所述更新请求接收模块2102，用于接收客户端100发送的联动更新请求，其中，所述客户端100将多个页面元素存储于一个数据容器中，当侦测到所述数据容器中有任意目标页面元素的元素数据发生变化时，生成所述联动更新请求，该联动更新请求中包括该目标页面元素及其变化后的元素数据。关于该更新请求接收模块2102的具体操作方法可参照上述对图6中所示步骤s201的详细描述。
所述更新请求响应模块2104，用于根据所述联动更新请求返回响应数据至所述客户端100，以使所述客户端100根据所述响应数据对用户终端所显示的页面上的元素数据进行更新，被更新的元素数据对应于所述数据容器中的至少一个除所述目标页面元素外的其他页面元素。关于该更新请求接收模块2102的具体操作方法可参照上述对图6中所示步骤s203的详细描述。
以上各模块可以是由软件代码实现，此时，上述的各模块可存储于服务器的存储器内。以上各模块同样可以由硬件例如集成电路芯片实现。
需要说明的是，本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。
在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本发明的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
另外，在本发明各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。
所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、只读存储器(rom，read-onlymemory)、随机存取存储器(ram，randomaccessmemory)、磁碟或者光盘等各种可以存储程序代码的介质。
需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以所述权利要求的保护范围为准。应注意到：相似的标号和字母在上面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。