1

我正在使用 jquery 更改 main.php 文件中的 div 内容而不刷新页面，但这里的问题是加载的新 div 包含一个表单，在表单操作中我希望将表单提交到同一页面(div) ，但被重定向到我不想要的 main.php。我必须对操作进行哪些更改才能保持在具有相同 div 的同一页面上。

这是我用来动态更改 div 的代码。

主.php：

<li id="nav-home"><a class="button" href="main.php">Home</a></li>
<li id="nav-page1"><a class="button" href="page1.php">Page1</a></li>    
<li id="nav-page2"><a class="button" href="page2.php">Page2</a></li>
<li id="nav-page3"><a class="button" href="page3.php">Page3</a></li>

<script>
    $(function(){
        $('.button').on('click', function(e){
            e.preventDefault();
            $('#content').load($(this).attr('href'));
        });
    })
</script>

示例：当我单击 main.php 中的 Page1 时，div 内容被 page1 替换，在 page1 中我有一个表单，当我提交表单时，我想留在同一页面中。

这是处理 page1 中的表单的代码：

<form name="form" id="form" method="POST" action=""> //my form elements </form>

    <script type="text/javascript">
        $(document).ready(function(){
            $("#form").validate({
                debug: false,
                rules: {

                    //rules
                },
                messages: {

                    //messages
                },
                submitHandler: function(form) {
                    // do other stuff for a valid form
                    $.post('scripts/formhandler.php', $("#form").serialize(), function(data) {
                        $('#results').html(data);
                    });
                }
            });
    });
    </script>
4

2 回答 2

0

您可以使用 form.submit 函数，并使用 ajax 在其中处理提交

$('#form_id').submit(function() 
{
     e.preventDefault(); // Prevent the default form action 

     /*now add ajax code here to do form submit*/
});

当然，如果您在页面加载后加载表单，则需要使用 jquery.live 或 jquery.on 函数来设置表单处理程序，而不是上面的代码。例子：

$('#form_id').on('submit', function()
{
    // Code in here
});

您可以从 jquery 站点了解更多关于 .live 和 .on 的信息

于 2012-09-09T09:42:19.643 回答
0

您似乎正在使用 validate 插件，并且您可以使用ajaxSubmit基本上用 preventDefault 包装提交调用的方法，处理所有表单序列化等。

http://docs.jquery.com/Plugins/Validation/validate

IE

submitHandler: function(form) {
  $(form).ajaxSubmit();
}
于 2012-09-09T10:02:46.630 回答