尝试在 Grails 中使用 Ajax 加载数据答案

【问题标题】：Trying load data with Ajax in Grails尝试在 Grails 中使用 Ajax 加载数据
【发布时间】：2017-01-11 23:35:02
【问题描述】：

我正在尝试使用带有 Grails 框架的 jquery 和 ajax 加载内容注册页面。

但是当我加载页面时，它显示了预期的结果，但是页面的菜单以及注册事项的字段在页面内重复。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
    <script src="/Escola/js/Aplicacao/Mensagens.js" type="text/javascript"></script>
    <script type="text/javascript">
        function carregarMaterias() {
            $.ajax({
                method: "POST",
                url:"/Escola/Materia/gerenciar",
                data: {},
                success: function (data) {
                    console.log(data)
                    $("#cadastrarMaterias").html(data)
                }
            });
        }

    </script>
                         <title>Gerenciar Matérias</title>

      <h2>Gerenciar Matérias</h2>

    <div class="col-md-6  col-md-offset-3">

        <g:formRemote name="formMateria" url="[controller: 'Materia', action: 'salvarMateria']"
                      onSuccess="cadastarMaterias(data)">

            <div class="form-group">
                <label>Código da Matéria</label>
                <input required class="form-control" type="text" name="codigoMateria"/>
            </div>

            <div class="form-group">
                <label>Matéria</label>
                <input required class="form-control" type="text" name="nome"/>
            </div>


            <div class="text-left">
                <button type="submit" class="btn btn-primary btn-block">Salvar</button>
            </div>

            <script>
                $('form').submit(function () {
                    this.reset();
                })
            </script>
            <br/>

            <div id="content"></div>
        </g:formRemote>

        <div class="text-center">
            <h2>Matérias</h2>
        </div>


            <div class="table-responsive" id="cadastrarMaterias">
                <table class="table">

                    <thead>
                    <th>Código da Matéria</th>
                    <th>Nome da Matéria</th>
                    </thead>

                    <tbody>

                    <g:each in="${lista}" var="materia">
                        <tr>
                            <td>${materia.codigoMateria}</td>
                            <td>${materia.nome}</td>

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

所以查看结果，但页面重复相同的结构两次。

【问题讨论】：

标签： javascript jquery ajax grails

【解决方案1】：

这是因为在你没有显示的位中：

controller: Materia Action: salvarMateria

您正在重新渲染视图。该视图将强制执行呈现主模板的元标记，从而解决您的问题。

在 salvarMateria 操作中试试这个：

if (request.xhr) {
    render template:'page',model:model
} else {
    render view:'page',model:model
}

现在创建一个 _page.gsp，这就是你拥有 page.gsp 和 _page.gsp 的情况

在 main page.gsp 的位中，它为您的实际结果进行迭代（如果不是 ajax，即如果不是 request.xhr，则加载

因此，您的所有迭代都发生在 _page.gsp 中，并且通过 ajax 调用，以及如果非 ajax 内容随后由 g:render 模板驱动。我想你会找到example here。

【讨论】：