Grails - Ajax 提交不起作用？答案

【问题标题】：Grails - Ajax submit not working?Grails - Ajax 提交不起作用？
【发布时间】：2016-08-16 17:41:58
【问题描述】：

我正在尝试在提交表单时更新 div，但我似乎忘记了什么。

这是我的html：

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
    <head> 
        <meta name="layout" content="main" />        
        <g:javascript library="jquery"/>
    </head>
    <body>
        <form id="formEntrada">
            <label>Evento: </label>
            <g:select from="${listaEvento}" name="evento_id" optionValue="nome" optionKey="id"  noSelection="${['':'Selecione...']}" required="true"/><br><br>                        
            <label>Participante: </label>
            <input type="text" id="codigo" onkeyup="pesquisa(event,'/eventoEntrada/pesquisar')" value="${participante?.id}" size="15px"/>&nbsp&nbsp
            <input type="text" value="${participante?.nome}" size="50px" disabled required="true">               
            <input type="submit" value="Adicionar">            
        </form>
        <div id="divList">  
            <g:render template="list"/>
        </div>
    </body>
</html>

这是我的 JavaScript

$(document).ready(function () {
    $('#formEntrada').submit(function () {        
        alert("evento_id+participante_id");
        var evento_id = document.getElementById("evento_id").value;
        var participante_id = document.getElementById("participante_id").value;        
        $.ajax({
            type: 'POST',
            url: '/eventoEntrada/entrada',
            data: {"evento_id": evento_id, "participante_id": participante_id},
            dataType: 'text',         
            success: function (data) {
                $("#divLista").html(data);
            }
        })       
    });    
});

这就是方法：

def entrada(){         
    EventoEntrada entrada = new EventoEntrada()        
    entrada.setEvento(Evento.get(params.evento_id))
    entrada.setParticipante(Pessoa.get(params.participante_id))

    println params.evento_id
    println params.participante_id

    entrada.hora_entrada = java.sql.Time.valueOf(new SimpleDateFormat("HH:mm:ss").format(new Date()))
    entrada.saida_antecipada = false
    if (!entrada.validate()) {
        entrada.errors.allErrors.each {
            println it
        }
    }else{
        entrada.save(flush:true)
        def listaParticipante = EventoEntrada.list()
        render (template:"list", model:[listaParticipante:listaParticipante])
    }
}

当我提交表单时，我得到的 url “.../.../eventoEntrada/index?evento_id=X&participante_id=Y” 我怎么不见了？

谢谢！

【问题讨论】：

在 ajax 数据中使用 $('#formEntrada').serialize() 而不是传递 {"evento_id": evento_id, "participante_id": participante_id}

标签： javascript jquery html ajax grails

【解决方案1】：

我猜你的 Ajax url 是问题所在。您可以尝试提供控制器名称和操作，而不是提供路径。

$(document).ready(function () {
$('#formEntrada').submit(function () {               
    var evento_id = document.getElementById("evento_id").value;
    var participante_id = document.getElementById("participante_id").value;        
    $.ajax({
        type: 'POST',
        url: "${createLink(controller: 'controllerName', action: 'entrada')}",
        data: {"evento_id": evento_id, "participante_id": participante_id},
        dataType: 'text',         
        success: function (data) {
            $("#divLista").html(data);
        }
     })       
  });
});

【讨论】：