在Javascript中使用Promise调用JQuery Ajax函数

Question

This is my function using Jquery ajax:

function submit_otp(){
        var otp=jQuery('#otp').val();
        return jQuery.ajax({
            url:'../../../Code_Verification/check_otp.php',
            type:'post',
            data:'otp='+otp,
            success:function(result){
                var result = new Promis((resolve, rejevy) => {
                    if(result=='yesTrue'){
                        resolve('Success')
                    }
                    if(result=='yesFlase'){
                        reject('Failed')
                    }
                })
                
            }
        })
    }

this is my callback with promise:

        submit_otp().then(() =>{
            FrontendBook.updateConfirmFrame(); //my next page
        }).fail((error)=>{
            jQuery('#otp_error').html('Please enter your valid otp');
            $('#button-next-3').attr('disable', true);
            $('#button-next-3').css('cursor', 'not-allowed');
        })

--> if the return if resolve in promise that's mean i can go to next page, . But if the return is reject that's mean the button-next-3 will be blocked. The checkout_otp.php file is using php code to connect with database and call the value input and value in Database. I want the logical in here. thanks for help!

Answer 1

The code is little bit messed up, you have JavaScript promises and jQuery Deferred what you need is this:

function submit_otp() {
   return new Promise((resolve, reject) => {
        var otp = jQuery('#otp').val();
        jQuery.ajax({
            url: '../../../Code_Verification/check_otp.php',
            type: 'post',
            data: 'otp=' + otp,
            success: function(result) {
                if (result=='yesTrue') {
                    resolve('Success')
                }
                if (result=='yesFlase') {
                    reject('Failed')
                }
            }
        })
    })
}

you will get real promise so to use this function use this code:

   submit_otp().then(() => {
        FrontendBook.updateConfirmFrame(); //my next page
    }).catch((error) => { // catch instead of fail
        jQuery('#otp_error').html('Please enter your valid otp');
        $('#button-next-3').attr('disable', true);
        $('#button-next-3').css('cursor', 'not-allowed');
    })