为啥互不执行多个ajax请求?

Posted

技术标签:

【中文标题】为啥互不执行多个ajax请求?【英文标题】:Why multiple ajax requests in each other do not execute?为什么互不执行多个ajax请求? 【发布时间】:2020-03-17 22:22:42 【问题描述】:

我内部有多个ajax函数,但只执行第一个ajax请求,我不知道为什么!我添加了一些警报字段,看看它有多远。 我为此使用 django 环境。 因此,例如,当单击 bidnow-BTN 时,应该执行此 jquery,但由于某种原因,在第一个 ajax 请求之后,页面实际上会刷新并添加类似 /?bidPrice=100001 到页面 url 的末尾。这不应该发生。

$("#bidnow-BTN").click(function () 
  var varurl = document.URL
  var itemId = varurl.split(/\//)[4]

  $.ajax(
    url: "% url 'User ID' % ",
    method: "GET",
    success: function (data) 
      var varurl = document.URL
      var itemId = varurl.split(/\//)[4]
      var username = data.username
      alert("Got here: " + username)

      $.ajax(
        url: "% url 'Bidding ID' % ",
        method: "GET",
        success: function (data) 
          alert("Does NOT reach this point")
          for (var i = 0; i < data.users.length; i++) 
            if (data.users[i].username == username) 
              var id = data.users[i].id
            
            else 

            
          


          $.ajax( // kinda checked
            url: "% url 'List Items' % ",
            method: "GET",
            success: function (data) 
              var varurl = document.URL
              var itemId = varurl.split(/\//)[4]
              for (var i = 0; i < data.items.length; i++) 
                if (itemId == data.items[i].id) 
                  var currentPrice = data.items[i].higestBid
                
                else 

                
                if (parseFloat($('#bidAmount').val()) <= currentPrice) 
                  alert("Please enter a higher amount")
                  abort()
                

                if (parseFloat($('#bidAmount').val()) > currentPrice) 

                  var post_data = 
                    'itemId': itemId,
                    'userID': id,
                    'bid': (parseFloat($('#bidAmount').val()) || 0)
                  ;

                  $.ajax( //checked
                    url: "% url 'Modify Bid' % ",
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    method: "PUT",
                    data: JSON.stringify(post_data),
                    success: function (data) 
                      $('#ItemCurrentPrice').empty()
                      $('#ItemCurrentPrice').append("£" + data.highestBid)





                      $.ajax( //checked
                        url: "% url 'Bidding ID' % ",
                        method: "GET",
                        success: function (data) 
                          for (var i = 0; i < data.users.length; i++) 
                            if (data.users[i].username == username) 
                              var id = data.users[i].id
                            
                            else 

                            
                          
                          var post_data = 
                            'itemId': itemId,
                            'userID': id,
                            'bid': (parseFloat($('#bidAmount').val()) || 0)
                          ;
                          $.ajax( //checked
                            
                              url: "% url 'List Bid' % ",
                              contentType: 'application/json; charset=utf-8',
                              dataType: 'json',
                              method: "PUT",
                              data: JSON.stringify(post_data),
                              success: function (data) 

                              
                            ) //Checked




                        
                      )  //Checked

                    
                  )  //Checked
                
              
            
          )

        
      )
    
  )
)

【问题讨论】:

How to make code wait while calling asynchronous calls like Ajax的可能重复 代码不可读和不可维护,我建议你把东西分成不同的功能 @krummens 如果他在成功回调中调用它们,为什么需要使其同步? 【参考方案1】:

尝试在你的 ajax 中添加 async: false 事件

$.ajax( 
type: "POST",
url: "file.php",
async: false,
data:  code: code ,
success: function(response) ,
error: function(xhr, ajaxOptions, thrownError)
    alert(thrownError);

);

【讨论】:

感谢您的回复。这已经解决了将数据更新到数据库的问题,但是由于某种原因,网页仍然刷新/重定向到相同的 url+/?bidPrice=100001。这我无法弄清楚为什么会发生。我怀疑这是 django 的事情。 如果可以解决问题,请尝试将异步事件添加到其他 ajax。你快到了。 我之前已经为所有这些都添加了 async false,遇到了同样的问题 @homemadesausage 你有表格吗? 所以我现在已经设法通过 click 方法的 preventDefault 对问题进行排序

以上是关于为啥互不执行多个ajax请求?的主要内容,如果未能解决你的问题,请参考以下文章

前端技术--Ajax

多个异步ajax请求指定顺序执行

详解Ajax请求——多个异步请求的执行顺序

为啥PHP收不到AJAX发出的post请求

jQuery的$.ajax方法支持同时创建多个异步ajax请求吗?而且这些ajax对象必须是并行处理的

并行执行多个 AJAX 请求,并在所有请求完成后运行一个函数