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

-1

我在我的html模板中有这段代码。它会检查用户输入的学校名称，以及学校与我的数据库中关联的唯一ID。如何在代码执行前使JavaScript/Jquery/AJAX等待

$("#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'; 
 
     } 
 

 
     } 
 
    }); 
 
    } 
 
});

正如你可以看到，如果在数据库中的代码和用户输入不匹配的代码，我想去红色的框。当他们这样做时，我希望它变绿。

问题是，只要我输入学校名称，在输入代码之前，两个框都会变红。我试图修复这与if(identification_code != '' and school != '')但这没有奏效。

感谢您的帮助！

来源

2017-06-16 wtreston

你错过了'VAL（）''中选择id_identification_code'' – dloeda

如果{''首先是identification_code'一个DOM元素对象，所以永远不会等于''''。推测你的意思是'identification_code.value！='''。在JS中，'和'也是无效的语法。你需要'&&'而不是 –

@RoryMcCrossan我已经做了更改，但现在没有任何反应。轮廓不会改变颜色，也不会在控制台中记录任何内容。 – wtreston

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

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

来源

2017-06-16 10:04:15

ajax成功呢？ – charlietfl

@charlietfl同样如果（data.code！= identification_code.value）{...} –

不需要告诉我关于它...更新回答 – charlietfl

var identification_code = document.getElementById('id_identification_code')

identification_code这里不是文本，但你的HTML元素，它永远不会是''。

你应该使用逻辑运算符（& &）位置：

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

来源

2017-06-16 10:01:34 Epitouille

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

var deferred = jQuery.Deferred();

或

var deferred = $.Deferred();

一旦创建，递延对象公开的几种方法。忽略那些过时或删除，它们分别是：

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

来源

2017-06-16 11:41:37

好吧，我设法解决了我的问题。我没有查看学校名称字段，而是查看了“识别代码”字段，只有在填写完该代码后才能运行代码。这是我的新代码：（！identification_code = ''！和学校= ''）

$('#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'; 
      } 

     } 

    } 
) 

})

来源

2017-06-16 12:15:55 wtreston

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

回答

相关问题