[英]changing form/content inside a wrapper div after successful ajax call
在发布相关代码之前,让我简要解释一下我当前的解决方案,问题陈述和期望的结果。
当前解决方案 :我有一个登录包装,其中有一个表单,成功登录后,我正在重新加载页面,并且表单内容被另一个表单替换
当前解决方案的问题由于我在Web应用程序中使用了许多其他的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>
在表单标签内,我拥有所有常用的电子邮件,密码,登录按钮,语言下拉列表等。如果您需要任何其他信息,请告诉我
就像成功登录后返回语言值一样,您也可以返回其他表单的html内容。 用返回的内容值替换DIV [ID loginDivWrapper]的内容。
$("#loginDivWrapper").html(map.yourcontents);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.