使用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語句。