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>

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

Answer 1

使用 jQuery 的 load() 函数，您可以向预期的控制器发送请求并让它呈现一个 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>

Answer 2

你需要这样的东西：

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

    $("#searchtable").on('submit', function() {
        alert("submit handler has fired");
        $.ajax({
            url: ...,
            data: $(this).serialize(),
            type: ...,
            success: function(html){
                //do something with the `html` returned from the server here
                alert(html);
                $("#dialog").dialog("open");
            },
            error: function(jqXHR, textStatus, errorThrown){
                alert('error: ' + textStatus + ': ' + errorThrown);
            }
        });
        return false;//suppress natural form submission
    });
});

参考jQuery的$.ajax() documentation，你将不得不填补空白。