Question

在上面的te函数中，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作为参数，然后对其执行操作。

内部函数时$ .getJSON没有响应

1 个答案:

修改