Jquery UI 选项卡和 spring mvc

Question

我现在对 javascript 不太了解，但在网上发现了 jquery ui 选项卡并想尝试一下。

然而，当我在一个选项卡中有一个将信息发送到后端的表单时，它们是开箱即用的。响应（从 spring mvc 控制器发送回）无法返回到同一位置。结果是进入没有选项卡的页面，或者将其自身定位在选项卡内容的末尾。

有什么我需要做的吗？

$(function() {
    $( "#tabs" ).tabs({
        ajaxOptions: {
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html(
                    "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                    "If this wouldn't be a demo." );
            }
        }

    });
});
<ul>
     <li><a href="/home/"><span>Home</span></a></li>
     <li><a href="/admin/"><span>Admin</span></a></li>
     <li><a href="/support/"><span>Support</span></a></li>
 </ul>

Answer 1

您确定使用 ajax 在选项卡中发送表单吗？如果您不使用ajax而只是发送表单，则浏览器将返回的页面替换当前页面是正常的。您需要 ajax 将更新的内容放置在当前选项卡中。

你必须以这种方式发送表单（例如使用 jquery，我还没有测试过它，抱歉，如果有任何拼写错误）：

<form id="my_form">
     ....
</form>

<div id="response_container">
    here I want to see the response
</div>

以及发送和接收响应的 javascript：

//catch the submit event in the form
$("#my_form").submit(function(){
   //when the form is going to be submitted it is sent as an ajax request
   //so the answer can be placed in the current page
   $.ajax({
       type: "POST",
       url: $("#my_form").attr('action'),
       data: $("#my_form").serializeArray(),
       dataType: 'html',
       success: function(msg){
            //place the returned html response whenever you want
            $("#response_container").html(msg);
        }
   });

   //return false to avoid the default submit() behaiour can take place
   return false;
});