Submit form, then send form data to ajax from a ne

2019-08-29 23:45发布

问题:

I have a form on page1.php which redirects to page2.php, I want to pass the data from the form to page3.php immediately on load of page2.php. (the user doesn't need to see what's going on in page3, only page2)

What should I use to pass the variables? Currently I'm using

page1.php

    <html>
            <form action=page2.php method=post>
                    <!-- form content here incl name attr for input elements -->
            </form>
    </html>

page2.php

    <body>
    <?php
            $var1 = $_POST['name1']; // int   
            $var2 = $_POST['name2']; // int   
            $var3 = $_POST['name3']; // int 
            $var4 = $_POST['name4']; // str
    ?>
    <!-- some code here -->
    <script>
            var var1 = <?php echo $var1; ?>;        
            var var2 = <?php echo $var2; ?>;        
            var var3 = <?php echo $var3; ?>;        
            var var4 = "<?php echo $var4; ?>";        
            $.post('page3.php',{var1: var1, var2: var2, var3: var3, var4: var4});         
    </script>
    </body>

page3.php

    <?php        
            $var1 = $_POST['var1'];
            $var2 = $_POST['var2'];
            $var3 = $_POST['var3'];
            $var4 = $_POST['var4'];
    ?>

a. This seems like way too much to me, are there any jquery shortcuts? How can I use serialize to help me? b. this isn't working entirely... I think there's some problem with the $.post, maybe I'm not triggering it well? I am not sure.

Help would be appreciated.

回答1:

By doing this way your completely defeating the first A of ajax, asynchronous. What you should do is add the ajax call to the submit event of the form on your first page.

<form action="action.php" method="GET" id="form">
    <input name="var1" />
    <input name="var2" />
    <input name="var3" />
    <input name="var4" />

    <input type="submit" />
</form>

<script>
$('#form').submit(function() {
    $.post('action.php', {
        var1: $('input[name="var1"]').val(),
        var2: $('input[name="var2"]').val(),
        var3: $('input[name="var3"]').val(),
        var4: $('input[name="var4"]').val()
    });        

    return false; //Prevent form from actually submitting
});
</script>

This way if the user has javascript, the form is submitted asynchronously (not requiring a new page to be loaded) by jQuery. But if the user doesn't have javascript, the form is submitted normally.


To ensure that your page3.php (what I called action.php) continues to execute even after the user navigates away you should look into ignore_user_abort() and set_time_limit().

//At the top of page3.php
ignore_user_abort(true);  //Allow user to navigate away
set_time_limit(0);        //Allow script to run indefinitely

And as I suggested above, you should still submit the form with AJAX like I did. The two PHP functions I mentioned above will eliminate the need for the intermediary script, page2.php. Like so:

page1.php

<form action="" method="get" id="form">
    <input name="var1" />
    <input name="var2" />
    <input name="var3" />
    <input name="var4" />

    <input type="submit" />
</form>

<script>
$('#form').submit(function() {
    $.post('page3.php', {
        var1: $('input[name="var1"]').val(),
        var2: $('input[name="var2"]').val(),
        var3: $('input[name="var3"]').val(),
        var4: $('input[name="var4"]').val()
    });        

    return false; //Prevent form from actually submitting
});
</script>

The user can now fill out page1.php and hit the submit button. jQuery will intercept the form submit and send the data via AJAX to page3.php.

page3.php

ignore_user_abort(true);  //Allow user to navigate away
set_time_limit(0);        //Allow script to run indefinitely

//Rest of processing code...

page3.php will receive the AJAX request and begin to do its work. When the user navigates away from page1.php the AJAX request will be canceled (and the connection to the request for page3.php will be lost), but page3.php will continue to run.