Laravel PHP 脚本与对话框绑定

Question

我是 Web 开发和 Laravel 的新手。我正在创建一个本地 Web 应用程序，它将在一台使用 Windows 的电脑上运行。我有一个脚本，可以从相机设备读取数据。此脚本在用户按下按钮时启动。此按钮打开一个对话框并创建一个 ajax 调用以从 php 脚本中获取数据。

我在这里需要的是在对话框中创建一个取消按钮，该按钮将终止对 php 脚本的调用。

到目前为止发生了什么？ 我从取消按钮二创建了一个 ajax 调用。但是这个叫做 PHP 的脚本永远不会执行，直到我手动关闭另一个脚本（关闭我的相机）。

我准备改变设计理念。我现在卡住了，没有足够的经验来决定该怎么做。

这是目前为止的脚本：

  <script>
    var updateBtn = document.getElementById("update");
    var favDialog = document.getElementById("favDialog");
    var cancelBtn = document.getElementById("cancel");
    updateBtn.addEventListener("click", function onOpen() {
      favDialog.showModal();
      $.ajax({
        type: 'GET',
        url: '/getBar',
        data: '_token = <?php echo csrf_token() ?>',
        success: function(data) {
          window.location.assign("/view?qr=" + data);
        }
      });
    });

    cancelBtn.addEventListener("click", function onOpen() {      
      $.ajax({
        type: 'GET',
        url: '/closeApp',
        data: '_token = <?php echo csrf_token() ?>',
        success: function() {}
      });
    });
  </script>

编辑：ajax 调用 abort() 确实有效。

Answer 1

我认为您正在寻找的是 abort()，假设您使用的是 jQuery 3.x。

大多数 jQuery Ajax 方法返回一个 XMLHttpRequest（或等效的）对象。

查看文档：

• abort。如果请求已经发送，该方法将中止请求

  <script>
    var updateBtn = document.getElementById("update");
    var favDialog = document.getElementById("favDialog");
    var cancelBtn = document.getElementById("cancel");
  
    var request = null;
    updateBtn.addEventListener("click", function onOpen() {
      favDialog.showModal();
      request = $.ajax({
        type: 'GET',
        url: '/getBar',
        data: '_token = <?php echo csrf_token() ?>',
        success: function(data) {
          window.location.assign("/view?qr=" + data);
        }
      });
    });
  
    cancelBtn.addEventListener("click", function onOpen() {
      if (request != null) {
        request.abort();
      }
    });
  </script>