如何在代碼執行前使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等待

回答

相關問題