多次点击是否多次请求相同的接口（根据条件判断）

最新推荐文章于 2023-06-02 10:32:44 发布
最新推荐文章于 2023-06-02 10:32:44 发布
阅读量2.5k 收藏
点赞数 2
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huanhunacsdn/article/details/81167105
版权

虽然这个是比较菜鸟的功能，但还是想写下来，，以此纪念当时我迷茫可怜的眼神。。。。。。如果有跟我同样可怜的菜鸟前端，，共勉。

1、第一次进入页面的时候点击请求接口，当选择其它城市的时候请求接口，选择相同城市的时候不请求接口。

代码如下，此为完整例子

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
      <title></title>
      <style>
         .win{
            width: 100%;
            height: 100%;
            z-index: 100;
            background: #fff;
            display: none;
            top: 0;
            position: fixed;
         }
         .lan{
            width: 100%;
            height: 50px;
            border:1px solid red;
         }
         .fullAdress{
            width: 100%;
            height: 50px;
            border:1px solid red;
            text-align: center;
         }
         .back{
            width: 100%;
            height: 30px;
         }
         .selectZp{
            width: 100%;
            height: 50px;
            margin-top: 40px;
            border:1px solid #dddddd;
            line-height: 50px;
            text-align: center;
         }
         .prefullAdress{
            display: none;
         }
      </style>
   </head>
   <body>
      <div class="prefullAdress" cityid=''></div>
      <div class="fullAdress" cityid='1'>成都</div>
      <div class="selectZp">请求接口</div>
      <div class="win">
         <div class="back">*******</div>
         <div class="lan" selectyid='1'>成都</div>
         <div class="lan" selectyid='2'>福建</div>
         <div class="lan" selectyid='3'>上海</div>
      </div>
   </body>
   <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
   <script>
      var percity='';
      var flag=true;
      $('.fullAdress').click(function(){
         $('.win').show();
      })
      $('.back').click(function(){
         $('.win').hide();
      })
      $('.lan').click(function(){
         var selectid=$(this).attr('selectyid');
         var html=$(this).html();
         $('.fullAdress').attr('cityid',selectid).html(html)
         $('.win').hide();
      })

      $('.selectZp').click(function(){
         //第一次点击
         if(flag){
         var city=$('.fullAdress').attr('cityid');
         $('.prefullAdress').attr('percity',city);
                console.log('成功');
          flag=false;
          return false;
         }
         //第二次点击
         if(!flag){
            var percity=$('.prefullAdress').attr('percity');
            var city=$('.fullAdress').attr('cityid');
            if(city!==percity){
                console.log('成功');
            }
            $('.prefullAdress').attr('percity',city);
         }

      })
   </script>
</html>
huanhunacsdn
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
项目是如何处理重复请求/并发请求的？
weixin_36332085的博客
11-17 1475
项目是如何处理重复请求/并发请求的？ [转发链接]https://mp.weixin.qq.com/s/L1EnUs1WxlfUgv35Mu1Tvw 对于一些用户请求，在某些情况下是可能重复发送的，如果是查询类操作并无大碍，但其中有些是涉及写入操作的，一旦重复了，可能会导致很严重的后果，例如交易的接口如果重复请求可能会重复下单。 重复的场景有可能是： 黑客拦截了请求，重放 前端/客户端因为某些原因请求重复发送了，或者用户在很短的时间内重复点击了。 网关重发 本文讨论的是如何在服务端优雅地统一处理这种情况，
java如何记录用户的请求_java中一个账号如何多次请求？详细解析
weixin_36397256的博客
02-26 379
随着科学技术的不断进步，java的学习也日常广泛起来。在我们的生活当中，当秒杀或者抢购时就可以用到java，这其实是一种投巧的手段。今天就为大家介绍一下java中一个账号如何多次请求?一起来看看吧。为大家描述一下如何用同一个账号，一次性发出多个请求。部分用户通过浏览器的插件或者其他工具，在秒杀开始的时间里，以自己的账号，一次发送上百甚至更多的请求。实际上，这样的用户破坏了秒杀和抢购的公平性。这种请...
前端同一个接口同时被调用两次的原因
qq_45327886的博客
11-03 5685
同一个接口同时被调用两次的原因
Axios同一请求发送两次 解决方案
u010565037的博客
11-04 1726
目录 出现原因 简单请求与非简单请求： axios设置header信息 原文地址：http://www.cnblogs.com/JimmyBright/p/7681097.html 简单请求与非简单请求区别部分转载自：https://www.cnblogs.com/renpingsheng/p/7688134.html 出现原因 所有跨域的js在提交post请求的时候，如果服务端设...
最简单的接口重复请求处理方法
影落离风
08-31 4132
前言 常见的业务处理中，我们会遇到用户提交数据时出现重复的数据，可能出现： 用户重复点击提交按钮 接口被别有用心之人恶意请求 其它可能出现的问题网络或程序崩溃 解决 接口一定要保持对调用方的不信任 在重复请求处理中，我们的想法 用户在较短时间内，可能几秒内重复提交，可以给用户提示“重复请求” 某些接口需要处理 在执行业务方法前就知道是否是重复请求，减缓服务器压力 知道当前用户和用户请求的接口，这样才能针对用户做重复判断 结合以上想法，我们应该能想到spring aop 什么是aop 面向切面编程，
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
01-18
我就废话不多说了，大家还是直接看代码吧~ Axios.all([request1, request2, request3]) .then( Axios.spread((area, acct,...补充知识：vue，axios处理同一个接口多次访问的执行顺序问题 碰到个问题记录一下，就是ax
解决axios会发送两次请求,有个OPTIONS请求的问题
01-19
原因是：浏览器会首先使用 OPTIONS 方法发起一个预请求，判断接口是否能够正常通讯，如果不能就不会发送真正的请求过来，如果测试通讯正常，则开始真正的请求。 大概意思就是： 浏览器对后台说：我可以请求你吗？ ...
C#有效防止同一账号多次登录（附三种方法）
09-03
在C#开发中，防止同一账号多次登录是一个重要的安全措施，可以有效避免恶意用户或未经授权的多设备同时访问。以下将详细介绍三种常见的方法： 1. 使用数据库记录用户登录状态： 这是最基础也是最常见的方式。当...
PHPCMS二次开发教程
05-06
- if语句：在模板中使用条件判断，实现动态展示内容。 - 后台样式修改：调整后台管理界面的样式，提升用户体验。 - 响应式指向性访问：实现不同设备的适配，提供更好的移动访问体验。 - 分页样式修改：定制分页...
ajax请求一次却执行两次.zip
12-25
如果在`onreadystatechange`事件中没有进行判断，每次`readyState`改变时都会处理服务器的响应，可能导致请求被处理多次。 另一个可能的原因是预检请求（OPTIONS请求）。在跨域请求时，浏览器会先发送一个OPTIONS...
接口重复请求问题处理方案
最新发布
weixin_44121790的博客
06-02 972
上面的问题其实已经是一个很不错的解决方案了，但是实际投入使用的时候可能发现有些问题：某些请求用户短时间内重复的点击了（例如1000毫秒发送了三次请求），但绕过了上面的去重判断（不同的KEY值）。原因是这些请求参数的字段里面，是带时间字段的，这个字段标记用户请求的时间，服务端可以借此丢弃掉一些老的请求（例如5秒前）。对于一些用户请求，在某些情况下是可能重复发送的，如果是查询类操作并无大碍，但其中有些是涉及写入操作的，一旦重复了，可能会导致很严重的后果，例如交易的接口如果重复请求可能会重复下单。
接口如何处理重复请求?
jike11231的博客
08-03 4244
重复请求常用的处理方式就是幂等性处理，幂等性可以理解为：无论执行了多少次重复请求，数据只会处理一次，在数据库里也只会有一条数据。和数据库的唯一索引是一样的。 方式一：前端ajax处理 优点：前端可在用户点击之后将按钮锁定，不可点击，直到后端返回数据才释放锁。前端处理是最为简单有效，且对用户比较友好的方式。可用提示语提醒用户等待。 缺点：无法应对直接刷后端接口的情况，如果用户直接调后端接口，无法处理（属于特殊情况）。 方式：ajax防止重复提交 这里我用登录页面功能作为例子讲解，按下面的方法，用户在点击登录后
如何处理接口重复请求
dream的博客
08-01 2507
解决java接口重复请求方案
java分布式后端处理重复请求/并发请求问题
xiaokemh的博客
11-22 1706
关于重复请求/并发请求问题 引言 关于这个问题，第一次被问到的时候有点蒙，说实话我在项目中没有遇到过这种问题。一般情况下这种涉及多次重复请求的问题都是由前端负责解决，比如按钮点击一次不可用，或者弹窗确认。一直感觉面试的时候脑子不是很好使，第一次遇到这种问题，我思考了10秒，但是脑子一片混乱，找不到对应场景，然后我也没有纠结，想不清楚就直接询问了一下面试官，什么情况下会出现这种情况。额，大概面试官也没有考虑到面试者会反问的情况，他也蒙了一下，支支吾吾几句直接就过了下一个问题，让我感觉一口老槽想吐不敢吐。 私
ajax请求接口判断是否成功与否,PHP接口判断是否为 AJAX 请求
weixin_34910679的博客
08-06 638
PHP要判断是否为 AJAX 请求，先要看前端请求ajax时的情况。先说前端使用 jQuery 时怎么区分：jQuery 发出 ajax 请求时，会在请求头部添加一个名为 X-Requested-With 的信息，信息内容为：XMLHttpRequest在后端可以使用 $_SERVER["HTTP_X_REQUESTED_WITH"] 来获取。由此，我们可以这样来判断是否为 ajax 请求//p...
springmvc、servlet表单重复提交的问题
qq_34091529的博客
03-26 800
一、 表单重复提交的情况介绍： 转发的情况下，表单成功提交后，重复刷新地址栏，出现表单重复提交的问题 表单正常提交后，浏览器回退后，重复点击提交表单 二、解决方案 方案1：:使用重定向进入成功页面 方案2：使用token解决： 在服务器端生成一个全球唯一的id（UUID生成）,这个id称谓token 把生成token存入session中 把生成token存入表单的隐式文本框中 随着表单的提交，生成的token也随之提交 在后台判断session中的token和表单中提交的token是否..
如何解决接口重复请求
天地孤影任我行的博客
05-25 3184
背景 在一些场景用户请求有可能会重复发送，例如提交一个申请单前端没有做防重复，后端接收到两个相同的请求没有经过处理入库，就会存在两条重复的数据 唯一编码去重 如果每个请求都有一个唯一编码，例如前端每次进入提交页面的时候生成一个UUID，在提交的时候把UUID传给服务端，那么就可以用唯一编码通过redis或者数据库的唯一索引进行去重。但是在很多场景下请求不会带上这样的唯一编码，那么能不能针对请求参数作为一个唯一标识呢？ 请求参数去重 把请求参数（JSON）按KEY做升序排序，排序后拼成一个字符串，但
uniapp返回上一个页面接口多次请求
06-01
如果您使用的是uniapp框架，可以使用vue-router提供的beforeRouteLeave函数来实现返回上一个页面时多次请求接口的功能。 1. 在需要实现多次请求的页面组件中，定义一个变量来保存请求返回的数据。 ``` data() { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值