jQuery ui選項卡表單提交

Question

我正在使用標簽瀏覽我的Web應用程序。 每個選項卡上都有一個單獨的文件，該文件包含用於接收用戶輸入並根據輸入顯示數據表的表格。

我想問一下如何在相同選項卡中顯示結果表，並使輸入表單准備好再次接收差異輸入。

這是我的代碼

<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 ，但我希望它僅在輸入表單下方顯示結果。

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

Answer 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屬性。