两个ajax在同一页面上，但第二个没有得到第一个改变的东西

I have a main page, view.php. On this page, I have two ajax requests to two different pages. For example, I have

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

in the view.php. What it does is pass the data and div into a jQuery function, which would request another php file (php file 1) and pass in the data to create some HTML and MAKE SOME CHANGE IN THE DATABASE, and then echo out the HTML in the div.

Then somewhere after the above code, I have

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

in the view.php. It may pass some other data to another php file (php file 2) and create HTML and echo out in someDiv2.

Ajax 1 would make changes in the database and the HTML created by ajax 2 should reflect this change. But the problem is, it won't. The HTML seems like nothing has been changed in the database, but I know it's changed because I check the DB. I visit php file 2 and pass in the data by url, it can create the right HTML. So I don't understand why it won't work when I put those two ajax in the same page (view.php).

One thing I tried is to sleep for a couple of seconds in php file 2, and then it would create the right HTML which would reflect the database changes. So I'm wondering if the problem is the second ajax request is so close to the first one that the changes made by the first one is not saved by the DB (I myself highly doubt this, but what else).

As the commenter StaticVoid mentions, ajax calls are asynchronous. What is most likely happening is that functionName1 is firing off its ajax call, followed very (very) shortly by functionName2 firing off its ajax call. If you want the second call to happen only after the first one has returned, you will need to either a) make ajax synchronous, or b) put the call to functionName2 inside the callback of the ajax request in functionName1.

Something like this would be a bit of a roundabout alternative of disabling async in your ajax calls but it might work for you.

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

you have two options:

OPTION 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
  });
}

OPTION 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();
    }
  });
}