在beforeSend（）之后如何調用ajax？

Question

好吧，當用戶從下拉列表中選擇選項時，我有一個jQuery chnage事件。 當他們選擇任何列表時，它將在beforeSend函數中顯示2個輸入框。 像下面這樣：

beforeSend : function () {                    
$('.order_accept_msg').html('<h4>Are you sure to proceed ?</h4><input type="submit" class="btn btn-danger" name="submit" id="yes" value="YES PROCEED">&nbsp;<input type="submit" class="btn btn-primary" id="now" name="submit" value="NO">');
return false;
},

現在，如果要按“ YES PROCEED”按鈕，我想調用實際的ajax。 但是我不知道該怎么辦？ 是否有更少的jQuery代碼可以完成整個過程？

jQuery代碼：

<script type="text/javascript">
    $(document).ready(function(){        
        $(".order_accept").change(function(event) {
            event.preventDefault();
            $('.order_accept_msg').show();            
            var poid = $(this).find(':selected').data('poid');            
            var oid = $('.order_accept').val();
            var token = <?php echo "'".generate_Form_Token('order_accept')."';"; ?>
            $.ajax({
                url : <?php echo "'".SITE_URL."'"; ?> + 'order-accept',
                type : 'POST',
                dataType : 'html',
                data : {
                    'poid'  : poid,
                    'oid'   : oid,
                    '_token' : token,
                },
                beforeSend : function () {                    
                    $('.order_accept_msg').html('<h4>Are you sure to proceed ?</h4><input type="submit" class="btn btn-danger" name="submit" id="yes" value="YES PROCEED">&nbsp;<input type="submit" class="btn btn-primary" id="now" name="submit" value="NO">');
                    alert( $('#yes').text() );
                    return false;
                },
                success : function (result) {
                    $('.order_accept_msg').html(result);
                    setTimeout(function(){
                        $('.order_accept_msg').hide();
                    }, 3000);
                }   
            });
        });
    });
</script>

Answer 1

在發出ajax請求之前，將調用beforeSend回調，但是在調用$.ajax時，它無法取消該請求。

如果要有條件地運行$.ajax調用，請在ajax調用之前添加條件

$(document).ready(function() {
     $(".order_accept").change(function(event) {
         event.preventDefault();

         var confirmH4 = $('<h4 />', {
                text : 'Are you sure to proceed ?'
            }),
            confirmBtn1 = $('<input />', {
                type    : 'button',
                'class' : 'btn btn-danger',
                value   : 'YES PROCEED',
                on      : {
                    click : doAjax
                }
            }),
            confirmBtn2 = $('<input />', {
                type    : 'button',
                'class' : 'btn btn-danger',
                value   : 'NO'
            });

         $('.order_accept_msg').empty().append(confirmH4, confirmBtn1, confirmBtn2).show();
    });

    function doAjax(poi, oid, token) {
         var acc   = $(this).closest('.order_accept');
         var poid  = acc.find(':selected').data('poid');
         var oid   = acc.val();
         var token = '<?php echo generate_Form_Token('order_accept'); ?>';

         $.ajax({
             url      : '<?php echo SITE_URL; ?>order-accept',
             type     : 'POST',
             dataType : 'html',
             data     : {
                 poid   : poid,
                 oid    : oid,
                 _token : token,
             },
             success: function(result) {
                 $('.order_accept_msg').html(result);
                 setTimeout(function() {
                     $('.order_accept_msg').hide();
                 }, 3000);
             }
         });
     }
 });