Ajax JSONの不具合

Question

EDIT： ここでこのコードが完成しましたが、いつものように正しく動作するようにはできません。 基本的には、すべての入力フィールドが満たされていることをチェックする必要があります。このチェックが真であれば、JSON URLを呼び出してVAT番号の有効性をチェックします。 VAT番号チェックがtrueを返す場合はフォームを送信し、そうでない場合はエラーが発生したことを顧客に通知し、例外を無視（または送信）するか、送信をキャンセルしてページに留まるかを顧客に選択させます。 ここにJSコードがあり、以下はその呼び出しから返されたJSONです。

$(document).ready(function() { 
$('#create_customer').submit(function(){ 
    var canSubmt = true; 
    $("form#create_customer :input").each(function(){ 
    var input = $(this); 
    if($(input).val() == '') { 
     $(input).css("border",'1px solid red'); 
     canSubmt = false; 
    }else{ 
     $(input).css("border",'1px solid #000'); 
    } 
    }); 
    if(!canSubmt){ $("#errMsg").text("Errors detected! Please check your form and try again.").show().fadeOut(7000); return canSubmt; } 

    var vatNum = document.getElementById('VatNum').value; 
    var validVat; 
    var vatConfirm; 

    $.getJSON("http://apilayer.net/api/validate?&access_key=<api-key>&vat_number="+vatNum, function(response) { 
    validVat = response.valid; 
    }) 
    .fail(function(){ 
    console.log("failed"); 
    }); 

    if (!validVat) { vatConfirm = confirm("Your VAT number doesn't seem to be valid or in a correct format!\nDo you wish to continue anyway?"); } 
    if (!vatConfirm) { canSubmt = false; } 

    return canSubmt; 
}); 

}）;

と私は唯一のキー「有効」を必要とする、そこからJSONデータ、：

{ "valid": true, "format_valid": true, "query": "LU26375245", "country_code": "LU", "vat_number": "26375245", "company_name": "AMAZON EUROPE CORE S.A R.L.", "company_address": "5, RUE PLAETIS L-2338 LUXEMBOURG" } 

この作業を取得する方法上の任意のアイデア？

Answer 1

Ther're二つの問題：

• それはvalidVat実行の値を返す前に、おそらく既に
• validVatの範囲はそれようのAjax関数内でreturn文に到達しているので、Ajaxは、非同期であります
  ：、ライン「を返す...」

をあなたができる最も簡単なことで次を参照して、AJAXリクエストの同期をしてくださいすることです未定義ます

var validVat = false; 
$.ajax({ 
    var vatNumber = document.getElementById("VatNum").value; 
    url: 'http://apilayer.net/api/validate?access_key=6ab1579cc9e968a65429d7f351375f35&vat_number='+vatNumber, 
    dataType: 'jsonp', 
    async: false, 
    success: function(json) { 

     // Access and use your preferred validation result objects 
     if (!json.valid) { 
     var r = confirm("Your VAT number doesn't seem to be valid or in a correct format!\nDo you wish to continue anyway?"); 
     if (r == true) { 
      validVat = true; 
     } else { 
      validVat = true; 
     } 
     } 
    } 
    }); 

    return validVat; 

代わりに、フォームを送信するためにコールバック関数を使用するか、ajaxリクエストの応答後に必要な処理を行うのが最善の方法です。ここで

は、AJAXリクエストのモックとの完全な例ですが、以下を参照してください。

var validated = false; 
 

 
$("form").submit(function(event) { 
 
    
 
    if(!validated){ 
 
    event.preventDefault(); 
 
    
 
    var mock = { 
 
     ajax: function() { 
 
     return mockAjax({ 
 
      success: $("#test").val() === "correct", 
 
      response: { ok: $("#test").val() === "correct" }, 
 
      timeout: 500 
 
     }); 
 
     } 
 
    }; 
 

 
    mock.ajax() 
 
    .done(function(valid) { 
 
     if(valid) { 
 
     $("#err").text("Validated... do submit").show(); 
 
     validated = true; 
 
     return $("form").submit(); 
 
     } else { 
 
     event.preventDefault(); 
 
     } 
 
    }) 
 
    .error(function(json) { 
 
     $("#err").text("Not valid!").show().fadeOut(1000); 
 
    }); 
 
    } 
 
}); 
 

 
function mockAjax(options) { 
 
    var that = { 
 
    done: function done(callback) { 
 
     if (options.success) 
 
     setTimeout(callback, options.timeout, options.response); 
 
     return that; 
 
    }, 
 
    error: function error(callback) { 
 
     if (!options.success) 
 
     setTimeout(callback, options.timeout, options.response); 
 
     return that; 
 
    } 
 
    }; 
 
    return that; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>Type 'correct' to validate.</p> 
 
<form action="javascript:console.log('success!');"> 
 
    <div> 
 
    <input id="test" type="text"> 
 
    <input type="submit"> 
 
    </div> 
 
</form> 
 
<span id="err"></span>

私はそれはさようなら、あなたを助け願っています。