Question

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

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

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

非常感谢：）

.js登录代码：

cur.execute("INSERT INTO scores (duration, winner, winner_score, loser, loser_score) \
         VALUES(%s, %s, %s, %s, %s)", (gametime, red_p, red_s, blue_p, blue_s))

登录进程php页面： 成功登录后，它会返回以下消息：

%s

Html格式：

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

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属性设置为禁用值

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

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

使用jQuery和Ajax表单提交问题

3 个答案: