前端数据交互方法、系统、电子设备及可读存储介质技术方案

本申请提供了前端数据交互方法、系统、电子设备及可读存储介质。前端数据交互方法应用于快运税务系统，所述快运税务系统采用JavaScript组件中的Ajax方式以实现客户端和服务器端之间的数据交互；方法包括：利用客户端展示交互页面，交互页面中设置有输入区，输入区用于输入查询信息；当监听到输入区中正在输入查询信息时，基于已输入的查询信息生成查询请求；将查询请求传递到服务器，以获得和查询信息相匹配的目标业务信息；将目标业务信息展示在对应的UI控件中，以实现前端数据交互。通过监听输入区的查询信息并生成查询请求，获得目标业务信息并展示在前端的UI控件中，无需重复制作下拉控件，提高了用户的使用体验。提高了用户的使用体验。提高了用户的使用体验。

【技术实现步骤摘要】
前端数据交互方法、系统、电子设备及可读存储介质


[0001]本申请涉及快递运输行业的
，尤其涉及前端数据交互方法、系统、电子设备及可读存储介质。

技术介绍

[0002]现有技术中，随着电商物流行业的发展，快运网点日趋增多，对快运(快递运输)税务系统的时效等要求越来越高。传统的通过手动录入的方式将待保存的税务信息提交，上述传统的方法进行数据录入或基于录入的数据进行查询时，需要用户手动填写各个字段的值，出错率较高。通过下拉列表进行选择的方式可以解决手动录入的问题，如果有新的业务服务项的选择需求，需要通过代码设置新的下拉列表控件，以实现对新的业务服务项的支持。
[0003]但是快运行业网点多，网点之间的层级不同，每个网点所填写、提交的税务信息各有差异，网点之间使用不同的系统并不现实。为满足各网点个性化的需求，都可能会各自为战，针对每个网点的需求对下拉控件进行调整，会产生大量冗余代码，不便于管理，降低了开发和维护的效率，用户使用体检不好。
[0004]因此，亟需一种前端数据交互方法，以解决现有技术的不足。

技术实现思路

[0005]本申请的目的在于提供前端数据交互方法、系统、电子设备及可读存储介质，监听输入区的查询信息，通过查询信息生成查询请求，获得目标业务信息并展示在前端的UI控件中，无需重复制作下拉控件，提高了用户的使用体验。
[0006]本申请的目的采用以下技术方案实现：
[0007]第一方面，本申请提供了一种前端数据交互方法，应用于快运税务系统，所述快运税务系统采用JavaScript组件中的Ajax方式以实现客户端和服务器端之间的数据交互；
[0008]所述方法包括：利用所述客户端展示交互页面，所述交互页面中设置有输入区，所述输入区用于输入查询信息；
[0009]当监听到所述输入区中正在输入查询信息时，基于已输入的查询信息生成查询请求；
[0010]将所述查询请求传递到所述服务器，以获得和查询信息相匹配的目标业务信息；
[0011]将所述目标业务信息展示在对应的UI控件中，以实现前端数据交互。
[0012]该技术方案的有益效果在于，一方面客户端采用JavaScript组件连接服务器端，JavaScript组件在客户端上可以作为脚本执行，不需要在客户端被编译，响应速度快。另一方面，利用Ajax(Asynchronous JavaScript and XML)方式可以异步读取数据库中的数据，也就是说在执行Ajax方式后不会等待服务器端的执行结果，继续执行下一个任务，使用Ajax方式能够快速地将客户端读取的数据更新呈现在客户端的交互界面上，而不需要重载(刷新)整个界面，这使得程序能够更快地回应前端的数据交互。当监听到用户正在输入区
输入查询信息，利用Ajax方式异步读取数据库中的数据，可以基于已输入的查询信息生成查询请求，无需输入完整的查询信息，节省用户的输入时间和等待时间，特别是在快运税务系统应用的场景中，显著提高了查询信息输入的效率和数据库中数据读取的速度，提高了用户的使用体验。又一方面，通过查询请求得到目标业务信息，并展示在对应的UI控件中，新添加的业务信息只需要录入数据库，就可以基于查询请求被读取和展示，无需为每个新添加的业务信息制作大量下拉列表或下拉组件等UI控件。
[0013]综上，本申请提供的前端数据交互方法，考虑到快运行业网点多、录入信息差异性大的问题，采用JavaScript组件中Ajax方式使客户端连接服务器端，通过查询请求得到目标业务信息，并展示在对应的UI控件中，可以快速实现查询信息的录入；目标业务信息快捷的展示在UI控件中，无需重复制作下拉控件，也减小了冗余代码，进而提高了数据交互的效率，提高开发、维护效率，不会因为冗余代码多、运行速度慢、维护效率低而影响用户的使用体验。
[0014]在一些可选的实施方式中，所述当监听到所述输入区中正在输入查询信息时，基于已输入的查询信息生成查询请求，包括：
[0015]当监听到在所述输入区中输入查询信息时，在所述输入区对应的下拉框中实时展示与所述查询信息对应的多个相关信息；
[0016]基于用户对多个所述相关信息的选择操作，获得目标查询信息；
[0017]基于目标查询信息，生成所述查询请求。
[0018]该技术方案的有益效果在于，当监听到用户正在输入区输入查询信息，利用Ajax方式异步读取数据库中的数据，在输入区对应的下拉框中实施展示与查询信息对应的多个相关信息，用于用户选择，实现对输入区输入的查询信息的补全，节省用户的输入时间。将用户对相关信息选择后(补全后)相关信息作为目标查询信息，生成的查询请求发送至服务器端，提高了数据库中数据读取的准确度和效率，提高了用户的使用体验。
[0019]在一些可选的实施方式中，所述在所述输入区对应的下拉框中实时展示与所述查询信息对应的多个相关信息，包括：
[0020]利用所述服务器端，将所述查询信息与服务器端的多个历史查询信息进行比对，得到多个和所述查询信息对应的历史查询信息；
[0021]将和所述查询信息对应的多个历史查询信息在所述输入区对应的下拉框中按相关度顺序展示。
[0022]该技术方案的有益效果在于，不同于用户在常规网站进行的前端数据交互，查询信息有较高的广度，而快运税务系统的查询信息大都有一定重复性和周期性，将应用于快运税务系统的前端数据交互方法的查询信息与服务器端的多个历史查询信息进行比对，能提升与所述查询信息对应的多个相关信息的准确度，将用户的选择操作的范围缩小，减少了相关信息的展示数量，提高了用户的使用体验。
[0023]在一些可选的实施方式中，所述利用所述服务器端，将所述查询信息与服务器端的多个历史查询信息进行比对，得到多个和所述查询信息对应的历史查询信息，包括：
[0024]将所述查询信息发送到服务器端；
[0025]从多个所述历史查询信息中查找出以所述查询信息开头的历史查询信息，作为和所述查询信息对应的历史查询信息。
[0026]该技术方案的有益效果在于，当监听到正在输入区输入查询信息，查找以查询信息作开头的历史信息，用户无需输入完整的查询信息，减少了用户的操作量；特别是在部分查询信息文字偏长的情况下，减少了查询信息输入错误的可能性，提升了对应的历史查询信息查找的准确率。
[0027]在一些可选的实施方式中，所述将和所述查询信息对应的多个历史查询信息在所述输入区对应的下拉框中按相关度顺序展示，包括：
[0028]获取当前用户的特征信息，所述特征信息用于区分不同用户；
[0029]将所述特征信息和所述查询信息对应的多个历史查询信息输入相关度排序模型，通过所述相关度排序模型输出与所述当前用户相对应的顺序排列的多个历史查询信息，所述顺序排列的多个历史查询信息按照每个历史查询信息与所述用户的相关度排列的；
[0030]将所述顺序排列的多个历史查询信息在所述输入区对应的下拉框中顺序展示；
[0本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种前端数据交互方法，其特征在于，应用于快运税务系统，所述快运税务系统采用JavaScript组件中的Ajax方式以实现客户端和服务器端之间的数据交互；所述方法包括：利用所述客户端展示交互页面，所述交互页面中设置有输入区，所述输入区用于输入查询信息；当监听到所述输入区中正在输入查询信息时，基于已输入的查询信息生成查询请求；将所述查询请求传递到所述服务器，以获得和查询信息相匹配的目标业务信息；将所述目标业务信息展示在对应的UI控件中，以实现前端数据交互。2.根据权利要求1所述的前端数据交互方法，其特征在于，所述当监听到所述输入区中正在输入查询信息时，基于已输入的查询信息生成查询请求，包括：当监听到在所述输入区中输入查询信息时，在所述输入区对应的下拉框中实时展示与所述查询信息对应的多个相关信息；基于用户对多个所述相关信息的选择操作，获得目标查询信息；基于目标查询信息，生成所述查询请求。3.根据权利要求2所述的前端数据交互方法，其特征在于，所述在所述输入区对应的下拉框中实时展示与所述查询信息对应的多个相关信息，包括：利用所述服务器端，将所述查询信息与服务器端的多个历史查询信息进行比对，得到多个和所述查询信息对应的历史查询信息；将和所述查询信息对应的多个历史查询信息在所述输入区对应的下拉框中按相关度顺序展示。4.根据权利要求3所述的前端数据交互方法，其特征在于，所述利用所述服务器端，将所述查询信息与服务器端的多个历史查询信息进行比对，得到多个和所述查询信息对应的历史查询信息，包括：将所述查询信息发送到服务器端；从多个所述历史查询信息中查找出以所述查询信息开头的历史查询信息，作为和所述查询信息对应的历史查询信息。5.根据权利要求3所述的前端数据交互方法，其特征在于，所述将和所述查询信息对应的多个历史查询信息在所述输入区对应的下拉框中按相关度顺序展示，包括：获取当前用户的特征信息，所述特征信息用于区分不同用户；将所述特征信息和所述查询信息对应的多个历史查询信息输入相关度排序模型，通过所述相关度排序模型输出与所述当前用户相对应的顺序排列的多个历史查询信息，所述顺序排列的多个历史查询信息按照每个历史查询信息与所述用户...

【专利技术属性】
技术研发人员：潘秒秒，冯晓明，
申请(专利权)人：上海乾臻信息科技有限公司，
类型：发明
国别省市：