jQuery ui 选项卡表单提交答案

【问题标题】：jQuery ui tabs form submitjQuery ui 选项卡表单提交
【发布时间】：2013-08-29 09:22:10
【问题描述】：

我正在使用标签来导航我的网络应用程序。每个选项卡上都有单独的文件，其中包含用于接收用户输入并根据输入显示数据表的表单。

我想问如何在相同的选项卡中显示结果表并让我的输入表单准备好再次接收差异输入。

这是我的代码

<div id="tabs">
      <ul>
            <li><a href="t1.htm">Tab 1</a></li>
            <li><a href="t2.htm">Tab 2</a></li>
            <li><a href="t3.htm">Tab 3</a></li>
      </ul>
</div>

我的 t1.htm 示例

<form action="table.htm" method="POST">
       First Name: <input type="text" name="first_name">
       <br />
       Last Name: <input type="text" name="last_name" />
       <input type="submit" value="Submit" />
</form>

table.htm 将根据firstname 和lastname 的输入创建动态表。但是，现在当我提交表单时，它会立即打开table.htm，但我希望它只在输入表单下方显示结果。

【问题讨论】：

你的代码是纯粹的客户端还是你在服务器端使用java或servlet？
@GopakumarNG 在编辑时，您还可以删除称呼和感谢（无论如何，当您支持/接受答案时暗示），请仅对代码（或文件名）使用反引号，而不是关键字或技术名称
我的朋友会为我提供从数据库中查询数据的服务，但我必须使 jquery 选项卡中的内容能够调用该服务并使用返回的结果在同一选项卡中构建动态表跨度>

标签： javascript jquery html jquery-ui jsp

【解决方案1】：

如果我正确理解了问题（阅读两遍）

您可以简单地使用 jquery 发送 ajax 请求，您的表单已准备好进行下一次输入。

表单包含字段

<form id="myform">
...
<button id="sub">Submit</button>
</form>

下面的 div 将包含 ajax-request 响应，在您的情况下主要是一个表格。

<div id="resultContainer"></div>

这是通过 ajax 将表单提交到某个 url 的脚本

<script>
$("#sub").click(function(){
        $.ajax({
            type: "POST",
            url: "myjsp.jsp",
            data: $("#myform").serialize(),
            complete: function(xhr, textStatus) {
                $("#resultContainer").html(xhr.responseText);
            }
        });
    });
</script>

【讨论】：

【解决方案2】：

您想按照以下方式做某事：

<script type="text/javascript">
    $('form:eq(0)').submit(function(e){
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "table.htm",
            data: $(this).serialize(),
            dataType: 'text/html',
            success: function(response) {
                $(this).after(response);
            }
        });
        return false;
    });
</script>

你需要给表单一个id属性。

【讨论】：