如何在特定时间后发送 Ajax 请求

Question

如何在特定时间和特定事件中发送 Ajax 请求

我是用户时间间隔，但它不起作用。

我想在请求 1 中获取数据以在请求 2 中使用，但它在请求 2 中获取空数据

setInterval()

它不适合我。

我想在请求 1 的一段时间后发送请求 2

请求 1：-

$(document).on("change", ".supplyItem", function (event) {

        var id = $(this).attr("data-id");
        var supplyItem = $(".supplyItem[data-id=" + id + "]").val();
        var hospital = $("#hospital").val();
        var physician = $("#physician").val();
        var category = $("#category").val();
        var manufacturer = $("#manufacturer").val();
        var project = $("#project").val();

        if (hospital != "" && physician != "" && category != "" && manufacturer != "" && project != "") {
            $.ajax({
                url: "{{ URL::to('admin/repcasetracker/getitemfile')}}",
                data: {
                    supplyItem: supplyItem,
                    hospital: hospital,
                    project: project,
                },

                success: function (data) {

                    console.log(id);
                    if (data.status) {
                        var html_data = '';
                        var item = data.value;
                        console.log(item);


                        $('.hospitalPart[data-id=' + id + ']').val(item.hospitalNumber);
                        $('.mfgPartNumber[data-id=' + id + ']').val(item.mfgPartNumber);

                        // $('.mfgPartNumber[data-id='+id+']').text('something');
                    } else {
                        $('.hospitalPart[data-id=' + id + ']').val('');
                        $('.mfgPartNumber[data-id=' + id + ']').val('');

                    }

                    $('.quantity[data-id=' + id + ']').val('');
                    $('.purchaseType[data-id=' + id + ']').val('');
                    $('#serial-text' + id).val('');
                    $('#serial-drop' + id).val('');

                    $('#serial-drop' + id).empty();


                }

            });
        }

    });

请求 2：-

 $(document).on('change', '.supplyItem', function (event) {
        var timer, delay = 2000;
        var id = $(this).attr("data-id");
        var client = $("#hospital").val();

        timer = setInterval(function(){

            var supplyItem = $(".supplyItem[data-id=" + id + "]").val();
            var hospitalPart = $(".hospitalPart[data-id=" + id + "]").val();
            var mfgPartNumber = $(".mfgPartNumber[data-id=" + id + "]").val();
            alert(supplyItem);
            alert(hospitalPart);
            alert(mfgPartNumber);

            $.ajax({
                url: "{{ URL::to('admin/repcasetracker/getdevicedata')}}",
                data: {
                    supplyItem: supplyItem,
                    hospitalPart: hospitalPart,
                    mfgPartNumber: mfgPartNumber,
                    client: client,

                },

                success: function (data) {

                    if (data.status) {
                        var html_data = '';

                        var check = data.value;

                        if (check == 'True') {
                            html_data += "<option value=''>Purchase Type</option><option value='Bulk'>Bulk</option><option value='Consignment'>Consignment</option>";
                            $('.purchaseType[data-id=' + id + ']').html(html_data);

                        } else {
                            html_data += "<option value=''>Purchase Type</option><option value='Consignment'>Consignment</option>";

                            $('.purchaseType[data-id=' + id + ']').html(html_data);

                        }
                    }


                }


            });
            }, delay);
        clearInterval(timer);
    });

Answer 1

您可以将 Request 2 移动到一个函数中，这段 JS 代码将在给定的时间间隔（毫秒）后调用 Request2 函数，我现在将其设置为 5 秒。

setInterval(function () { Request2(); }, 5000);

function Request2(){
console.log("Request 2 called");
//add request 2 code here
}

Answer 2

jQuery 的$.ajax method 返回一个promise，它被传递给服务器端调用的结果。您可以将这些调用链接在一起，以便构建多个 ajax 调用的结果。当您以这种方式使用它时，您将取消 success 回调，因为它们不再需要。

应用于您的代码，它可能看起来像这样：

$(document).on("change", ".supplyItem", function (event) {

        var id = $(this).attr("data-id");
        var supplyItem = $(".supplyItem[data-id=" + id + "]").val();
        var hospital = $("#hospital").val();
        var physician = $("#physician").val();
        var category = $("#category").val();
        var manufacturer = $("#manufacturer").val();
        var project = $("#project").val();

        if (hospital != "" && physician != "" && category != "" && manufacturer != "" && project != "") {
            $.ajax({
                url: "{{ URL::to('admin/repcasetracker/getitemfile')}}",
                data: {
                    supplyItem: supplyItem,
                    hospital: hospital,
                    project: project,
                })
                .then(function(data1){
                   // process result of call1 and make call2
                   var item = data1.value;
                   return $.ajax({
                      url: "{{ URL::to('admin/repcasetracker/getdevicedata')}}",
                      data: {
                        supplyItem: supplyItem,
                        hospitalPart: value.hospitalPart, // note using result from 1 directly
                        mfgPartNumber: value.mfgPartNumber,
                        client: hospital 
                     }
                   });
                })
                .then(function(data2){
                    // process result of call2
                });
        };
    });

这里的重点是，您不需要将 call1 的结果存储到某些元素中并在进行 call2 之前重新读取它们，并且在进行 call2 之前尝试等待足够的时间。您只需将其与then 链接在一起即可。

Answer 3

首先好吧：与其使用 setInterval 然后在它运行一次后清除间隔，为什么不直接使用

setTimeout(function, delay);

然后我个人更喜欢使用 XMLHttpRequest 而不是 Jquery AJAX，无论如何，Jquery 在其基础上使用 XMLHttpRequest，我只是更喜欢它，所以我不必使用 Jquery，但如果您已经在您的网站中使用 Jquery，那么它应该不再使用重的。这是 XMLHttpRequest 的一个简单示例，因此您可以根据需要使用它。

var xhr = new XMLHttpRequest();
  xhr.open("POST", 'URL::to("admin/repcasetracker/getdevicedata")', true);
  xhr.setRequestHeader("Content-Type", "application/json charset=utf8");
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      // content is loaded...
      if (xhr.responseText) {
        //Some code to run after the server responds and it was successfull
      }
    }
  };
  xhr.send(JSON.stringify({test:'test'})); //This is the data you are handing to the server

注意 xhr.responseText 的使用，JQuery 使用相同的变量，这通常是来自服务器的响应。一种确定的方法是使用浏览器的调试引擎（Chrome 和 Firefox 上 F12，其他浏览器上不知道）检查变量，很容易确定要使用的正确变量。

然后最后一个想法：我看到您在将数据发送到服务器时没有声明内容类型而不是 JSON.stringify'ing()。

调试此类情况的最佳方法是“消除过程”，因此请确定服务器是否正在接收数据，然后检查服务器是否正确处理数据，然后检查服务器是否正确发送数据。 如果您使用 Nginx，请使用 /var/log/nginx/error.log 来查看它是否抛出任何错误（提示：tail -f /var/log/nginx/error.log | Apache 使用 /var/log/http/ error.log 在大多数发行版上），如果您使用的是 .NET，只需在 Visual Studio 中调试它。

阅读 Jquery 成功事件后，还有 2 个参数被传递 - String textStatus 和 jqXHR jqXHR http://api.jquery.com/jquery.ajax/

总结一下： 确保声明 dataType: 'json'

使用正确的变量，应该是responseText

在传递服务器数据并使用“json”时，请确保使用 JSON.stringify()

我不太明白你为什么要首先使用 setTimeout。 如果您只是在等待服务器响应，那么使用任何类型的延迟都是一个糟糕的主意，而是使用服务器响应后触发的事件。

所以在 Jquery 中成功：function() {} 和错误：function() {} 在 XMLHttpRequest 它的 xhr.onreadystatechange = function () { }