yii小部件Html::a渲染的a標籤,點擊發送ajax請求,接口沒響應,但是直接在postman或瀏覽器上調url沒問題,是什麼原因

原創

2020-06-03 23:52

遇到一個小bug,但是也是第一次遇到,所以就記錄下來啦.
在使用小部件DetailView佈局html界面的時候,出現a鏈接點擊發送ajax請求,接口沒響應,也沒有狀態碼,但是直接在postman或瀏覽器上調url沒問題,錯誤如下圖:
按鈕:

$detailColumns[] = [
    'columns' => [
        [
            'label' => '<i class="red">*</i> 訂單編號：',
            'labelColOptions' => ['class' => 'col-xs-2 control-label'],
            'valueColOptions' => ['class' => 'col-xs-2'],
            'attribute' => 'orderCode',
            'type' => DetailView::INPUT_TEXT,
            'options' => [
                'placeholder' => '輸入訂單編號搜索',
            ],
        ],
        [
            'label' => '',
            'labelColOptions' => ['class' => 'col-xs-2 control-label hidden'],
            'valueColOptions' => ['class' => 'col-xs-3 btn-find'],
            'attribute' => '',
            'format' => 'raw',
            'displayOnly' => true,
            'value' => Html::a('搜索',[
                'class' => '',
                'data-code' => ''
            ])
        ],
    ],
];

ajax代碼:

$('.btn-find').on('click', function(){
     top.hideLoading();
    var orderCode = $('#recallexpressform-ordercode').val();
    if(orderCode == ''){
        toast('請輸入訂單號');
        return;
    }
    $.get('/recall-express/order-info', {'orderCode':orderCode}, function(res){
        console.log(res.data);
        }, 'json');
});

請求結果如下:

認真看第一張錯誤結果截圖的朋友會發現,這個請求被取消了:

取消的原因是因爲Html::a渲染出來的標籤,會默認給個當前的url地址,導致我發送ajax請求的時候,先執行了a標籤的url,所以ajax請求就被取消了

解決方法:
給a標籤添加參數: javascript:;

執行成功接口結果: