(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210482126.1 (22)申请日 2022.05.05 (71)申请人 上海乾臻信息科技有限公司 地址 200000 上海市崇明区长兴镇江南大 道1333弄11号楼1409室(临港长兴科 技园) (72)发明人 潘秒秒　冯晓明　 (74)专利代理 机构 苏州领跃知识产权代理有限 公司 32370 专利代理师 张帆 (51)Int.Cl. G06F 9/451(2018.01) G06F 16/242(2019.01) G06Q 10/08(2012.01) (54)发明名称 前端数据交互方法、 系统、 电子设备及可读 存储介质 (57)摘要 本申请提供了前端数据交互方法、 系统、 电 子设备及可读 存储介质。 前端数据交互方法应用 于快运税务系统， 所述快运税务系统采用 JavaScript组件中的Ajax方式以实现客户端和 服务器端之间的数据交互； 方法包括： 利用客户 端展示交互页面， 交互页面中设置有输入区， 输 入区用于输入查询信息； 当监听到输入区中正在 输入查询信息时， 基于已输入的查询信息生成查 询请求； 将查询请求传递到服务器， 以获得和查 询信息相匹配的目标业务信息； 将目标业务信息 展示在对应的UI控件中， 以实现前端数据交互。 通过监听输入区的查询信息并生成查询请求， 获 得目标业务信息并展示在前端的UI控件中， 无需 重复制作下拉控 件， 提高了用户的使用体验。 权利要求书2页 说明书13页 附图6页 CN 115016873 A 2022.09.06 CN 115016873 A 1.一种前端数据交互方法， 其特征在于， 应用于快运税务系统， 所述快运税务系统采用 JavaScript组件中的Ajax方式以实现客户端和服 务器端之间的数据交 互； 所述方法包括： 利用所述客户端展示交互页面， 所述交互页面中设置有输入区， 所述输入区用于输入 查询信息； 当监听到所述输入区中正在输入查询信息时， 基于已输入的查询信息生成查询请求； 将所述查询请求传递到所述 服务器， 以获得和查询信息相匹配的目标业 务信息； 将所述目标业 务信息展示在对应的UI控 件中， 以实现前端数据交 互。 2.根据权利要求1所述的前端数据交互方法， 其特征在于， 所述当监 听到所述输入区中 正在输入查询信息时， 基于已输入的查询信息生成查询请求， 包括： 当监听到在所述输入区中输入查询信 息时， 在所述输入区对应的下拉框 中实时展示与 所述查询信息对应的多个相关信息； 基于用户对多个所述相关信息的选择操作， 获得目标查询信息； 基于目标查询信息， 生成所述 查询请求。 3.根据权利要求2所述的前端数据交互方法， 其特征在于， 所述在所述输入区对应的下 拉框中实时展示与所述 查询信息对应的多个相关信息， 包括： 利用所述服务器端， 将所述查询信息与服务器端的多个历史查询信息进行比对， 得到 多个和所述 查询信息对应的历史查询信息； 将和所述查询信息对应的多个历史查询信息在所述输入区对应的下拉框中按相关度 顺序展示。 4.根据权利要求3所述的前端数据交互方法， 其特征在于， 所述利用所述服务器端， 将 所述查询 信息与服务器端的多个历史查询 信息进行比对， 得到多个和所述查询信息对应的 历史查询信息， 包括： 将所述查询信息发送到服 务器端； 从多个所述历史查询信 息中查找出以所述查询信 息开头的历史查询信 息， 作为和所述 查询信息对应的历史查询信息 。 5.根据权利要求3所述的前端数据交互方法， 其特征在于， 所述将和所述查询信 息对应 的多个历史查询信息在所述输入区对应的下拉框中按相关度顺序展示， 包括： 获取当前用户的特 征信息， 所述特 征信息用于区分不同用户； 将所述特征信 息和所述查询信 息对应的多个历史查询信 息输入相关度排序模型， 通过 所述相关度排序模型输出与所述当前用户相对应的顺序排列的多个历史查询 信息， 所述顺 序排列的多个历史查询信息按照每 个历史查询信息与所述用户的相关度排列的； 将所述顺序排列的多个历史查询信息在所述输入区对应的下拉框中顺序展示； 所述相关度排序模型的训练过程如下： 获取训练集， 所述训练集包括多个训练数据， 每个所述训练数据包括一个样本用户的 特征信息、 多个历史查询 信息以及与所述特征信息和多个所述历史查询 信息相对应的顺序 信息的标注数据； 利用所述训练集对预设的深度学习模型进行训练， 得到所述相关度排序模型。 6.根据权利要求1所述的前端数据交 互方法， 其特 征在于，权　利　要　求　书 1/2 页 2 CN 115016873 A 2当所述已输入的查询信息是网点信息时， 所述将所述查询请求传递到服务器， 以获得 和查询信息相匹配的目标业 务信息， 包括： 利用已输入的所述网点信息获得对应的传递 ID； 利用JavaScript组件和所述网点信息对应 的传递ID， 调用所述传递ID对应 的URL将所 述查询请求传递到服 务器端； 基于所述查询请求， 获得对应的多个业务服务数据， 并将多个所述业务服务数据传递 到客户端， 将所述多个所述 业务服务数据作为所述目标业 务信息。 7.根据权利要求1所述的前端数据交互方法， 其特征在于， 所述UI控件包括人员下拉控 件、 网点下拉控 件、 省份下拉控 件、 大区下拉控 件和日期下拉控 件中的至少一个。 8.一种快运税务系统， 其特征在于， 所述快运税务系统采用JavaScript组件中的Ajax 方式以实现客户端和服 务器端之间的数据交 互； 所述客户端用于： 展示交互页面， 所述交互页面中设置有输入区， 所述输入区用于输入 查询信息； 当监听到所述输入区中正在输入查询信息时， 基于已输入的查询信息生成查询 请求； 将所述 查询请求传递到服 务器； 所述服务器端用于： 响应于所述查询请求， 获得和查询信息相匹配的目标业务信息并 发送至所述 客户端； 所述客户端还用于： 将所述目标业务信息展示在对应的UI控件中， 以实现前端数据交 互。 9.一种电子设备， 其特征在于， 所述电子设备包括存储器和处理器， 所述存储器存储有 计算机程序， 所述处 理器执行所述计算机程序时实现权利要求1 ‑7所述方法的步骤。 10.一种计算机可读存储介质， 其特征在于， 所述计算机可读存储介质存储有计算机程 序， 所述计算机程序被处 理器执行时实现权利要求1 ‑7所述方法的步骤。权　利　要　求　书 2/2 页 3 CN 115016873 A 3