坑爹的苹果机不执行ajax请求，苹果机加载外部Jquery失败

最新推荐文章于 2022-05-14 19:01:29 发布

一杯雪花勇闯天涯

最新推荐文章于 2022-05-14 19:01:29 发布

阅读量4.9k

点赞数

分类专栏： PHP

本文链接：https://blog.csdn.net/u014265398/article/details/89248070

版权

PHP 专栏收录该内容

65 篇文章 1 订阅

订阅专栏

小编最近在写一个按摩椅倒计时按摩椅倒计时功能时候，在安卓机运行良好，放到苹果机上运行直接凉凉了，小编欲哭无泪。纠结了一天终于解决了这个问题:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no viewport-fit=cover">
    <title>共享按摩椅</title>
    <link rel="stylesheet" href="/Public/dishuang/css/work.css">
</head>
<body>
<div class="massor_top">
    <div class="massor_top_left">
        <img class="image1" src="/Public/dishuang/imgs/dingweih.png" alt="">
        <span>{$data.name}</span>
        <img class="image2"  src="/Public/dishuang/imgs/arrowh.png" alt="">
    </div>
    <div class="massor_top_right">
        <img class="image3" src="/Public/dishuang/imgs/qrcodeh.png" alt="">
        <span id="dev_code">{$data.dev_code}</span>
    </div>
</div>

<div class="content">
    <div class="suspend" id="stop">
        暂停按摩
    </div>
    <div class="progress">
        <canvas id="canvas1"></canvas>
        <div class="progress-content">
            <p class="p1" id="left_time">00:00</p>
            <p class="p2">剩余时间</p>
        </div>
    </div>

</div>
<div class="message">
    <div class="option">
        <div class="option_left">套餐名称：</div>
        <div class="option_right">{$data.remark}</div>
    </div>
    <div class="option">
        <div class="option_left">按摩时间：</div>
        <div class="option_right">{$data.command_time}分钟</div>
    </div>
    <div class="option">
        <div class="option_left">支付金额：</div>
        <div class="option_right">￥{$data.money}</div>
    </div>
    <div class="option">
        <div class="option_left">支付时间：</div>
        <div class="option_right">{$data.pay_time}</div>
    </div>
    <div class="option">
        <div class="option_left">订单编号：</div>
        <div class="option_right" id="order_num">{$data.order_num}</div>
    </div>
</div>

<div class="footer">
    客服热线：
    <span class="text">4009600886</span>

</div>
</body>
<script src="/Public/agent/js/jquery3.2.1.min.js"></script>
<script src="/Public/dishuang/js/rem.js"></script>
<script src="/Public/test/megapix-image.js"></script>
<script src="/Public/test/megapix-image.test.js"></script>
<script>

    $order_num=$('#order_num').html();

    showTime(0);
   // startWork();
    window.function(){

        //页面加载完毕
        $num=localStorage.getItem($order_num+"_number");
       if($num==null||$num=="null"){
           $num=0;
       }
        if($num>=3&&$num!=null){
            startWork();
        }else{
            check();//检查机器是否已经启动
        }

    }
var $tt=null;
function  check() {
    $num=localStorage.getItem($order_num+"_number");
    if($num==""||$num=="null"||$num==null||$num==undefined){
        $num=0;
    }
    console.log($num);
    $tt=setInterval(function () {
        $.ajax({
            url:"{:U('pay/findOrder')}",
            data:{"order_num":$('#order_num').html()},
            type:"post",
            success:function ($res) {
                console.log($res);
                 if($res.status==1||$res.status==2){
                      //没有查询到订单，停止定时查询
                    clearInterval($tt);
                 }else {
                     //说明查找订单数据，判断订单状态机器是否已经启动
                     $data=$res.data;
                     $type=$data.type;//订单状态
                     //设备状态
                     $ins_gz=$data.ins_gz;
                     if($type==3){
                             console.log("订单已经退款");
                          localStorage.setItem($order_num,1);//关闭查询定时器
                     }
                     // else if($type==2){
                     //          console.log("订单已经完成");
                     // }
                      else if($type==1||$type==4||$type==2){
                            console.log("订单已经付款,或者兑换码启动");
                            //判断机器是否已经启动
                              if($ins_gz==1){
                                        //设备已经开始工作，启动倒计时
                                  startWork();
                                  localStorage.setItem($order_num,1);
                                  localStorage.setItem($order_num+"_number",36);
                                  localStorage.setItem($order_num,1);//关闭查询定时器
                              }else{
                                  console.log("等待设备启动");
                                  //说明设备还没有工作，查询4次，直到15秒后停止该定时器，说明这个订单已经退款
                                  $num+=3;
                                  console.log($num);
                                  localStorage.setItem($order_num+"_number",$num);
                                  if($num>=15){
                                      if($tt){
                                          clearInterval($tt);//清楚定时器
                                      }

                                      localStorage.setItem($order_num,1);//关闭查询定时器
                                      location.reload();
                                  }else{
                                      localStorage.setItem($order_num,2);//接着查询
                                  }

                              }
                     }
                 }
            },
            error:function ($err) {
                console.log($err);
            }
        });//ajax请求结束


    },3000);
    $start=localStorage.getItem($order_num);
    if($start==1&&$tt){
        clearInterval($tt);
    }

}



    //开始定时工作
    //三秒请求一次按摩椅的定时工作状态
  function  startWork() {
        if($tt){
            clearInterval($tt);
        }
        var $timer=setInterval(function () {
            $.ajax({
                url:"{:U('pay/getTime')}",
                data:{"order_num":$('#order_num').html()},
                type:"post",
                success:function ($res) {
                    $total_time=$res.data.total_time;
                    $left_time=$res.data.left_time;
                    $show_time=$res.data.time_str;
                    if($left_time<=0){
                        //清除定时器
                        clearInterval($timer);
                        $('#left_time').empty().html("00:00");
                        showTime(0);
                    }else{
                        //显示剩下时间
                        $('#left_time').empty().html($left_time);
                        $percent=$left_time/$total_time;
                        showTime($percent);
                    }
                }
            });


        },3000);
    }

  function showTime(a){

    //  alert(a);
      var c = document.getElementById("canvas1");
      var ctx = c.getContext("2d");

      var clientWidth = document.documentElement.clientWidth;;
      //根据设计图中的canvas画布的占比进行设置
      var canvasWidth = Math.floor(clientWidth * 6.187 / 16);
      c.setAttribute('width', canvasWidth + 'px');
      c.setAttribute('height', canvasWidth + 'px');


      ctx.beginPath();
      ctx.arc(canvasWidth / 2, canvasWidth / 2, canvasWidth / 2, -0.5 * Math.PI, 2 * Math.PI - 0.5 * Math.PI);
      ctx.fillStyle = "rgb(217,217,217)";
      ctx.fill();

      ctx.beginPath();
      ctx.moveTo(canvasWidth / 2, canvasWidth / 2);
      ctx.arc(canvasWidth / 2, canvasWidth / 2, canvasWidth / 2, -0.5 * Math.PI, a * 2 * Math.PI - 0.5 * Math.PI);
      ctx.closePath();
      ctx.fillStyle = "rgb(100, 193, 198)";
      ctx.fill();
      ctx.beginPath();
      ctx.arc(canvasWidth / 2, canvasWidth / 2, canvasWidth / 2 * 0.7, 0, 2 * Math.PI);
      ctx.fillStyle = "rgb(255,255,255)";
      ctx.fill();
  }

  $('#stop').click(function () {
        $.ajax({
            url:"{:U('pay/stopDisChaungChair')}",
            type:"post",
            data:{"dev_code":$('#dev_code').html(),"order_num":$('#order_num').html()},
            success:function ($res) {
                alert($res.msg);
            }
        });
  });

</script>
</html>
我的页面代码如上:

问题产生原因一:苹果机不支持canvas
引入了如下两个js文件解决苹果机不支持canvas的问题

<script src="/Public/test/megapix-image.js"></script>
<script src="/Public/test/megapix-image.test.js"></script>

下载路径：链接: https://pan.baidu.com/s/1d16iAqklwhS6ZYA1jzFL-w 提取码: cit7

问题产生原因二:小编为了偷懒引入了csdn加速jquery文件，结果苹果机无法加载外部juqery出现错误，最后小编通过在引入本地资源完美解决这个问题

一杯雪花勇闯天涯

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录