javascript - Ajax JSON 故障

Question

编辑:所以我最终在这里得到了这段代码，但一如既往，无法让它正常工作。基本上它必须检查所有输入字段是否已填写，一旦检查为真，它就会调用 JSON url 来检查增值税号的有效性。如果增值税号检查返回 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 数据，我只需要其中的“有效” key :

{ "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

有两个问题:

• Ajax 是异步的，因此在返回 validVat 的值之前执行可能已经到达了 return 语句
• validVat 的作用域位于 ajax 函数内部，因此它在“return ...”行上未定义

您可以做的最简单的事情就是使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>

希望对你有帮助，再见。