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:;

执行成功接口结果: