gpt4 book ai didi

javascript - 使用 jQuery 和 Ajax 提交表单的问题

转载 作者:行者123 更新时间:2023-12-02 14:46:18 26 4
gpt4 key购买 nike

实际上我有两个关于使用 jQuery 和 Ajax 提交表单的问题。

当前,我正在使用 jQuery/Ajax 请求验证登录表单。我想在登录成功完成后禁用登录提交按钮。因此,我使用以下 .js 代码,但它没有禁用提交按钮。

问题
a) 我的 js 代码有什么问题?为什么登录成功后不禁用登录提交按钮?
b) 使用 jQuery/Ajax 登录安全吗?如果不是我需要的,我也应该添加服务器端验证吗?

非常感谢:)

.js 登录代码:

// Login form
function login_form (element,event){
e= $(element);
event.preventDefault();
var formData = new FormData(e.parents('form')[0]);
$.ajax({
url: 'login_process',
type: 'POST',
xhr: function() {
var myXhr = $.ajaxSettings.xhr();
return myXhr;
},
beforeSend: function () {
$('#login_bottom').val('Validating...');
$("#login_bottom").attr("disabled", true);
},
success: function (data) {
$('.validation_msg').html(data);
$('#login_bottom').val('LOGIN');
$("#login_bottom").attr("disabled", false);

if(data == '<div class="alert alert-success"><strong>Successfully logged!.</strong></div>') {
$('#login_form')[0].reset();
$("#login_bottom").attr("disabled", true);
}
},

data: formData,
cache: false,
contentType: false,
processData: false
});
}

登录过程 php 页面:成功登录后返回以下消息:

if(login($email, $user_pwd) == true) {                    
echo '<div class="alert alert-success">';
echo '<strong>Successfully logged!.</strong>';
echo '</div>';
}

HTML 形式:

<div class="container bellow-nav">
<div class="row">
<div class="col-md-6 content-area">
<h3>Login</h3>
<hr/>
<form role="form" method="post" id="login_form">
<div class="form-group">
<label for="email">Email addresse</label>
<input type="email" name="email" class="form-control" placeholder="Email address">
</div>
<div class="form-group">
<label for="pwd">Password</label>
<input type="password" name="pwd" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<input type="hidden" name="_token" value="<?php echo $form_token; ?>">
<input type="submit" name="submit" value="LOGIN" class="btn btn-booking" id="login_bottom" onclick="login_form(this,event);" >
</div>
<div class="form-group validation_msg">
</div>
<div class="fomr-group">
<label for=""><a href="forgot-password"><p>Forgot password?</p></a></label>&nbsp; |
<label for=""><p>Don't have an account? <a href="signup">Join now</p></label>
</div>
</form>
</div>
</div><!--main row-->
</div><!--main container end-->

最佳答案

原因之一可能是数据可能有一些前导或尾随空格。

您可以仅从数据中提取文本消息并将其用于比较

  if ($(data).text().trim() == 'Successfully logged!.') {
$('#login_form')[0].reset();
$("#login_bottom").prop("disabled", true);
} else {
$("#login_bottom").prop("disabled", false);
}

对于第二部分,我假设服务器端登录使用安全 cookie 来存储身份验证信息,因此是安全的。

关于javascript - 使用 jQuery 和 Ajax 提交表单的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36588715/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com