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

Question

其实我有2个关于使用jQuery和Ajax提交表单的问题。

Currenlty，我正在使用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-->

Answer 1

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

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

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

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

Answer 2

使用HTML插入的json响应

登录过程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
  });

Answer 3

首先，对于大多数情况，您必须添加服务器端验证。 可以在浏览器上禁用JavaScript，并且在这种情况下，您的验证也将被禁用。 也可以在浏览器上编辑Javascript，您的验证将是无用的js验证仅对用户友好的感觉有益，而对安全性不利。

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

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

但是，我不认为您会那样做。 您应该控制台记录一些内容，并确保您传递了if语句。