Question

嗨，我是Grails和Groovy的新手。请帮我解决下面与使用ajax调用调用控制器方法有关的问题。代码背后的场景是每当用户无法记住密码时使用用户名恢复密码。我在下面详细解释了代码流程。应用程序从以下auth.gsp页面开始：

<form action='${postUrl}' method='POST' id='loginForm' autocomplete='off'>
    <input type='text' name='j_username' id='username'/>
    <input type='password' name='j_password' id='password'/>
    <input type='submit' id="submit" value='${message(code: "default.button.login")}'/>
    <a href="#" id="recovery-link" recovery-url="<g:createLink controller='recoverPassword' action='recoverPassword'/>"><g:message code="etranscripts.forgotPassword"/></a>
</form>

当我点击锚标记的忘记密码链接时，它将调用以下ajax方法：

<script>
$(document).ready(function () {
    $('#recovery-link').click(function () {
    var url = $(this).attr('recovery-url')

    $.ajax({
    url: url,
    dataType: "html"
    }).done(function (html) {
    $('#loginForm').replaceWith(html)
    $('#sign-in-instruct').text('<g:message code="js.resetEnterName"/>')
    }).fail(function (jqXHR, textStatus) {
    console.log("Request for url failed: " + url)
    })

    event.preventDefault()
    return false
    });
});

上述调用的控制器方法如下。

def recoverPassword = {
    println "RecoverPassword method of ctrl....."
    if (!request.post) {
        // show the form
        render(template: "recoverPassword" )
        return
    }
//some other stuff based on the input conditions.

上述ajax调用的成功输出模板是：

<div id="recover-password" >
<ul>
    <li>
        <span><g:textField name="username" id="username" value="" /></span>
        <input type='submit' id="submit-username-link" recovery-url="<g:createLink controller='recoverPassword' action="recoverPassword"/>" value='Submit'/>
    </li>
</ul>

直到这里我的代码完美无缺。但问题从这里开始。即当我在模板的用户名字段中输入一些值并单击提交时，它应该调用下面的ajax方法。

$(document).on('click', '#submit-username-link', function (event) {

var url = $(this).attr('recovery-url')
var username = $('input#username').val();
$.ajax({
    url: url,
    type: "POST",
    data: {username:username},
    dataType: "json"
}).done(function (responseJson) {
    $('#sign-in-instruct').text(responseJson.message)
    $('div.copyright').css('margin','74px 0px 0px 140px')
    $('#home-link').show()
    if ( responseJson.status == 'success') {
        $('#recover-password').remove()
    }
}).fail(function (jqXHR, textStatus) {
    $('#recover-password').remove()
    $('#sign-in-instruct').text(textStatus)
    console.log("Failed to send the email " + textStatus)
})

event.preventDefault()
return false
});

问题是，url引用了控制器的相同方法，但唯一的变化是使用了POST类型，并且在使用if条件的方法中将考虑到这一点。（即控制器的其他一些东西）这些GET和POST类型的方法调用的配置如下所示在URLMappings.groovy文件中。

"/recoverPassword/recoverPassword"(controller: 'recoverPassword') {
        action = [GET: "recoverPassword", POST: "recoverPassword"]
    }

这个问题的整个总结是，对于控制器的相同方法，GET请求正在工作但是ajax调用的POST类型无法到达控制器的方法。

我在这里做错了吗？请帮我解决这个问题。在此先感谢： - ）

Answer 1

过于复杂。为什么不在控制器中使用单独的函数进行GET（呈现表单）和单独的POST函数（用于处理恢复密码）？

还可以查看https://en.wikipedia.org/wiki/KISS_principle

Answer 2

更改输入类型提交到按钮

 <input type='button' id="submit-username-link" recovery-url="<g:createLink controller='recoverPassword' action="recoverPassword"/>" value='Submit'/>

使用ajax GET和POST类型

2 个答案: