在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);
             }
         });
     }
 });