使用jQuery和Ajax表单提交问题

实际上，我有两个关于使用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-->

一个原因可能是data可能有一些前导或尾随空格。

您只能从data中提取文本消息，并将其用于比较

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

对于第二部分，我假设服务器端登录使用一个安全的cookie来存储身份验证信息，所以是的，它是安全的。

使用json响应代替HTML

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

if(login($email, $user_pwd) == true) {                    
    echo json_encode(['message'=>'Success'])
}

$.ajax({
      url: 'login_process',
      type: 'POST',
      dataType: 'JSON',    
      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.message == 'Success') {
             $('#login_form')[0].reset(); 
             $("#login_bottom").attr("disabled", true);                      
        }
      },
      data: formData,
      cache: false,
      contentType: false,
      processData: false
  });

首先，对于大多数情况，您必须添加服务器端验证。JavaScript可以在浏览器上被禁用，当这种情况发生时，您的验证将被禁用。Javascript也可以在浏览器上编辑，你的验证将是无用的。js验证只对用户友好的感觉有好处，而对安全性没有好处。

您所要做的就是将禁用属性设置为禁用值

$("#login_bottom").attr("disabled","disabled");

然而，我不认为你会进入if。你应该控制台日志，并确保你正在传递if语句。

相关内容

最新更新

热门标签：