Ajax任务不一致

Question

Intent: I am trying to write something to where the user will click a button on the page and see a representation of what is going on when the SQL tables are updating in the background since the process takes so long.

Problem: For some reason my button keeps sending null values to my java servlet when I click it the first time. If I reload the page and click the button again then it will work fine. But I cannot expect my users to reload the page each time they come to it obviously.

Any help is greatly appreciate!

Jquery v1.11.1 (because some of the machines here still run IE8) Java Server (Glassfish 3.1) IDE Eclipse Kepler

page.jsp

<script type="text/javascript" src="JavaScript/jquery.js"></script>
<script>
    $.ajaxSetup({
        cache : false
    });

    function updateAttdData(processNum, tablePrefix, procName) {
        $.ajax({
            url : 'TestProcRefresh',
            type : 'POST',
            async: true,
            data : 'tableprefix=' + tablePrefix + '&procname=' + procName,
            timeout : 600000,
            beforeSend : function() {
                $('#Process' + processNum + '_Image').attr("style","visibility:visible");
            },
            success : function() {
                $('#Process' + processNum + '_Div').append("...Successful").css('color', 'green');
                $('#Process' + processNum + '_Image').attr("src","images/greencheck.png");
            },
            error : function() {
                $('#Process' + processNum + '_Div').append("...ERROR").css('color', 'red');
                $('#Process' + processNum + '_Image').attr("src","images/redx.png");
            }
        });
    }

    $(document).ready(function() {
        $('#ProcTest').click(function() {
            //Disable Button for action
            $('#ProcTest').attr("disabled", true);

            //Begin Data Refresh
            updateAttdData(1, 'MTH_', 'UPDATE_1');
            updateAttdData(2, 'MTH_', 'UPDATE_2');
            updateAttdData(3, 'MTH_', 'UPDATE_3');
            updateAttdData(4, 'MTH_', 'UPDATE_4');
        });
    });
</script>
<div>
    <button type="button" id="ProcTest">Stored Proc Test</button>
</div>
<div>
    <table>
        <thead>
            <tr>
                <th>&nbsp;</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><img id="Process1_Image" src="images/loading.gif"
                    alt="Processing..." style="visibility: hidden" width="32"
                    height="32" /></td>
                <td><div id="Process1_Div">UPDATE_1</div></td>
            </tr>
            <tr>
                <td><img id="Process2_Image" src="images/loading.gif"
                    alt="Processing..." style="visibility: hidden" width="32"
                    height="32" /></td>
                <td><div id="Process2_Div">UPDATE_2</div></td>
            </tr>
            <tr>
                <td><img id="Process3_Image" src="images/loading.gif"
                    alt="Processing..." style="visibility: hidden" width="32"
                    height="32" /></td>
                <td><div id="Process3_Div">UPDATE_3</div></td>
            </tr>
            <tr>
                <td><img id="Process4_Image" src="images/loading.gif"
                    alt="Processing..." style="visibility: hidden" width="32"
                    height="32" /></td>
                <td><div id="Process4_Div">UPDATE_4</div></td>
            </tr>
        </tbody>
    </table>

TestProcRefresh.java

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //System.out.println("TestProcRefresh - Start doPost");
    System.out.println(request.getParameter("tableprefix")+" - "+request.getParameter("procname"));

The Log

The log I get back when running it like the problem states above, I get this (I starred...

Info: Test page load   
Info: null - null   
Info: null - null    
Info: MTH_ - UPDATE_1    
Info: null - null    
Info: Test page load    
Info: MTH_ - UPDATE_1
Info: MTH_ - UPDATE_2
Info: MTH_ - UPDATE_3
Info: MTH_ - UPDATE_4

If you need more information, I will update this post as needed.

EDIT So it appears as though it is only not working for IE and only for the POST type. I can use GET all day long but I want to use POST. The POST works in Chrome but 95% of my users are using IE.

Answer 1

Variables from your function that calls ajax don't exist anymore when you get to the success or error callbacks. Those are callbacks, not members of a class. Ok, so the solution is to return something to your ajax callbacks by printing it on the server side (in the page called by the ajax request), and use that. For example, if you were printing some JSon from the server side (notice the data parameter which contains what you printed on the serverside):

        success : function(data) {
            $('#Process' + data.processNum + '_Div').append("...Successful").css('color', 'green');
            $('#Process' + data.processNum + '_Image').attr("src","images/greencheck.png");
        },