Question

在发布相关代码之前，让我简要解释一下我当前的解决方案，问题陈述和期望的结果。

当前解决方案：我有一个登录包装器，其中我有一个表单，并且成功登录后我正在进行页面重新加载，表单内容被另一个表单替换

当前解决方案的问题因为我在我的网络应用中使用了许多其他的ajax调用。我不想做整页重装。因此，我从ajax调用中删除了获取的数据。

期望的结果只是刷新/重新加载/替换登录包装器的html（）部分，用户在成功登录ajax调用后应该保持在同一页面上。

这是我的登录ajax调用，响应成功或失败。

function loginPost(data) {

    return $.ajax({

        url: "/some-api/login",
        type: "POST",
        dataType: "json",
        contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
        async: true,
        data:data
    });
}

登录包装器JS和一些错误处理。注意：在此函数中，您将看到我正在使用位置重新加载方法（我不希望将其作为我想要的结果）。

function login(params) {

    if(checkEmpty("loginEmail") && checkEmpty("password")) {

        var emailField = $("#loginEmail").val(),
            passwordField = $("#password").val(),
            data = "login=" + emailField + "&password=" + passwordField;

        for (var key in params) {
            data += "&" + key + "=" + params[key];
        }

        // Hide errors as default
        $("#loginErrorWrapper").hide();

        // Try to launch the "normal" submit operation to make browser save email-field's value to cache
        $('#loginSubmitHidden').click();

        // Send data to server and refresh the page if everything is ok
        $.when(loginPost(data)).done(function(map) {

            if(!hasErrors(map)) {

                var lang = map.language;
                if (lang != "") {
                    changeLanguage(lang)
                }
                else {
                    lang = 'en';
                }

                location.reload();
            } else {

                if (map.errorCode == "155") {

                    $.fancybox({
                        href : '#termsAcceptancePopup',
                        title : '',
                        beforeLoad : function() {
                            $('#acceptTermsButton').attr('onclick','javascript:login({policyChecked:true});$.fancybox.close();');
                        },
                        helpers : {
                            overlay : { closeClick: false }
                        }
                    });

                } else {

                    var errorString = getErrorMessage(map);
                    $("#loginErrorWrapper").show();
                    $("#loginErrorWrapper").html(errorString);

                }

            }

        });
    }
}

粗体HTML结构

<div id="loginDivWrapper" class="col-sm-6 col-md-7">
  <c:choose>

    <c:when test="${loginUser == null}">
      <form action="" id="login_form" class="form-inline bdr-gradient" autocomplete="on" onkeypress="return event.keyCode != 13;">
      </form>
    </c:when>

    <c:otherwise>
    <form action="" id="postlogin_form" class="form-inline bdr-gradient">
    </form>
    </c:otherwise>  

  </c:choose>
</div>

在表格标签内，我有所有常用的电子邮件，密码，登录按钮，语言下拉等。如果您需要任何进一步的信息，请告诉我

Answer 1

与成功登录后返回语言值一样，您也可以返回另一个表单的html内容。用返回的内容值替换DIV [ID loginDivWrapper]的内容。

    $("#loginDivWrapper").html(map.yourcontents);

成功调用ajax后，在包装器div中更改表单/内容

1 个答案: