使用 AJAX 定期将数据重新发布到 Laravel 后端时出现问题

Question

我正在做一个 PHP Laravel 项目，当用户点击网站上的按钮时，我使用 AJAX 到 PHP 后端执行一些后台任务当用户通过 his/her phone 付款时，我会触发对支付网关的调用，我会检查付款状态（其中 1 表示已付款，0 表示未付款），如果状态等于1，我将用户重定向到成功页面。

目前正在使用 AJAX 到 post 从前端到后端的数据，我想在 5 秒后定期 post 数据（我给用户一些时间来在联系 API 以查看状态是否已更改为 1 然后重定向用户之前付款。

我正在尝试在 JavaScript 和 dd() 中使用来自控制器的数据的 setTimeout 方法，它只转储数据一次但在 5 秒后不转储

AJAX代码到post5秒后数据到后端

  $('.mpesa').on('click', function () {
      // run the first time; all subsequent calls will take care of themselves
      setTimeout(executeQuery, 5000);
    });

    function executeQuery() {
      alert('clicked');
        //Adds Class to the page when it loads
        $('.PAY').addClass("loading");
        //Gets the MPESA type
        var type = $('.mpesa').prop('id');
        var quote = $('#quote').val();
        var phone = $('#phone').val();
        //Converts to a JSON object
        var type ={
          'type': type,
          'quote' : quote,
          'phone' : phone,
        };

        console.log(type);

        $.ajax({
            //Contains controller of payment
            type: 'POST',
            url: 'paymentFinal',
            data: JSON.stringify(type),
            contentType: 'application/json',
            dataType: "json",
            success: function success(response) {
                console.log(response);
            },
            error: function error(data) {
                console.log(data);
            }
        });
    }
    //End AJAX call

正在调用控制器文件

 public
    function payFinal(Request $request)
    {
        dd($request->all());

    }

已更新 AJAX 代码

$('.mpesa').on('click', function () {
    setInterval(function() {
       alert('clicked');
      //Gets the MPESA type
       var type = $('.mpesa').prop('id');
      var quote = $('#quote').val();
      var phone = $('#phone').val();
      //Converts to a JSON object
      var type ={
        'type': type,
        'quote' : quote,
        'phone' : phone,
      };

    console.log(type);
    $.ajax({
        //Contains controller of payment
        type: 'POST',
        url: 'paymentFinal',
        data: JSON.stringify(type),
        contentType: 'application/json',
        dataType: "json",
        success: function success(response) {
          if(response) {
              window.location.href="success";
          }
        },
        error: function error(data) {
            console.log(data);
        }
    });
}, 15000); // Execute every 15 seconds
});

Answer 1

setTimeout 在您设置的延迟后只执行一次指定的函数。请改用 setInterval，以便定期调用您的函数。

=========================================== ============================

更新：您希望您的函数在用户单击时立即执行，然后每 15 秒调用一次。为此，您只需使用以下代码：

$('.mpesa').on('click', executeQuery);

function executeQuery() {
  alert('clicked');
    //Adds Class to the page when it loads
    $('.PAY').addClass("loading");
    //Gets the MPESA type
    var type = $('.mpesa').prop('id');
    var quote = $('#quote').val();
    var phone = $('#phone').val();
    //Converts to a JSON object
    var type ={
      'type': type,
      'quote' : quote,
      'phone' : phone,
    };

    console.log(type);

    $.ajax({
        //Contains controller of payment
        type: 'POST',
        url: 'paymentFinal',
        data: JSON.stringify(type),
        contentType: 'application/json',
        dataType: "json",
        success: function success(response) {
            console.log(response);
        },
        error: function error(data) {
            console.log(data);
        }
    });

    //use setTimeout here
    setTimeout(executeQuery, 15000);

}

在你的函数中使用 setTimeout 来调用自身可以解决你的问题。

=========================================== ============================

[回答 OP 关于如何停止计时器的问题]

在你的函数中，假设你希望函数在执行 5 次后停止。

在函数外设置一个变量：

var counter = 0;

然后在executeQuery:

if (counter <= 5) { //or use your own logic
    counter++;
    setTimeout(executeQuery, 15000);
}

请记住 setTimeout 是一次性的，因此您可以控制何时停止调用它。

使用 AJAX 定期将数据重新发布到 Laravel 后端时出现问题

Problem reposting data periodically using AJAX to Laravel backend

php

ajax

settimeout