在IOS操作系统使用(Jquery)下拉加载的时候,导致发送相一数据请求多次,需要改变Ajax的默认请求方式即可解决该问题(亲测有效)

出现的问题

问题描述:

在做一个微信公众号开发的时候,使用的技术是jQuery技术,并非是Vue.js的技术,很多东西无法从插件市场进行获取,昭仪一些jQuery的插件下拉刷新的,但是效果并非是特别好,甲方不太满意,叫UI设计了稿子,如何开始一步步写,在遇到写jQuery下拉刷新的时候,IOS出现一个问题,下拉数据会出现重复的,而安卓不会出现重复,因为下拉刷新是做了分页,后端使用的是若依分页,所以我这边传值过去的时候通过后端Dbug发现IOS发送的请求只请求了两次,并且渲染数据出现了问题,存在重复的数据,而在安卓端是不存在这样的行为的

问题展示

由于数据设计保密,无法展示出现的图片,我通过一个简单的示例图展示一下这个问题:
大概意思就是:我下拉加载的数据应该是右边实线的pageNum = 2 的数据,但是IOS获取的任然是pageNum = 1 的数据,出现重复的数据。

在这里插入图片描述

我尝试的解决方法

我以为是Ajax的问题,可能是异步编程倒是,于是我使用了 async await 进行尝试,结果在IOS手机测试的时候发现没啥用 (这里指给函数定义失败) ;我也使用了通过boolean进行控制是否执行下拉刷新进行解决这个问题,但是也是不行的;然后我换了一种方法,使用定时器的方式进行setTimeout 进行,最终也是失败告终,后面是通过后台断DBUG查看下拉传递的值,发现 pageNum = 1 加载, pageNum = 2 加载,到 pageNum = 3 获取的时候,没有发送请求,我通过前端加alert() 查看这个count 执行了第几次,发现使用这个alert进行控制是可以的,使用这个alert() 会影响用户的体验,最终没有采取这个方式进行解决。

下拉刷新的代码:

 $(document).ready(function () {
        $("#companyDetailList").unbind("scroll").bind("scroll", function () {
            var sum = this.scrollHeight;
            if (sum <= $(this).scrollTop() + $(this).height()) {
                getDetailData();
            }
        });
    });

问题分析(仅我个人的想法,不具备任何专业性)

我是这样想的,同一套代码,在不同系统运行结果差异很大,安卓的正常显示,IOS的出现BUG,可能是因为IOS中将ajax分别执行了两次,第一次是同步的ajax,第二次可能是异步的Ajax;ios因为不支持异步请求,可能就导致出现两次请求,渲染的数据也出现重复。(仅仅我最初个人的猜想) 但是通过alert() 可以阻止这个重复的问题。

解决方式

我通过两种方式:
方式一:
一个就说alert() ,比如定义一个data,一次性拿30条数据,在执行完获取数据的函数以后,提示一个alert() 进行唤醒我认为的某个机制 阻止二次出现这个任务;

方式二:
给Ajax中的添加一个async: false(改为同步请求) ,然后在IOS和安卓都可以进行正常的操作了!(推荐) ;因为Ajax中的async默认是true;所以是ajax是一个异步请求

 function getData(type, url, data, callback) {
        $.ajax({
            type: type,
            url: prefix + url,
            async: false,//同步请求
            data: data,
            success: function (res) {  //成功否, back, 服务器端响应度信息
                callback(res);
            },
            error: function () {  //如果错误则错误信息。
                $.modal.alertWarning("请求数据失败");
            }
        })
    };

上述均是自己的踩坑点,可能有存在不合理的分析,注:均是自己的个人主观意识!不具备专业性哈。


原文连接:https://blog.csdn.net/weixin_47024018/article/details/122737378

相关推荐

AJAX 英雄管理案例

html网页如何获取后台数据库的数据(html + ajax + php + mysql)

【React】github搜索案例实现兄弟组件通信(axios、PubSub、fetch)

<前端人自己的跨域>React-ajax以及setupProxy配置代理

介绍一款基于axios二次封装的易用http库

手把手教你入门Python中的Web开发框架,干货满满!!

制作表白墙,给TA一个惊喜吧

AJAX--无量境神秘<对超时和网络异常的处理>

我的乖乖,使用ajax传值后台接收不到!

构造 HTTP 请求的方式、HTTPS 的工作过程

关于Servlet的补充知识

【Ajax原生+封装+扩展】入门到入土,这一篇就够了

Servlet的相关API

HTTP协议(下)

【速成之路】网页编程必会的Ajax——JSON

Servlet API

【速成之路】网页编程必会的Ajax——Ajax工作流程(二)

【速成之路】网页编程必会的Ajax——Ajax工作流程(一)

30行JS代码带你手写自动回复语音聊天机器人

【速成之路】网页编程必会的Ajax——jQuery实现Ajax(二)