jQuery 表单提交后将内容加载到选项卡

Question

我想在调用表单的同一个选项卡中加载表单的操作。我有一个主页如下：

<script>
    $(function() {
        $( "#tabs" ).tabs(
        );
    }); 
</script>
<body>
<div id="tabs">
<ul>
    <li><a href="page1.php">page1</a></li>
    <li><a href="page2.php">page2</a></li>
</ul>
</div>
</body>

在 page1.php 和 page2.php 我有不同的形式。在 page1.php 例如：

<form name="form1" id="form1" action="page1.php" method="post">
/* form components */
</form>

基本上，表单会重新加载页面本身并在下面填充一个 div。我怎样才能在选项卡上提交（并刷新它）？现在通过提交表单 page1.php 获取新的 window 加载。我尝试使用我在 Whosebug 中搜索的这个片段，但没有运气

<script>
$(document).on('submit', '#form1', function() {

var data = $(this).serialize();
var actionUrl = $(this).attr('action');

$.post(actionUrl, data, function(response) {
    /* do something when form submittal completed*/   
})

return false; /* prevent browser default submit and redirect*/
});
</script>

Answer 1

通过在从选项卡加载的页面添加以下代码解决此问题

$('#formID').on('submit', function(e){
e.preventDefault();
var formSrc = $(this).attr('action');
var formMethod = $(this).attr('method');
var formData = $(this).serialize();
$.ajax({
  url: formSrc,
  type: formMethod,
  data: formData,
  success: function(data){
    //work with returned data from requested file
    $("#divID").html(data);
  }
});

});

jQuery 表单提交后将内容加载到选项卡

jQuery load content into tab after form submit

php

jquery-ui