提交表单,然后将表单数据从新页面发送到ajax

时间:2012-01-08 06:41:54

标签: php jquery ajax forms

我在page1.php上有一个表单重定向到page2.php,我希望在加载page2.php时立即将表单中的数据传递给page3.php。 (用户不需要查看第3页中的内容,只需要查看第2页)

我应该使用什么来传递变量?目前我正在使用

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'];
    ?>

一个。这对我来说似乎太过分了,有没有jquery快捷方式?我如何使用序列化来帮助我? 湾这完全不起作用......我认为$ .post存在一些问题,也许我没有触发它?我不确定。

帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

通过这种方式你完全击败ajax的第一个A,异步。你应该做的是在你的第一页上将ajax调用添加到表单的submit事件中。

<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>

这样,如果用户有javascript,则表单是由jQuery异步提交的(不需要加载新页面)。但是如果用户没有javascript,表单会正常提交。


为确保您的page3.php(我称之为action.php)即使在用户导航后仍继续执行,您应该查看ignore_user_abort()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

正如我上面提到的那样,你仍然应该像我一样用AJAX提交表单。我上面提到的两个PHP函数将不再需要中间脚本page2.php。像这样:

<强> 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>

用户现在可以填写page1.php并点击提交按钮。 jQuery将截取表单提交并通过AJAX将数据发送到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将收到AJAX请求并开始工作。当用户离开page1.php时,AJAX请求将被取消(并且与page3.php请求的连接将丢失),但page3.php将继续运行。