jQuery AJAX调用失败，直到刷新

Question

So I've asked a similar question here before and got an answer that worked, however, after progressing in my beginner project and introduction to ajax, I've come across another problem. It seems that the AJAX call isn't successful..until after the page is reloaded. I noticed this issue prior to adding more text fields to my form, but I can't imagine how that could be related. A later query is reliant on whether the form is successfully submitted, but I don't want to make the user refresh the page just for that data to actually be pushed through to the database. Any suggestions?

    <form action="call.php" method="post">
    <input class="oomText" type="text" name="accountName" placeholder="Account Name"><br>
    <h2 class="oomHead2">Email Notifcations For Phone Calls</h2>
    <input class="oomText" type="text" name="accountEmailOne" placeholder="Email Recipient 1*"><br>
    <input class="oomText" type="text" name="accountEmailTwo" placeholder="Email Recipient 2*"><br>
    <input class="oomText" type="text" name="accountEmailThree" placeholder="Email Recipient 3*"><br>
    <h2 class="oomHead2">Text Notifcations For Phone Calls</h2>
    <input class="oomText" type="text" name="accountTextOne" placeholder="Text Recipient 1*"><br>
    <input class="oomText" type="text" name="accountTextTwo" placeholder="Text Recipient 2*"><br>
    <input class="oomText" type="text" name="accountTextThree" placeholder="Text Recipient 3*"><br>
    <small>*Fields are <b>not</b> required to be filled out</small><br>
    <input class="oomButton submit" type="submit" name="submit" value="submit">
    <script>
        $(document).ready(function(){
            $('.oomButton.submit').click(function(){
                var clickBtnValue = $(this).val();
                var ajaxurl = 'http://clients.oomdo.com/provision/ajax.php',
                data =  {'action': clickBtnValue};
                $.post(ajaxurl, data, function (response) {
                 alert("Account Created");
                });
            });
        });
    </script>
    </form>

..Later on in the php file

  if ($_SESSION['submitted'] == true){
   // do something
    }

ajax.php

    <?php
        session_start();
        if (isset($_POST['action'])) {
            switch ($_POST['action']) {
                case 'submit':
                    submit();
                    echo 'Hurrah';
            }
        }

        function submit() {
            $_SESSION['submitted'] = true;
        }

    ?>

Answer 1

I think you've forgotten that AJAX is asynchronous, meaning what happens in there doesn't happen until later.

So, in your example, you've done the AJAX call, THEN checked your session, THEN the call finished its function (taking longer because of the higher amount of data sent). That's why it sees the new value after the refresh.

You have 3 options here:

1. Include the //do something statement into your success function.

Code sample:

$.post(ajaxurl, data, function (response) {
    alert("Account Created");

    if ($_SESSION['submitted'] == true){
        // do something
    }
});

2. Create a function and call that at the end of your success function.

Code sample:

function sessionCheck(){
    if ($_SESSION['submitted'] == true){
        // do something
    }
}

....

$.post(ajaxurl, data, function (response) {
    alert("Account Created");

    sessionCheck();
});

3. Give your $(document) an .ajaxsuccess(function) . This will trigger, each time you have an ajax call completed. Do note that multiple instances of this may overwrite them In that case, you'll have to add an identifying session variable to each .php output.

Code Sample

$(document).ajaxSuccess(function() {

    if ($_SESSION['submitted'] == true){
        //    do something
        //then find a way to remove $_SESSION['submitted']
        //        maybe using AJAX as well.
    }

    //else if ($_SESSION['somethingElse'] == true)
});