<g:remoteform>重定向未发生</g:remoteform>

时间:2014-05-14 18:12:28

标签: ajax grails

我正在使用a来处理登录。在凭据不正确的情况下,我使用Ajax在同一网页上打印错误消息但在成功的情况下我想转发到另一个网页。发生的事情是,即使在成功的情况下,它也是在同一页面上打印结果。我知道这部分与您无法向Ajax发送重定向这一事实有关。然而,仍然是一个知道如何去做的新手。有什么建议吗?

以下是我的gsp部分与此表单有关:

<g:formRemote name="subForm" url="[controller:'admin', action:'authenticate']" update =        "error_message">
      <br><br><label>User Name (email): </label><g:textField name = "username" /><br><br>
      <label>Password: </label><g:field name = "password" type = "password" /><br><br><br><br>
      <div id = "error_message" style = "text-align: center"> </div>
      <div style = "text-align: center">(for TWC employees only)</div>
      <g:submitButton id = "submit_button" name="Submit"/>
    </g:formRemote>

这是控制器方法&#39;验证&#39;:

def authenticate = {

     try {
            MongoClient mongoClient = new MongoClient("localhost", 27017)
            DB db = mongoClient.getDB("admin");
            def userName = params.username
            def passWord = params.password
            boolean auth = db.authenticate(userName, passWord.toCharArray())                

            if (auth)
                redirect (action: loggedin)
            else {
                render "Login or Password incorrect!"
            }
     }
     catch (UnknownHostException e) {
         e.printStackTrace();
     } 
     catch (MongoException e) {
            e.printStackTrace();
     }
}

def displayerror = {
    render "Login or Password incorrect!"
}

def loggedin = {} 

实际上,我无法获得与“登录”相对应的gsp。显示方法。有什么想法吗?

2 个答案:

答案 0 :(得分:0)

你是正确的,你不能使用ajax发送重定向。但是,您可以做的是在您的ajax响应中发回一些内容,您可以阅读并在需要时重定向。

您不需要使用来自ajax调用的响应更新div,而是需要发回一些JSON数据并使用onSuccess标记的formRemote属性将结果传递给一个函数可以采取相应行动。

我建议您先阅读formRemote标记的文档,然后考虑以下内容:

<g:formRemote name="subForm" url="[controller:'admin', action:'authenticate']" onSuccess="doResult(e)">
      <br><br><label>User Name (email): </label><g:textField name="username" /><br><br>
      <label>Password: </label><g:field name="password" type="password" /><br><br><br><br>
      <div id="error_message" style="text-align: center"> </div>
      <div style="text-align: center">(for TWC employees only)</div>
      <g:submitButton id="submit_button" name="Submit"/>
    </g:formRemote>

请注意,上面onSuccess已在formRemote标记上设置,update已被删除。表单提交的响应现在将传递给javascript函数doResult

这就是函数的样子:

<script>
  function doResult(response) {
    var result = eval('(' + response.responseText + ')');
    if (result.success == true) {
      window.location.href = result.url;
    } else {
      $("#error_message").html(result.message);
    }
  }
</script>

唯一剩下的就是改变控制器响应表单提交的方式。首先,您需要将import grails.converters.JSON的导入添加到控制器中。然后改变它的反应方式。它可能看起来像这样:

import import grails.converters.JSON
...
// in the case of an error
render [success: false, message: "Login or Password incorrect!"] as JSON
return
...
// in the case of success
render [success: true, url: createLink(controller: 'whateverController', action: 'whateverAction')] as JSON
return

一下子可能看起来很多,但是一旦你做了几次就变得非常简单。有一点很重要的是阅读Grails documentation。它很长,但写得非常好并且会有很多帮助。

答案 1 :(得分:0)

以前海报最有用的建议需要进行微调。这是实际解决问题的代码。

<g:formRemote name="subForm" url="[controller:'admin', action:'authenticate']" onSuccess="doResult(data)">
      <br><br><label>User Name (email): </label><g:textField name = "username" /><br><br>
      <label>Password: </label><g:field name = "password" type = "password" /><br><br><br><br>
      <div id = "error_message" style = "text-align: center"> </div>
      <div style = "text-align: center">(for TWC employees only)</div>
      <g:submitButton id = "submit_button" name="Submit"/>
    </g:formRemote>

以下javascript:

function doResult(data) {
        if (data.success == true) {
            window.location.href = data.url;
        } else {
            $("#error_message").html(data.message);
        }
    }

下面的控制器代码部分

//success case
                render(contentType: 'text/json') {
                    [success: true, url: createLink(controller: 'whateverController', action: 'whateverAction')]
                }
            }
            else {
                render(contentType: 'text/json') { 
                    ["success": false, "message": 'Login or Password is incorrect.']
                }

不需要在最后一组代码中导入JSON转换器。