如何在循环中使用 ajax 发送单个请求答案

【问题标题】：How to Send Single request using ajax inside a loop如何在循环中使用 ajax 发送单个请求
【发布时间】：2019-09-07 07:47:22
【问题描述】：

我创建了一个简单的邮件程序，用于将我们的更新发送到客户电子邮件中，但是我怎样才能一个一个地发送数据并在服务器端处理每个数据

html:


<p class="response"></p>

<form id="send_updates">
    {% csrf_token %}
    <textarea name="mail-list" class="mails" id="mails"></textarea>
    <button type="submit"> start sends </button>
</form>

javascript：

let mails = $('#mails').val().split('\n');
for(let i = 0; i <= cc.length; i++){
    $.ajax({
        cache: false,
        type: 'post',
        url: "{% url 'send_mail' %}",
        data: {'email': mails[i]},
        async: true,
        beforeSend:function(xhr, settings){
            xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
        };
        success: function(data){
            if (data.success) == true{
                $('.response').append(mails[i] + ' sent!')
            }else{
                $('.response').append(mails[i] + ' not sent!')
            };
        }
    });

但是！它发送所有请求而不等待它是否成功

编辑：

我们希望一一监控该电子邮件是否发送成功！

【问题讨论】：

这很有意义，因为$.ajax(..) 确实只是简单地发送请求，success: ... 是在请求成功后完成的回调。这里绝对有可能附加值的顺序与您提交的顺序不同。
寻找像顺序 ajax 这样的 sn-ps，或者最好有一个主邮件程序，您可以在其中发送所有数据，然后 BE 循环和处理，这样您将有一个单一的 http 请求，也可以节省带宽客户端服务器之间来回通信

标签： javascript python django ajax

【解决方案1】：

尝试设置

    async: false,

如下图：

    let mails = $('#mails').val().split('\n');
    for(let i = 0; i <= cc.length; i++){
    $.ajax({
      cache: false,
      type: 'post',
      url: "{% url 'send_mail' %}",
      data: {'email': mails[i]},
      async: false,
      beforeSend:function(xhr, settings){
        xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
      };
      success: function(data){
        if (data.success) == true{
            $('.response').append(mails[i] + ' sent!')
        }else{
            $('.response').append(mails[i] + ' not sent!')
        };
      }
     });

参考What does "async: false" do in jQuery.ajax()?

【讨论】：

我认为这没问题，但它首先处理所有请求然后返回一次！
我想要的是当电子邮件正在后端处理时，它显示在客户端然后显示结果是否成功

【解决方案2】：

您可以使用 async/await 。

function getData(ajaxurl , mail) { 
        return $.ajax({
            cache: false,
            type: 'post',
            url: "{% url 'send_mail' %}" /*instead `ajaxurl`*/,
            data: {'email': mail},
            beforeSend:function(xhr, settings){
                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
            },
            success: function(data){
                if (data.success == true){
                    $('.response').append(mails[i] + ' sent!');
                }else{
                    $('.response').append(mails[i] + ' not sent!')
                }
            }
        });
    };

    async function test(mail){
        try {
            const res = await getData('https://api.icndb.com/jokes/random' , mail);
            console.log(res);
        } catch(err) {
            console.log(err);
        }
    }



    var mails = $('#mails').val().split('\n');
    for(let i = 0; i <= cc.length; i++){
        var mail = mails[i];
        test(mail);
    }

试试这个方法。这里 test() 函数是异步的，并且每次都会等待 getData() 函数完成。通过这个，你将实现你的目标。

【讨论】：

【解决方案3】：

如果您需要更新 UI：

function fetchNextMail(mails) {
  const nextMail = mails.shift();
  $.ajax({
    type: "get",
    url:
      "https://jsonplaceholder.typicode.com/todos/1"
  }).then(res => {
    console.log(Object.keys(res));
    console.log(mails.length);
    mails.length && fetchNextMail(mails);
  });
}

fetchNextMail(["x", "y", "z"]);

如果您可以等待他们全部完成更新 UI，您可以使用Promise.all：

Promise.all(
  ["x", "y", "z"].map(mail => {
    return $.ajax({
      type: "get",
      url: "https://jsonplaceholder.typicode.com/todos/1"
    });
  })
).then(results => {
  // results[0], results[1] and results[2]
  console.log(results.length);
});

可以在此处找到一个工作示例：https://codesandbox.io/s/jquery-playground-i2vb4

【讨论】：