Jquery刷新页面并加载表格

Question

我的 Jquery 遇到一些问题。所以，问题是每当我提交表单并获取结果表时。我的页面刷新后无法在 Jquery 对话框中加载结果。这是我的代码

<script>
    $(function () {
      $("#dialog").dialog({
        autoOpen: false,
        height: 600,
        width: 1000,
        show: "blind",
        hide: ""
      });

      $("#opener").click(function () {
        $("#dialog").dialog("open");
        return true;
      });
    });
</script>

对于我的 html:

<form id="searchtable" >

              <label>Search by Username :</label><input type ="text" name="searchid" style="border: 1px solid black">

                <input  type ="submit" name ="search" id="opener">
                <br>
                <%-- search table --%>
                  Results:
                  <div id="dialog" title="Search Result">
                  <table border ="1" id="normal">
                  <tbody>
                          <tr>
                              <th>ID</th>
                              <th>Username</th>


                          </tr>
                  </tbody>

                  <g:each in = "${example}">
                          <tr>
                              <td>${it.ID}</td>
                              <td>${it.username}</td>

                         </tr>
                  </g:each>
                  </table>
                  </div>

              <%--List Table--%>
               <table border ="1" id="normal">
               <tbody>
                      <tr>
                          <th>ID</th>
                          <th>Username</th>

                      </tr>
                </tbody>
              <g:each in = "${result}">
                        <tr>

                          <td>${it.ID}</td>
                          <td>${it.username}</td>

                        </tr>
              </g:each>
            </table>
    </form>

所以在提交值之后，我需要在 Controller 中处理这些值并将其传递回html以将其显示出来。但它只是刷新并无法加载。那么有人知道该怎么办吗？我只需要在表单提交 -> 刷新 -> 出现结果对话框后加载它。非常感谢大家

Answer 1

使用 jQuery 的 load() 函数，您可以向目标 Controller 发送请求并让它呈现 HTML 响应(对话框的内容)，响应成功后该响应将被加载到 #dialog 元素中。

<script>
    $(function () {
      $("#dialog").dialog({
        autoOpen: false,
        height: 600,
        width: 1000,
        show: "blind",
        hide: ""
      });

      $('#searchtable').submit( function () {
        var searchId = $('input[name="searchid"]').val();
        $('#dialog').load('/url/to/controller', { "searchid": searchId }, function () {
          $(this).dialog('open');
        });
        return false;
      });
    });
</script>