javascript - $.getJSON 在函数内部没有响应

Question

在上面的函数中，validateMdn() 函数中的 $.getJSON jquery 函数不起作用。但当我把它放在函数之外时效果很好。 我需要它在函数内的 $.getJSON 内，因为我只想在表单提交时触发请求。

函数中的警报工作正常，但在 $.getJSON(url, function(returnData) {alert("Hello"); }); 中也不起作用

谢谢!

<script>
function validateMdn(){

var url ="http://www.example.com/Validate.do?mdn=123456789&type=postpaid";

alert('validate function');

$.getJSON(url, function(returnData) {
  alert("Validity is : "+returnData.isValid+"  Balance is: "+returnData.balance);



});

}




function checkNumber() {

var numb1 = $('[name=ordPhoneNumber]');
var numb2 = $('[name=ordPhoneNumberConfirm]');

isvalid = numb1.val()=== numb2.val();

if(!isvalid){
alert('Number  does not match')

       }

numb2.closest('.input-wrapper').toggleClass('error',!isvalid);
   return isvalid;

}



$(function() {
     $('#topup_form').submit( function() {
         return (checkNumber()&&validateMdn());
     });
});


</script>

<form method="post" name="topup" id="topup" action="https://www.example.com/topup.html">
    <input type="text" name="ordPhoneNumber" id="ordPhoneNumber" maxlength="12" pattern="phone"  required>
    <small class="error invalid"> Error messgae.  </small>

    <input type="text" name="ordPhoneNumberConfirm" id="ordPhoneNumberConfirm" maxlength="12" pattern="phone" required>

    <small class="error invalid"> Error message.  </small>
     <button type="submit" name="submitbutton" class="button blue right">Continue</button>
                <button type="reset" class="button right">Clear</button>
             </form>

Answer 1

$.getJSON() 是异步的。要在 onsubmit 处理程序中使用响应，validateMdn() 应返回一个 promise 。然后，处理程序可以使用 Promise 方法(.then() 或 .done())来访问数据。

$(function() {
    function validateMdn() {
        var url ="http://www.example.com/Validate.do?mdn=123456789&type=postpaid";
        alert('validate function');

        //return the promise returned by $.getJSON().then().
        return $.getJSON(url).then(function(returnData) {
            alert("Validity is : " + returnData.isValid + "\nBalance is: " + returnData.balance);
            return returnData;
        });
    }

    function checkNumber() {
        var numb1 = $('[name=ordPhoneNumber]'),
            numb2 = $('[name=ordPhoneNumberConfirm]'),
            isvalid = numb1.val()=== numb2.val();//var
        if(isvalid) {
            numb2.closest('.input-wrapper').removeClass('error');
        } else {
            alert('Number does not match')
            numb2.closest('.input-wrapper').addClass('error');
        }
        return isvalid;
    }

    $('#topup_form').on('submit', function(e) {
        e.preventDefault();//inhibit form submission
        var form = this;
        validateMdn().then(function(returnData) {
            if(checkNumber() && returnData.isValid) {
                form.submit();//submit form only if both validations are successful
            }
        });
    });
});

编辑

checkNumber() 可以在调用 validateMdn() 之前调用，从而允许仅在号码有效时调用 validateMdn() 。

首先，修改 checkNumber() 以返回有效数字或 false :

    function checkNumber() {
        var numb1 = $('[name=ordPhoneNumber]'),
            numb2 = $('[name=ordPhoneNumberConfirm]'),
            isvalid = numb1.val()=== numb2.val();//var
        if(isvalid) {
            numb2.closest('.input-wrapper').removeClass('error');
        } else {
            alert('Number does not match')
            numb2.closest('.input-wrapper').addClass('error');
        }
        return isvalid ? numb1 : false;
    }

可以测试 checkNumber() 返回的值并将其传递给 validateMdn() :

    $('#topup_form').on('submit', function(e) {
        e.preventDefault();//inhibit form submission
        var form = this,
            number = checkNumber();
        if(number) {//number is either a valid number or `false`
            validateMdn(number).then(function(returnData) {
                if(numberValid && returnData.isValid) {
                    form.submit();//submit form only if both validations are successful
                }
            });
        }
    });

现在您需要做的就是修改 validateMdn() 以接受 number 作为参数，并用它做一些事情。