Form data processing method, electronic device, storage medium and program product

Abstract

The present disclosure provides a form data processing method, an electronic device, a storage medium and a program product. The method starts a script in a plug-in in a non-intrusive manner to the web page to display a function button in the web page in response to an indication of starting the plug-in pre-set on the browser, the function button can correspond to a plurality of different form pages contained in the current web page. After the script injection is completed, the target action event of the function button is started to be listened to. Then, in response to the target action event performed on the function button, the form instance of the current form page is obtained based on the attribute of the DOM node. Finally, the function button where the target action event occurs is taken as the current button, and the data processing operation corresponding to the function of the current button is executed based on the obtained form instance, and the data processing operation includes a data acquisition operation, and the data acquisition operation includes acquiring form data in the form instance and storing the acquired form data.

Description

Technical Field

[0001] This disclosure relates to the field of web page data processing technology, and in particular to form data processing methods, electronic devices, storage media, and program products. Background Technology

[0002] Forms are a common form of interaction on web pages, primarily used to obtain user input. However, in some scenarios, forms can be complex, and user input requires time, potentially leading to data loss. Currently, saving drafts is commonly used to address this issue.

[0003] Currently, the main way to save drafts is to add a button to the web page to provide the function of saving drafts. However, this method requires adding a button for each form, the data storage of each form is specific to that form, and this method requires intrusion and modification of the original page's code logic. Summary of the Invention

[0004] To address at least one of the aforementioned technical problems, this disclosure provides a form data processing method, apparatus, electronic device, storage medium, and program product.

[0005] The first aspect of this disclosure proposes a form data processing method, comprising: responding to a startup instruction for a plugin pre-set in a browser, injecting a script in the plugin in a non-intrusive manner to display a function button on the webpage, the function button corresponding to multiple different form pages contained in the current webpage; listening for a target action event of the function button after the script injection is completed; responding to the target action event performed on the function button, obtaining a form instance of the current form page based on the attributes of a DOM node; and taking the function button where the target action event occurred as the current button, performing a data processing operation corresponding to the function of the current button based on the obtained form instance, the data processing operation including a data acquisition operation, the data acquisition operation including: sequentially performing a first acquisition operation and a first storage operation, wherein the first acquisition operation includes: acquiring form data in the form instance, and the first storage operation includes: storing the acquired form data.

[0006] According to one embodiment of this disclosure, injecting scripts from the plugin into the webpage in a non-intrusive manner to display function buttons on the webpage includes: after the webpage is loaded, creating a target DOM node with a preset ID on the current form page; setting the target DOM node with a preset CSS style; and injecting the scripts from the plugin into the target DOM node in a non-intrusive manner to display corresponding function buttons on the webpage, wherein the CSS style corresponds to the preset ID.

[0007] According to one embodiment of this disclosure, after the webpage is loaded, it is first determined whether there is a target DOM node with a preset ID. If there is a target DOM node with a preset ID, the script in the plugin is injected into the target DOM node in a non-intrusive manner to display the corresponding function button on the webpage. Otherwise, a new target DOM node with a preset ID is created on the webpage.

[0008] According to one embodiment of this disclosure, for any of the function buttons, the target action event is a click event.

[0009] According to one embodiment of this disclosure, the webpage is implemented based on the React framework, and the form instance of the current form page is obtained based on the attributes of the DOM node, including: identifying the target DOM node from the DOM nodes of the current form page; and identifying the target object name based on the attribute names contained in each of the multiple attribute levels under the target DOM node, and obtaining the object corresponding to the target object name as a form instance.

[0010] According to one embodiment of this disclosure, identifying a target DOM node from the DOM nodes of the current form page includes: identifying a first DOM node with a tag name of a first name from the DOM nodes of the current form page, wherein the first name corresponds to the meaning of the form.

[0011] According to one embodiment of this disclosure, identifying a target object name based on the attribute names contained in each of the multiple attribute levels under the target DOM node includes: obtaining a target object name, the target object name containing multiple different preset strings, the multiple different preset strings respectively corresponding to attribute names of different levels under the target DOM node; taking the preset string corresponding to the highest level contained in the target object name as the current string, and taking the highest level as the current level; a string identification step, identifying the current string from the attribute names in the current level of the target DOM node; and if the current string is identified, taking the next level of the current level as the new current level and taking the preset string of the new current level as the new current string and performing the string identification step, until the identification of all preset strings in the target object name is completed, and obtaining the object corresponding to the target object name.

[0012] According to one embodiment of this disclosure, the function button includes a first button, and the data processing operation corresponding to the first button is the data acquisition operation.

[0013] According to one embodiment of this disclosure, the function button includes a second button, the data processing operation includes a data viewing operation, the data processing operation corresponding to the second button is the data viewing operation, and the data viewing operation includes: sequentially executing the first acquisition operation and the first display operation, wherein the first display operation includes: displaying the acquired form data through a visual interface.

[0014] According to one embodiment of this disclosure, the data processing operation further includes a timed storage operation, and the method further includes: executing the timed storage operation in response to a timed trigger signal of a set timed storage task, wherein the timed storage operation includes: obtaining the form instance of the current form page based on the attributes of the DOM node, and then sequentially executing the first acquisition operation and the second storage operation, wherein the second storage operation includes: storing the form data obtained by being triggered by the timed storage task.

[0015] According to one embodiment of this disclosure, during the execution of the first acquisition operation, acquiring form data in the form instance includes: acquiring key-value pairs contained in the form instance, and obtaining form data based on the key-value pairs, wherein the key-value pairs include field names and their field values.

[0016] According to one embodiment of this disclosure, the function button includes a third button, the data processing operation includes a data backfilling operation, the data processing operation corresponding to the third button is the data backfilling operation, the data backfilling operation includes: reading a list of all stored form data; and responding to a received form selection instruction in the form data list, using a method function built into the form instance to fill the field values ​​contained in the selected form data into the input position of the corresponding field name of the current form on the page.

[0017] According to one embodiment of this disclosure, filling the field value contained in the selected form data into the input position of the corresponding field of the current form on the page includes: for each field value contained in the selected form data, determining a target field corresponding to the field ID of the field value from all field IDs of the current form on the page; and filling the field value into the input position of the target field.

[0018] According to one embodiment of this disclosure, during the execution of the data processing operation, when storing the form data, the storage location is the browser's storage space or an external server, and the storage name includes the URL address of the corresponding form page.

[0019] According to one embodiment of this disclosure, a key-value pair whose field value corresponds to a preset first data type is used as the first key-value pair. If the form data to be stored contains the first key-value pair, the field value of the first key-value pair is converted into a target data type before storing the data of the first key-value pair. The first data type includes date and time type, and the target data type includes string type. Accordingly, when the field value in the form data is backfilled into the current form of the page, the field value of the first key-value pair is converted into the first data type first.

[0020] A second aspect of this disclosure provides a form data processing apparatus, comprising: a script injection module, configured to, in response to a startup instruction of a plugin pre-set in a browser, inject a script from the plugin in a non-intrusive manner to display a function button on the webpage, the function button corresponding to multiple different form pages contained in the current webpage; an event listening module, configured to, after the script injection is completed, listen for a target action event of the function button; an instance acquisition module, configured to, in response to the target action event performed on the function button, acquire a form instance of the current form page based on the attributes of a DOM node; and a data processing module, configured to, taking the function button where the target action event occurred as the current button, perform a data processing operation corresponding to the function of the current button based on the acquired form instance, the data processing operation including a data acquisition operation, the data acquisition operation including: sequentially executing a first acquisition operation and a first storage operation, wherein the first acquisition operation includes: acquiring form data in the form instance, and the first storage operation includes: storing the acquired form data.

[0021] A third aspect of this disclosure provides an electronic device, comprising: a memory storing execution instructions; and a processor executing the execution instructions stored in the memory, causing the processor to perform the form data processing method described in any of the above embodiments.

[0022] The fourth aspect of this disclosure provides a readable storage medium storing execution instructions, which, when executed by a processor, are used to implement the form data processing method described in any of the above embodiments.

[0023] The fifth aspect of this disclosure provides a computer program product, including a computer program / instructions, characterized in that, when the computer program / instructions are executed by a processor, they implement the form data processing method described in any of the above embodiments. Attached Figure Description

[0024] The accompanying drawings illustrate exemplary embodiments of the present disclosure and, together with the description thereof, serve to explain the principles of the present disclosure. These drawings are included to provide a further understanding of the present disclosure and are incorporated in and constitute a part of this specification.

[0025] Figure 1 This is a flowchart illustrating a form data processing method according to one embodiment of the present disclosure.

[0026] Figure 2 This is a schematic diagram of a page form and function buttons according to one embodiment of the present disclosure.

[0027] Figure 3This is a flowchart illustrating an injection script according to one embodiment of the present disclosure.

[0028] Figure 4 This is a flowchart illustrating an injection script according to another embodiment of the present disclosure.

[0029] Figure 5 This is a schematic diagram of a process for obtaining a form instance according to one embodiment of the present disclosure.

[0030] Figure 6 This is a flowchart illustrating the process of identifying the name of a target object according to one embodiment of the present disclosure.

[0031] Figure 7 This is a flowchart illustrating a form data processing method according to another embodiment of the present disclosure.

[0032] Figure 8 This is a schematic diagram of a form data processing apparatus employing a hardware implementation of a processing system according to one embodiment of the present disclosure. Detailed Implementation

[0033] The present disclosure will now be described in further detail with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are for illustrative purposes only and are not intended to limit the scope of the disclosure. Furthermore, it should be noted that, for ease of description, only the parts relevant to the present disclosure are shown in the accompanying drawings.

[0034] It should be noted that, where there is no conflict, the embodiments and features described in this disclosure can be combined with each other. The technical solutions of this disclosure will now be described in detail with reference to the accompanying drawings and embodiments.

[0035] Unless otherwise stated, the exemplary implementations / embodiments shown are to be understood as providing exemplary features of various details that provide ways in which the technical concepts of this disclosure can be implemented in practice. Therefore, unless otherwise stated, the features of various implementations / embodiments may be additionally combined, separated, interchanged and / or rearranged without departing from the technical concepts of this disclosure.

[0036] The terminology used herein is for the purpose of describing particular embodiments and is not restrictive. As used herein, unless the context clearly indicates otherwise, the singular forms “a” and “the” are intended to include the plural forms as well. Furthermore, when the terms “comprising” and / or “including” and variations thereof are used in this specification, it indicates the presence of the stated features, integrals, steps, operations, parts, components, and / or groups thereof, but does not exclude the presence or addition of one or more other features, integrals, steps, operations, parts, components, and / or groups thereof. It should also be noted that, as used herein, the terms “substantially,” “about,” and other similar terms are used as approximate terms rather than as terms of degree, thus explaining the inherent biases in measurements, calculated values, and / or provided values ​​that would be recognized by one of ordinary skill in the art.

[0037] The following description, using a form application scenario on a web page as an example, with reference to the accompanying drawings, illustrates the form data processing method, apparatus, electronic device, readable storage medium, and computer program product of this disclosure.

[0038] Figure 1 This is a flowchart illustrating a form data processing method according to one embodiment of this disclosure. (See attached diagram.) Figure 1 This disclosure provides a form data processing method M10, which may include the following steps S100, S200 and S300.

[0039] S100, in response to a startup instruction for a plugin pre-configured on the browser, begins injecting scripts from the plugin in a non-intrusive manner to display function buttons on the webpage. These function buttons can correspond to multiple different form pages contained on the current webpage.

[0040] S200 begins listening for target action events of function buttons after script injection is complete.

[0041] S300: After the current form page of the webpage has finished loading, in response to the target action event performed on the function button, the form instance of the current form page is obtained based on the attributes of the DOM node.

[0042] S400: Taking the function button that triggered the target action event as the current button, perform data processing operations corresponding to the function of the current button based on the obtained form instance. The data processing operations include data acquisition operations, which include: sequentially executing a first acquisition operation and a first storage operation. The first acquisition operation includes: acquiring form data from the form instance. The first storage operation includes: storing the acquired form data.

[0043] The form data processing method proposed in this disclosure obtains draft form data in real time by injecting script code into the page through a browser plugin, without making any intrusive modifications to the original page. Furthermore, it can obtain draft data for any current form among all forms contained on the page through the same function button, reducing the number of buttons and development costs. It is more convenient and flexible to use, and no additional development work is required for existing historical pages.

[0044] After a user accesses the target page through a browser, the target plugin, pre-configured in the browser's plugin bar, can be opened. Each plugin has a corresponding plugin panel containing clickable buttons. Users can click the buttons in the panel that enable script injection. Upon clicking, the plugin interprets this click as a activation instruction, initiating the plugin activation and script injection. The script logic is implemented within the plugin's code, allowing the plugin to add desired functionalities to the webpage without affecting existing webpage functionality, such as form data retrieval. This achieves non-intrusive script execution.

[0045] Figure 2 This is a schematic diagram of a page form and function buttons according to one embodiment of this disclosure. See also... Figure 2 Tabs 1 through 6 are the tabs on the webpage the user visits. Form 1 is the form displayed after the user clicks Tab 1. Each tab corresponds to a different form page, and the URLs of different tabs are different. Fields 1 through 5 are the names of the fields in Form 1, and InputBoxes 1 through 5 are the input boxes for the values ​​of Fields 1 through 5, respectively. Buttons 1 through 3 are the displayed function buttons. When the user clicks another tab, other form pages will be displayed, thus showing other forms. For example, when the user clicks Tab 2, the URL will change to the address of Tab 2, and the form content of Form 2 will be displayed within the dotted box.

[0046] The function buttons can correspond to multiple different form pages contained in the current webpage. This means that when a user switches form pages by clicking tabs to change the current form, the webpage itself remains unchanged; only the form pages within the webpage change. The styles of the function buttons remain unchanged and persist on the current webpage. For example, form pages can be switched via front-end routing. In this case, only part of the page content is replaced and changed, so previously injected scripts can continue to run on the webpage. When the webpage is closed or refreshed, the entire webpage is reloaded, requiring the plugin and injected scripts to be reactivated. When any tab's corresponding form becomes the current form, each function button can respond to the target action event to perform the corresponding operation on the current form. This allows the same function button to operate on different forms or the same form at different times.

[0047] Figure 3 This is a flowchart illustrating an injection script according to one embodiment of this disclosure. (See also...) Figure 3 In step S100, the method of injecting the script in the plugin in a non-intrusive manner to display the function button on the webpage may include the following steps S110 and S120.

[0048] S110: After the webpage has finished loading, create a new target DOM node with the preset ID on the current form page.

[0049] S120 sets the style of the target DOM node according to the preset CSS style, and injects the script in the plugin into the target DOM node in a non-intrusive way to make the corresponding function button appear on the webpage. The CSS style corresponds to the preset markup.

[0050] Steps S110 and S120 attach the script to the DOM node with the preset ID, thereby displaying the function button. At the same time, the function button is displayed in the set position with the set style through CSS style configuration.

[0051] by Figure 2For example, after a webpage accessed by a user completes its page content loading, the webpage will display the content of each tab and the corresponding Form1 of the currently selected tab (Tab1). Webpage loading completion indicates that the webpage's HTML (Hypertext Markup Language) code has been loaded, including the HTML code of each form page. At this time, all DOM (Document Object Model) nodes in the webpage's HTML code have also been loaded. Target DOM nodes can be created in the HTML code using scripts; the DOM type of the target DOM node can be a DIV tag (distinguishing markup). The script can be a JS (JavaScript) script.

[0052] When creating the target DOM node, its ID is set to a preset identifier. This preset identifier is a custom, complex identifier. Increasing its complexity reduces the probability that the target DOM node already exists on the webpage, making it difficult for any DOM node with the preset ID to exist in the webpage's DOM, thus facilitating the mounting of the plugin script. The injected JavaScript script inserts the corresponding function button into the webpage, causing the webpage to display one or more of these buttons.

[0053] After creating the target DOM node, you begin adding CSS (Cascading Style Sheets) styles to it. These preset CSS styles are used to set the desired style for the function buttons, such as displaying them in their intended positions on the webpage, and specifying their size, color, and text color according to pre-defined styles. CSS styles can be applied to DOM nodes with pre-defined identifiers; therefore, you can create the target DOM node first and then configure its style using CSS.

[0054] The order in which CSS styles are added and scripts are injected is arbitrary. If CSS styles are added first, the displayed function buttons will be based on the position, color, and size of the CSS styles. If scripts are injected first, the displayed function buttons will initially show the default styles, and then, after the CSS styles are successfully added, they will be displayed according to the position, color, and size of the CSS styles.

[0055] Once the function buttons are displayed on the webpage, even if the form content changes due to switching tabs, the style and position of the function buttons will not change, and there is no need to reactivate the plugin and script. When the user refreshes the webpage, all elements of the page (including DOM elements) will be reloaded, at which point it is necessary to reactivate the plugin and inject the script according to step S100. When the user visits a new webpage, it is also necessary to activate the plugin and inject the script for that webpage.

[0056] Figure 4 This is a flowchart illustrating an injection script according to another embodiment of this disclosure. See also... Figure 4 Step S110 includes the following steps S111 and S112.

[0057] S111: After the webpage is loaded, first determine whether the webpage has a target DOM node with an ID that is identified by a preset identifier.

[0058] S112, If the webpage has a target DOM node with the ID of the preset identifier, the script in the plugin is injected directly into the target DOM node in a non-intrusive manner to make the corresponding function button appear on the webpage; otherwise, a new target DOM node with the ID of the preset identifier is created on the webpage.

[0059] Although the default identifier is set to be complex and it's difficult for DOM nodes with the same identifier to exist, if a DOM node with the default identifier already exists in the current webpage's HTML code, directly creating a new target DOM node would result in two DOM nodes with the same ID. This new target DOM node might overwrite an existing DOM node, causing an error. Therefore, it's advisable to first determine if a DOM node with the default identifier already exists on the webpage. For example, a JavaScript function can be used to directly return whether a DOM node with the default identifier already exists. If the result indicates that it already exists, then this existing DOM node is used as the target DOM node (the script's mount point), and CSS styles and script injection are performed. If the result indicates that it does not exist, then the target DOM node is created.

[0060] After script injection is complete, you can begin listening for the target action events of the function buttons. For example, the target action event for any function button can be a click event. When the user clicks a function button, the system begins retrieving the form instance of the current form page on the webpage, and then executes the function corresponding to Button1 on the form instance. For instance, function button Button1 is used to retrieve form data from the current form page. When the user clicks Button1, the system begins retrieving the Form instance of the current form, Form1. The Form1 instance contains the form data of Form1. The content previously entered by the user in the InputBox is part of the form data.

[0061] Web pages can be built using the React framework, a web development framework. Browser plugins allow you to extract form data at any time within any page developed using React. Figure 5 This is a schematic diagram of a process for obtaining a form instance according to one embodiment of this disclosure. See also... Figure 5 In step S300, the method of obtaining the form instance of the current form page based on the attributes of the DOM node may include the following steps S310 and S320.

[0062] S310 identifies the target DOM node from the DOM nodes of the current form page.

[0063] S320 identifies the target object name based on the attribute names contained in each of the multiple attribute levels under the target DOM node, and retrieves the object corresponding to the target object name as a form instance.

[0064] By leveraging the features of the React framework, this method obtains the current form instance and all its methods, enabling subsequent data processing operations on the form data. Typically, during page development, existing component libraries and tools are used directly. This approach, however, achieves data retrieval by manipulating the form instance, which is then attached to the DOM node by React after the page has been generated.

[0065] The HTML code of the page contains multiple DOM nodes. First, the DOM node containing the form instance is identified and called the target DOM node.

[0066] DOM nodes typically contain multiple attribute levels. In the React framework, form instances may be located in a lower level of the DOM node. In this case, the form instance can be identified and retrieved by the attribute name in the hierarchical path of the form instance.

[0067] For example, in step S310, the method for identifying the target DOM node in the DOM nodes of the current form page can be: identifying the first DOM node with the tag name "first name" from the DOM nodes of the current form page. Here, "first name" corresponds to the meaning of the form.

[0068] DOM nodes can have a tag name (TagName). The first name is "form". The node named "form" is identified from the various DOM nodes, thus obtaining a first DOM node.

[0069] Figure 6 This is a schematic flowchart illustrating the process of identifying the name of a target object according to one embodiment of this disclosure. (See also...) Figure 6 In step S320, the method of identifying the target object name based on the attribute names contained in each of the multiple attribute levels under the target DOM node may include steps S321, S322, string recognition step S333, and step S334.

[0070] S321, Get the target object name. The target object name contains multiple different preset strings, each corresponding to a different level of attribute name under the target DOM node.

[0071] S322, take the preset string corresponding to the highest level contained in the target object name as the current string, and take the highest level as the current level.

[0072] String recognition step S323: Recognize the current string from the attribute names in the current level of the target DOM node.

[0073] S324, if the current string is identified, the next level of the current level is taken as the new current level and the preset string of the new current level is taken as the new current string and the string recognition step is executed until all preset strings in the target object name are identified and the object corresponding to the target object name is obtained.

[0074] The target object name is a pre-known object name, and the form instance resides within an object with that name. The React framework attaches a private property named "__reactInternalInstance" to each DOM element on the page. This private property is a Fiber object that stores the React element's static data structure properties, node tree relationships, dynamic unit of work properties, update priorities, etc. By traversing this private property, you can find the Form instance on the page and also access all of its methods.

[0075] The preset strings can include the first string "__react", the second string "Instance", the third string "memoizedProps", and the fourth string "form". The hierarchy of the preset strings is: first string > second string > third string > fourth string.

[0076] Based on the hierarchical order, first, using "__react" as the current string, identify all properties in the DOM node that begin with "__react," called the first properties. The first properties will include private properties that begin with "__reactInternalInstance." Then, using "Instance" as the current string, identify the aforementioned properties starting with "__reactInternalInstance" from each of the first properties; these are called the second properties. Next, using "memoizedProps" as the current string, identify properties containing "memoizedProps" from each of the second properties; these are called the third properties. The third properties may include the `Instance.memoizedProps.form` property. Finally, using "form" as the current string, identify `Instance.memoizedProps.form` from each of the third properties. If `Instance.memoizedProps.form` is identified, it is returned to obtain the form instance.

[0077] A form instance is an object. The retrieved form instance contains multiple key-value pairs, where the keys are field names, for example... Figure 2 Fields 1 through 5 are used in the dataset. The values ​​are the content entered by the user into the fields, for example... Figure 2 The form instance can contain the content input into InputBox1 through InputBox5. It can include methods and functions, such as methods to retrieve or set the value of a field in the form. The form instance provides APIs for methods like reading and setting values.

[0078] Once the form instance is obtained, a response can be immediately made to the function button that has been clicked. The response is made by performing a data processing operation corresponding to the function. For example, the function button may include a first button. The data processing operation corresponding to the first button may be a data retrieval operation. Figure 2In this example, assuming Button1 is the first button used to retrieve form data, after clicking Button1, the script will retrieve the form instance of the current form page through step S300, and then perform a data retrieval operation on the form instance. That is, it first retrieves the form data from the form instance and then stores the retrieved form data. When different form pages are the current form pages, Button1 can be clicked on each current form page to store the form data of different form pages respectively, or Button1 can be clicked multiple times on the same form page to store the form data of the same form page at different times.

[0079] The form data includes multiple key-value pairs mentioned earlier. When storing the form data, the currently stored form data and the URL path of the current form page also form a key-value pair. The key is the URL path of the current form page, which indicates the address of the form data, and the value is the retrieved form instance.

[0080] For example, the function button may include a second button. The data processing operation may include a data viewing operation. The data processing operation corresponding to the second button may be a data viewing operation. The data viewing operation may include: sequentially executing a first acquisition operation and a first display operation. The first display operation may include: displaying the acquired form data through a visual interface.

[0081] The function to view the form data on the current form page allows you to intuitively see what fields are included in the current form page and what their values ​​are, making it easy to quickly view the form data.

[0082] Figure 2 In this example, assume Button2 is the second button used to view the form data on the current page. After Button1 is clicked, the script will obtain the form instance of the current form page through step S300, and then perform a data viewing operation on the form instance. That is, it first obtains the form data in the form instance, and then displays the obtained form data through a visual interface.

[0083] When displaying form data, the JSon displayer can be used to create a visual interface. The visualization can list only field names and values; for example, each row can list the field names first, then display the string of field values ​​separated by colons. Understandably, it also allows for operations such as copying data from different fields within the visualization.

[0084] For example, data processing operations may also include timed storage operations. Figure 7 This is a flowchart illustrating a form data processing method according to another embodiment of this disclosure. (See attached diagram) Figure 7The form data processing method M10 may also include step S500.

[0085] S500, in response to the timed trigger signal of the set timed storage task, executes a timed storage operation. The timed storage operation includes: obtaining the form instance of the current form page based on the attributes of the DOM node, and then sequentially executing the first retrieval operation and the second storage operation. The second storage operation includes: storing the form data obtained by being triggered by the timed storage task.

[0086] By setting up a scheduled storage task to store form data in a regular manner, the form data of the current page can be automatically stored periodically without the user having to manually click a button, which to some extent avoids the problem of data loss due to the user forgetting to manually save.

[0087] Scheduled saving tasks can be implemented by setting a timer in the plugin. Once triggered, the task automatically retrieves the form instance of the current form page, then obtains and stores the form data from that instance. It's understandable that whether saving manually by clicking Button1 or automatically saving via a scheduled saving task, it's necessary to first retrieve the form instance of the current page to ensure that the retrieved form data is specific to the current page and is the latest data.

[0088] For example, during the execution of the first retrieval operation, the method of retrieving form data from the form instance may include: retrieving key-value pairs contained in the form instance, and obtaining form data based on the key-value pairs, where each key-value pair includes a field name and its field value. Whether clicking Button1 to retrieve data, clicking Button2 to view data, or triggering a scheduled storage task, all three involve executing the first retrieval operation. During the execution of the first retrieval operation, form data can be obtained by retrieving key-value pairs from the form instance. The method of retrieving key-value pairs can be implemented using the form instance's internal method `getFieldsValue`.

[0089] For example, the function button may include a third button. The data processing operation may include a data backfill operation. The data processing operation corresponding to the third button may be a data backfill operation. The data backfill operation may include: reading a list of all stored form data, and in response to a received form selection instruction in the form data list, using the form instance's built-in method function to fill in the field values ​​contained in the selected form data into the input positions of the corresponding field names of the current form on the page.

[0090] Data backfilling enables data from one form to be backfilled into another, achieving data migration between different forms and solving the problem of independent and non-interoperable stored data between different forms.

[0091] Figure 2 In this example, assume Button3 is the second button used for data backfilling. After clicking Button3, the script retrieves the form instance of the current form page through step S300, and then reads a list of all stored form data. This list mainly consists of URLs of the form pages, where each URL represents the form data of a previously stored form instance. The user can then select a form location by clicking on it; the form data corresponding to the selected URL is then considered for backfilling. Upon receiving the user's form selection instruction, the browser backfills the data using the form instance's setFieldsValue method.

[0092] When users need to fill out a large number of forms, and some or all of these forms have many fields and data that are repeated or very similar, data backfilling can save most of the manual input, reducing the workload for users. Even if there are slight differences in the content of the same fields in different forms, only minor modifications can be made during backfilling to complete the field, saving time. Furthermore, if the submission of a completed form fails due to network issues, data backfilling can be performed by saving the data beforehand (manually clicking or automatically saving), avoiding the duplication of some or even all of the data.

[0093] By using a browser plugin, pre-stored draft data can be populated on any page developed using React. The populated draft data does not need to originate from the current page; that is, the page on which the data is populated and the page on which the populated data is retrieved can be the same or different. For example... Figure 2 In one example, after manually filling in Form1 under Tab1 and clicking Button1 to retrieve data, the data entered in Form1 is lost. At this point, clicking Button3 and selecting the URL address of Tab1 can refill the previously retrieved Form1 data back into Form1. Similarly, after manually filling in Form1 under Tab1 and clicking Button1 to retrieve data, clicking Tab2 to switch to the Form2 page, where the layout and fields to be filled in Form2 are very similar to Form1, can also be done by clicking Button3 and selecting the URL address of Tab1 to refill the previously retrieved Form1 data back into Form2.

[0094] For example, in the data backfilling operation, the method of filling the field values ​​contained in the selected form data into the input position of the corresponding field of the current form on the page may include: for each field value contained in the selected form data, determining the target field corresponding to the field ID of the field value from all field IDs of the current form on the page, and filling the field value into the input position of the target field.

[0095] When performing data backfilling, obtaining the form instance of the current form page is to get the names of each field contained in the current form page. This ensures that when the selected stored form data is backfilled to the current form page, the field values ​​from the stored form data can be accurately filled into the input boxes with the same field name, avoiding misfilling and incorrect filling.

[0096] If the current form instance contains a field with the name (i.e., field ID) A, but the selected stored form data does not contain a field value with the name A, then field A will not be populated. Similarly, if the selected stored form data contains a field with the name A, but the current form instance does not contain a field with the name A, then field A will also not be populated.

[0097] If both the form instance on the current form page and the selected stored form data contain a field named A, then the value of field A from the selected stored form data will be entered into the input box for field A on the current form page.

[0098] Whether clicking Button1 to retrieve data or triggering a scheduled storage task, both involve storing form data, corresponding to the first storage operation and the second storage operation, respectively. For example, during the data processing operation, when storing form data, the storage location is either the browser's storage space or an external server, and the stored name includes the URL address of the corresponding form page.

[0099] The browser's storage space, known as LocalStorage, is a browser API that provides data storage. Storing data in LocalStorage makes the storage process convenient, but the stored form data will be lost when the browser is closed or its memory is cleared. Storing data on an external server ensures the data is permanently stored, but this requires specific server-side interface settings. Specifically, the first storage operation when Button1 is clicked stores data in LocalStorage, while the second storage operation performed by a scheduled storage task stores data on an external server. During data refilling, form data can be automatically or manually selected from LocalStorage or an external server for refilling.

[0100] For example, using key-value pairs whose field values ​​correspond to a preset first data type as the first key-value pair, if the form data to be stored contains the first key-value pair, the field values ​​of the first key-value pair can be converted to the target data type before storing the data of the first key-value pair. The first data type may include a date / time type. The target data type may include a string type. Accordingly, when filling the field values ​​in the form data back into the current form of the page, the field values ​​of the first key-value pair can be converted to the first data type first.

[0101] When using LocalStorage for data storage, there may be certain requirements regarding the data type of the stored data. For example, only field values ​​of the target data type can be stored. Therefore, field values ​​that are not of the target data type need to be converted to the target data type before storage. For instance, after clicking Button1 on the Form1 page, the form data of the form instance is retrieved. The form data includes time and date fields and their values. These fields correspond to the Moment data type, so they need to be converted to string types, marked, and stored first. When clicking Button3 on the Form1 page to populate the data, the string values ​​of the time and date fields are first determined based on the markings, then converted to the Moment data type, and then filled into the corresponding time and date fields.

[0102] This implementation leverages browser plugins to inject shortcut buttons into the target page, enabling the retrieval, filling, display, and automatic saving of forms on the target page. For existing historical pages, no additional development work is required to achieve the retrieval, filling, display, and automatic saving of draft data, and there is no need to restrict the one-to-one correspondence between pages and draft data.

[0103] Figure 8 This is a schematic diagram of a form data processing apparatus employing a hardware implementation of a processing system according to one embodiment of the present disclosure. (See also...) Figure 8 This disclosure also provides a form data processing device 1000. The form data processing device 1000 of this embodiment may include a script injection module 1002, an event listening module 1004, an instance acquisition module 1006, and a data processing module 1008.

[0104] The script injection module 1002 is used to respond to a startup instruction of a plugin pre-set on the browser to begin injecting the script in the plugin in a non-intrusive manner to display function buttons on the webpage, the function buttons being able to correspond to multiple different form pages contained in the current webpage.

[0105] The script injection module 1002 can inject scripts from the plugin in a non-intrusive manner to display function buttons on the webpage. This can be achieved by the following steps: after the webpage is loaded, a target DOM node with a preset ID is created on the current form page; the target DOM node is styled according to a preset CSS style, and the scripts from the plugin are injected into the target DOM node in a non-intrusive manner to display the corresponding function buttons on the webpage. The CSS style corresponds to the preset ID.

[0106] After the webpage is loaded, the script injection module 1002 can first determine whether there is a target DOM node with a preset ID on the webpage. If there is a target DOM node with a preset ID on the webpage, the script in the plugin can be injected into the target DOM node in a non-intrusive way to make the corresponding function button appear on the webpage. Otherwise, a new target DOM node with a preset ID can be created on the webpage.

[0107] The event listener module 1004 is used to start listening for the target action events of the function buttons after the script injection is complete. For any function button, the target action event can be a click event.

[0108] The instance acquisition module 1006 is used to respond to the target action event performed on the function button and start to obtain the form instance of the current form page based on the attributes of the DOM node.

[0109] The webpage can be implemented based on the React framework. The instance acquisition module 1006 can obtain the form instance of the current form page based on the attributes of the DOM node. This can include the following steps: identifying the target DOM node from the DOM nodes of the current form page; and identifying the target object name based on the attribute names contained in each of the multiple attribute levels under the target DOM node, and obtaining the object corresponding to the target object name as the form instance.

[0110] The instance acquisition module 1006 can identify the target DOM node from the DOM nodes of the current form page by the following steps: identifying the first DOM node with the tag name "first name" from the DOM nodes of the current form page, where the first name corresponds to the meaning of the form.

[0111] The instance acquisition module 1006 identifies the target object name based on the attribute names contained in each of the multiple attribute levels under the target DOM node, which may include the following steps: obtaining the target object name, which contains multiple different preset strings, each of which corresponds to the attribute name of a different level under the target DOM node; taking the preset string corresponding to the highest level in the target object name as the current string, and taking the highest level as the current level; a string recognition step, recognizing the current string from the attribute names in the current level of the target DOM node; and if the current string is recognized, taking the next level of the current level as the new current level and taking the preset string of the new current level as the new current string and performing the string recognition step, until all preset strings in the target object name are recognized, and obtaining the object corresponding to the target object name.

[0112] The data processing module 1008 is used to take the function button that has triggered the target action event as the current button, and to perform data processing operations corresponding to the function of the current button based on the obtained form instance. The data processing operations include data acquisition operations, which include: sequentially executing a first acquisition operation and a first storage operation. The first acquisition operation includes: acquiring form data in the form instance, and the first storage operation includes: storing the acquired form data.

[0113] The function buttons may include a first button, and the data processing operation corresponding to the first button may be a data acquisition operation.

[0114] The function button may include a second button, and the data processing operation may include a data viewing operation. The data processing operation corresponding to the second button may be a data viewing operation. The data viewing operation may include the following steps: sequentially executing a first acquisition operation and a first display operation, wherein the first display operation includes: displaying the acquired form data through a visual interface.

[0115] The data processing operation may also include a timed storage operation. The data processing module 1008 is also used to execute the timed storage operation in response to the timed trigger signal of the set timed storage task. The timed storage operation may include the following steps: obtaining the form instance of the current form page based on the attributes of the DOM node, and then executing the first acquisition operation and the second storage operation in sequence. The second storage operation includes storing the form data obtained by being triggered by the timed storage task.

[0116] During the first acquisition operation performed by the data processing module 1008, the method of acquiring form data in the form instance may include the following steps: acquiring key-value pairs contained in the form instance, and obtaining form data based on the key-value pairs, wherein the key-value pairs include field names and their field values.

[0117] Function buttons may include a third button, and data processing operations may include a data backfill operation. The data processing operation corresponding to the third button may be a data backfill operation, which may include the following steps: reading a list of all stored form data; and responding to a received form selection instruction in the form data list, using the form instance's built-in method function to fill the field values ​​contained in the selected form data into the input position of the corresponding field name of the current form on the page.

[0118] The data processing module 1008 may fill the field values ​​contained in the selected form data into the input positions of the corresponding fields of the current form on the page by the following steps: for each field value contained in the selected form data, determine the target field corresponding to the field ID of the field value from all field IDs of the current form on the page; and fill the field value into the input position of the target field.

[0119] During the data processing operation performed by the data processing module 1008, when storing form data, the storage location can be the browser's storage space or an external server, and the storage name can include the URL address of the corresponding form page.

[0120] The first key-value pair is defined as the key-value pair whose field value corresponds to a preset first data type. If the form data to be stored contains the first key-value pair, the data processing module 1008 can convert the field value of the first key-value pair into the target data type before storing the data of the first key-value pair. The first data type includes date and time type, and the target data type includes string type. Accordingly, when the data processing module 1008 backfills the field value in the form data into the current form of the page, it can first convert the field value of the first key-value pair into the first data type.

[0121] It should be noted that details not disclosed in the form data processing apparatus 1000 of this embodiment can be found in the details disclosed in the form data processing method M10 of the above-described embodiment of this disclosure, and will not be repeated here.

[0122] The form data processing apparatus 1000 may include corresponding modules that perform one or more steps in the flowchart described above. Therefore, each or more steps in the flowchart can be performed by a corresponding module, and the apparatus may include one or more of these modules. A module may be one or more hardware modules specifically configured to perform a corresponding step, or implemented by a processor configured to perform a corresponding step, or stored in a computer-readable medium for implementation by a processor, or implemented through some combination thereof.

[0123] The hardware architecture of the form data processing device 1000 can be implemented using a bus architecture. The bus architecture can include any number of interconnect buses and bridges, depending on the specific application and overall design constraints of the hardware. Bus 1100 connects various circuits including one or more processors 1200, memory 1300, and / or hardware modules. Bus 1100 can also connect various other circuits 1400 such as peripheral devices, voltage regulators, power management circuits, external antennas, etc.

[0124] Bus 1100 can be an Industry Standard Architecture (ISA) bus, a Peripheral Component Interconnect (PCI) bus, or an Extended Industry Standard Component (EISA) bus, etc. Buses can be categorized as address buses, data buses, control buses, etc. For ease of representation, only one connection line is used in this diagram, but this does not imply that there is only one bus or only one type of bus.

[0125] Any process or method description in the flowcharts or otherwise herein can be understood as representing a module, segment, or portion of code comprising one or more executable instructions for implementing a particular logical function or process, and the scope of the preferred embodiments of this disclosure includes additional implementations in which functions may be performed not in the order shown or discussed, including substantially simultaneously or in reverse order depending on the functions involved, as will be understood by those skilled in the art to which embodiments of this disclosure pertain. The processor performs the various methods and processes described above. For example, the method embodiments of this disclosure may be implemented as software programs tangibly contained in a machine-readable medium, such as memory. In some embodiments, part or all of the software program may be loaded and / or installed via memory and / or a communication interface. When the software program is loaded into memory and executed by the processor, one or more steps of the methods described above may be performed. Alternatively, in other embodiments, the processor may be configured to perform one of the methods described above by any other suitable means (e.g., by means of firmware).

[0126] The logic and / or steps represented in the flowchart or otherwise described herein may be specifically implemented in any readable storage medium for use by, or in conjunction with, an instruction execution system, apparatus or device (such as a computer-based system, a processor-included system or other system that can fetch and execute instructions from, an instruction execution system, apparatus or device).

[0127] It should be understood that various parts of this disclosure can be implemented in hardware, software, or a combination thereof. In the above embodiments, multiple steps or methods can be implemented in software stored in memory and executed by a suitable instruction execution system. For example, if implemented in hardware, as in another embodiment, it can be implemented using any one or a combination of the following techniques known in the art: discrete logic circuits having logic gates for implementing logical functions on data signals, application-specific integrated circuits (ASICs) having suitable combinational logic gates, programmable gate arrays (PGAs), field-programmable gate arrays (FPGAs), etc.

[0128] Those skilled in the art will understand that all or part of the steps of the methods described above can be implemented by a program instructing related hardware. This program can be stored in a readable storage medium, and when executed, it includes one or a combination of the steps of the method implementation. The storage medium can be volatile or non-volatile.

[0129] Furthermore, the functional units in the various embodiments of this disclosure can be integrated into a single processing module, or each unit can exist physically separately, or two or more units can be integrated into a single module. The integrated module can be implemented in hardware or as a software functional module. If the integrated module is implemented as a software functional module and sold or used as an independent product, it can also be stored in a readable storage medium. The storage medium can be a read-only memory, a disk, or an optical disk, etc.

[0130] It is understood that before using the technical solutions disclosed in the various embodiments of this disclosure, users should be informed of the types, scope of use, and usage scenarios of the personal information involved in this disclosure in an appropriate manner in accordance with relevant laws and regulations, and user authorization should be obtained.

[0131] For example, upon receiving a user's active request, a prompt message is sent to the user to explicitly inform them that the requested operation will require the acquisition and use of the user's personal information. This allows the user to independently choose whether to provide personal information to the software or hardware, such as the electronic device, application, server, or storage medium performing the operations of this disclosed technical solution, based on the prompt message.

[0132] As an optional but non-limiting implementation, in response to a user's active request, sending a prompt message to the user can be done via a pop-up window, where the prompt message can be presented in text format. Furthermore, the pop-up window can also include a selection control allowing the user to choose "agree" or "disagree" to provide personal information to the electronic device.

[0133] It is understood that the above notification and user authorization process are merely illustrative and do not constitute a limitation on the implementation of this disclosure. Other methods that comply with relevant laws and regulations may also be applied to the implementation of this disclosure.

[0134] At the same time, it is understood that the data involved in this disclosed technical solution (including but not limited to the data itself, the acquisition or use of the data) shall comply with the requirements of relevant laws, regulations and related provisions.

[0135] This disclosure also provides an electronic device, including: a memory storing execution instructions; and a processor or other hardware module executing the execution instructions stored in the memory, causing the processor or other hardware module to perform the form data processing method of the above embodiments.

[0136] This disclosure also provides a readable storage medium storing execution instructions, which, when executed by a processor, are used to implement the form data processing method of any of the above embodiments.

[0137] For the purposes of this specification, a "readable storage medium" can be any means capable of containing, storing, communicating, propagating, or transmitting a program for use by or in conjunction with an instruction execution system, apparatus, or device. More specific examples (a non-exhaustive list) of readable storage media include: an electrical connection having one or more wires (electronic device), a portable computer disk drive (magnetic device), random access memory (RAM), read-only memory (ROM), erasable and programmable read-only memory (EPROM or flash memory), fiber optic devices, and portable read-only memory (CDROM). Furthermore, a readable storage medium can even be paper or other suitable media on which a program can be printed, since a program can be obtained electronically, for example, by optically scanning the paper or other medium, followed by editing, interpreting, or otherwise processing as necessary, and then stored in memory.

[0138] This disclosure also provides a computer program product, including a computer program / instructions that, when executed by a processor, implement the form data processing method of any of the above embodiments.

[0139] In the description of this specification, the references to terms such as "one embodiment / mode," "some embodiments / modes," "specific example," or "some examples," etc., indicate that a specific feature, structure, material, or characteristic described in connection with that embodiment / mode or example is included in at least one embodiment / mode or example of this disclosure. In this specification, the illustrative expressions of the above terms do not necessarily refer to the same embodiment / mode or example. Furthermore, the specific features, structures, materials, or characteristics described may be combined in any suitable manner in one or more embodiments / modes or examples. Moreover, without contradiction, those skilled in the art can combine and integrate the different embodiments / modes or examples described in this specification, as well as the features of different embodiments / modes or examples.

[0140] Furthermore, the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include at least one of that feature. In the description of this disclosure, "a plurality of" means at least two, such as two, three, etc., unless otherwise explicitly specified.

[0141] Those skilled in the art should understand that the above embodiments are merely for illustrating the present disclosure and are not intended to limit the scope of the disclosure. Those skilled in the art can make other changes or modifications based on the above disclosure, and these changes or modifications still fall within the scope of the present disclosure.

Claims

1. A method for processing form data, characterized in that, include: In response to a startup instruction for a plugin pre-configured on a browser, the script in the plugin is injected in a non-intrusive manner to display function buttons on the webpage, the function buttons being able to correspond to multiple different form pages contained in the current webpage; After the script injection is complete, start listening for the target action events of the function buttons; In response to the target action event performed on the function button, begin to obtain the form instance of the current form page based on the properties of the DOM node; as well as Taking the function button where the target action event occurs as the current button, a data processing operation corresponding to the function of the current button is executed based on the obtained form instance. The data processing operation includes a data acquisition operation, which includes: sequentially executing a first acquisition operation and a first storage operation. The first acquisition operation includes: acquiring form data in the form instance, and the first storage operation includes: storing the acquired form data. Injecting scripts into the plugin in a non-intrusive manner to display function buttons on the webpage includes: After the webpage loads, a new target DOM node with a preset ID is created on the current form page; the target DOM node is styled according to a preset CSS style, and the script in the plugin is injected into the target DOM node in a non-intrusive manner to display the corresponding function button on the webpage. The CSS style corresponds to the preset ID. The webpage is implemented using the React framework, and obtains the form instance of the current form page based on the attributes of DOM nodes, including: Identify the target DOM node from the DOM nodes of the current form page; and The target object name is identified based on the attribute names contained in each of the multiple attribute levels under the target DOM node, and the object corresponding to the target object name is obtained as a form instance.

2. The method according to claim 1, characterized in that, The function button includes a first button, and the data processing operation corresponding to the first button is the data acquisition operation.

3. The method according to claim 1, characterized in that, The function button includes a second button, and the data processing operation includes a data viewing operation. The data processing operation corresponding to the second button is the data viewing operation. The data viewing operation includes: sequentially executing the first acquisition operation and the first display operation, wherein the first display operation includes: displaying the acquired form data through a visual interface.

4. The method according to claim 1, characterized in that, The data processing operation also includes a timed storage operation, and the method further includes: The timed storage operation is executed in response to the timed trigger signal of the set timed storage task. The timed storage operation includes: obtaining the form instance of the current form page based on the attributes of the DOM node, and then executing the first acquisition operation and the second storage operation in sequence. The second storage operation includes: storing the form data obtained by being triggered by the timed storage task.

5. The method according to claim 1, characterized in that, The function button includes a third button, and the data processing operation includes a data backfilling operation. The data processing operation corresponding to the third button is the data backfilling operation, which includes: Read the list of all stored form data; and In response to the received form selection instruction in the form data list, the field values ​​contained in the selected form data are filled into the input positions of the corresponding field names of the current form on the page using the method functions provided by the form instance.

6. An electronic device, characterized in that, include: The memory stores execution instructions; as well as A processor that executes execution instructions stored in the memory, causing the processor to perform the form data processing method as described in any one of claims 1 to 5.

7. A readable storage medium, characterized in that, The readable storage medium stores execution instructions, which, when executed by a processor, are used to implement the form data processing method as described in any one of claims 1 to 5.

8. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by a processor, it implements the form data processing method according to any one of claims 1 to 5.

Images