Grailsフレームワークでjqueryとajaxを使用してコンテンツ登録ページをロードしようとしています。Grailsで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>
だから、結果が、ページが二度同じ構造を繰り返し参照してください。