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

Question

Let me briefly explain my current solution, problem statement and desired result before posting the relevant code.

Current solution : I have a login wrapper in which I have a form and on successful login I am doing a page reload and the form content is replaced by another form

Problem with current solution Since I am using many other ajax calls in my web app. I don't want to do a full page reload. Because of this I am loosing the fetched data from ajax call.

Desired result Just to refresh/reload/replace the html() part of login wrapper and the user should stay on the same page after successful login ajax call.

This is my login ajax call and the response is success or unsuccessful.

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
    });
}

Login wrapper JS and some error handling. Note: in this function you will see that I am using a location reload method (which I don't want as my desired result).

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);

                }

            }

        });
    }
}

Crude HTML structure

<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>

Inside the form tag I have all the usual email, password, login button, language dropdown, etc. Please let me know in case you need any further information

Answer 1

Like returning language value after successful login, you can return the html contents of another form as well. Replace the contents of DIV [ID loginDivWrapper] with the returned contents value.

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