Question

我的html模板中有这段代码。它会根据学校在我的数据库中与学校相关联的唯一ID来检查用户输入的学校名称。

＆＃13;

$("#id_school").change(function() {
  var school = $(this).val();
  var identification_code = document.getElementById('id_identification_code')

  if (identification_code != '' and school != '') {
    $.ajax({
      url: '/checks/validate_school/',
      data: {
        'school': school,
      },
      dataType: 'json',
      success: function(data) {
        console.log('Checked School')
        if (data.code != identification_code) {
          console.log(data.code);
          document.getElementById('id_school').style.borderColor = 'red';
          document.getElementById('id_identification_code').style.borderColor = 'red';

        } else {
          document.getElementById('id_school').style.borderColor = 'green';
          document.getElementById('id_identification_code').style.borderColor = 'green';
        }

      }
    });
  }
});

＆＃13;

正如您所看到的，如果数据库中的代码和用户输入的代码不匹配，我希望该框变为红色。当他们这样做时，我希望它变绿。

问题是，一旦我输入学校名称，在输入代码之前，两个框都会变为红色。我尝试用if(identification_code != '' and school != '')修复此问题，但这没有用。

感谢您的帮助！

Answer 1

var identification_code = document.getElementById('id_identification_code')

identification_code这里不是文字而是你的html元素，它永远不会是''。

你应该在这里使用Logical And运算符（＆amp;＆amp;）：

if(identification_code != '' and school != '')

Answer 2

你应该使用identification_code.value，因为它是DOM元素。

if(identification_code.value != '' && school != ''){
......
}

Answer 3

您可以使用jQuery.Deferred（）在Jquery中执行顺序执行。

var deferred = jQuery.Deferred();

或

var deferred = $.Deferred();

一旦创建，Deferred对象就会公开几种方法。忽略那些已弃用或已删除的内容，它们是：

always（callbacks [，callbacks，...，callbacks]）：添加要在解析或拒绝Deferred对象时调用的处理程序。
done（callbacks [，callbacks，...，callbacks]）：添加处理程序解析Deferred对象时调用。
fail（callbacks [，callbacks，...，callbacks]）：添加处理程序在拒绝延迟对象时调用。
notify（[argument，...，argument]）：在a上调用progressCallbacks 具有给定参数的延迟对象。
notifyWith（context [，argument，...，argument]）：调用具有给定上下文和的Deferred对象的progressCallbacks 参数。
progress（callbacks [，callbacks，...，callbacks]）：添加处理程序在Deferred对象生成进度通知时调用。
promise（[target]）：返回Deferred的Promise对象。
reject（[argument，...，argument]）：拒绝Deferred对象并使用给定的参数调用任何failCallbacks。
rejectWith（context [，argument，...，argument]）：拒绝延迟对象并使用给定的上下文调用任何failCallbacks 参数。
resolve（[argument，...，argument]）：解析Deferred对象并使用给定的参数调用任何doneCallbacks。
resolveWith（context [，argument，...，argument]）：解析延迟对象并使用给定的上下文调用任何doneCallbacks 参数。
state（）：确定Deferred对象的当前状态。
然后（resolvedCallback [，rejectedCallback [，progressCallback]]）：添加 Deferred对象解析，拒绝时调用的处理程序，或者仍在进行中。

Answer 4

好的，所以我设法解决了我的问题。我查看了识别代码字段，而不是查看学校名称字段，只在填写完代码时运行代码。这是我的新代码：

$('#id_identification_code').blur(function(){
var school_code = $(this).val();
var school_name = document.getElementById('id_school').value;

$.ajax(
    {
        url: '/checks/validate_school/',
        data: {
            'name':school_name,
        },
        dataType: 'json',

        success: function(data){
            if(data.code == school_code){
                console.log('Codes Match')                    
                document.getElementById('id_school').style.borderColor='green';
                document.getElementById('id_identification_code').style.borderColor='green';                    
            }else{
                console.log('Codes do not match')
                document.getElementById('id_school').style.borderColor='red';
                document.getElementById('id_identification_code').style.borderColor='red'; 
            }

        }

    }
)

})

如何在代码执行之前使Javascript / Jquery / AJAX等待

4 个答案: