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

$.getJSON not responding when inside function

本文关键字：响应 内部 getJSON 函数      更新时间：2023-09-26

validateMdn（）函数中的$.getJSON jquery函数在上面的te函数中不起作用。但当我在函数外使用它时效果很好。我需要它在函数内的$.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>

$.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
            }
        });
    });
});

编辑

可以在呼叫validateMdn()之前呼叫checkNumber()，因此只有当号码有效时才允许呼叫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()返回的值可以进行测试并传递给validateDn（）：

    $('#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作为参数，并对其进行处理

相关文章：