同一个页面上有两个ajax，但是第二个ajax没有得到第一个ajax所改变的内容 - two ajax on same page, but the second one is not getting whatever the first one has changed

two ajax on same page, but the second one is not getting whatever the first one has changed

我有一个主页，view.php。在这个页面上，我有两个ajax请求到两个不同的页面。例如，我有

<script>
functionName1(someData1,someDiv1)
</script>

在view.php。它所做的是将数据和div传递给jQuery函数，该函数将请求另一个php文件(php文件1)并传递数据以创建一些HTML并在数据库中进行一些更改，然后在div中返回HTML。

然后在上面代码之后的某个地方，我有

<script>
functionName2(someData2,someDiv2)
</script>

在view.php。它可能会传递一些其他数据到另一个php文件(php文件2)，并创建HTML并在someDiv2中回显。

Ajax 1将对数据库进行更改，而Ajax 2创建的HTML应该反映这一更改。但问题是，它不会。HTML在数据库中似乎没有任何变化，但我知道它发生了变化，因为我检查了数据库。我访问php文件2并通过url传递数据，它可以创建正确的HTML。所以我不明白为什么当我把这两个ajax放在同一个页面(view。php)时它不会工作。

我尝试的一件事是在php文件2中睡几秒钟，然后它会创建正确的HTML，这将反映数据库的变化。所以我想知道如果问题是第二个ajax请求是如此接近第一个，由第一个所做的更改不是由DB保存(我自己高度怀疑这一点，但还有什么)。

在ajax调用中禁用异步可能是一种迂回的选择，但它可能适合您。

$.ajax({
  url: "test.html",
})
  .done(function() {
      $.ajax({
        url: "test2.html",
      });
  });

正如注释者StaticVoid所提到的，ajax调用是异步的。最有可能发生的情况是，functionName1启动了它的ajax调用，紧接着紧接着(very) functionName2启动了它的ajax调用。如果您希望第二次调用只在第一次调用返回后发生，则需要a)使ajax同步，或者b)将对functionName1的调用放在functionName1中ajax请求的回调中。

你有两个选择:

选项1:

var functionName1=function(){
  $.ajax({
    url: '/path/to/file',
    type: 'default GET (Other values: POST)',
    dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
    data: {param1: 'value1'},
    async:false //Set asynchronous as false
  });
}
//
var functionName2=function(){
  $.ajax({
    url: '/path/to/file',
    type: 'default GET (Other values: POST)',
    dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
    data: {param1: 'value1'},
    async:false //Set asynchronous as false
  });
}

选项2:

var functionName1=function(){
  $.ajax({
    url: '/path/to/file',
    type: 'default GET (Other values: POST)',
    dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
    data: {param1: 'value1'},
    success: function(data){
       //Call he second function
       functionName2();
    }
  });
}