使用jQuery和Ajax表单提交问题

Actually I have 2 questions about form submit using jQuery and Ajax.

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

Currenlty, I am validating a login form using jQuery/Ajax request. I want to disabled the login submit button after logged in successfully completed. So that I am using following .js code but it's not disabled the submit button.

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

Questions
a) what is the issue in my js code ? why it's not disable the login submit button after logged in successfully ?
b) Using jQuery/Ajax for login is safe for security ? If not what I need to to and Should I add server side validation too ?

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

Thanks a lot :)

非常感谢 :)

.js code for login :

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

Login Process php page : It's return following message after successfully logged :

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

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

Html form :

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

3 个解决方案

#1

One reason could be that the data may have some leading or trailing spaces.

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

You can extract only the text message from the data and use that for comparison

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

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

For the second part, I assume the server side login is using a secured cookie to store the authentication information is so yes it is secured.

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

#2

Use json response insted of HTML

使用HTML的json响应

Login Process php page : It's return following message after successfully logged :

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

#3

First and for most, YOU MUST ADD SERVER SIDE VALIDATIONS. JavaScript can be disabled on the browser and your validations will be disabled when that happens. Javascript can also be edit on the browser and your validations will be useless js validations is only good for user friendly feeling and not for security.

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

All you have to do is set the disabled attribute to disabled value

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

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

However I don't think you are going inside that if. you should console log something and make sure you are passing the if statement.

但是我不认为你会进去。你应该控制日志,并确保你传递if语句。