调用后台接口写搜索文章功能时出现了ajax()走不到success回调的情况,以下是发现此情况后的分析与解决。
//搜索新闻
function SearchNews(){
var KEYWORD = $("input[name='keyword']").val();
$.ajax({
type: "post",
url: "*",
data: {
"start": "1",
"limit": "2",
"title": KEYWORD
},
dataType: "json",
success: function(data) {
var html = '';
$.each(data, function(i, n) {
html += '<li class="media"><a class="media-left" href="showContent.html?newsId=' + n['newsId'] + '&special=' + n['special'] + '">' +
'<img src="' + n['image'] + '"alt=""></a>' +
'<div class="media-body"><a href="showContent.html?newsId=' + n['newsId'] + '&special=' + n['special'] + '">' +
n['title'] + '</a><div class="media-bottom">' + getLocalTime(n['time']) + '</div></li>';
});
html+="<hr></hr><li>没有更多相关内容了,请浏览推荐新闻</li><hr></hr>"
document.getElementById('newslist').innerHTML = html;
}
});
}
首先判断了url,正确无误。
其次是dataType,传递数据为json格式,但当传回数据不为json时,也有可能发生不执行success回调的情况。
于是单独使用后台接口试验了一下,传回为json数据,能够拿到success的data数据。
那么只有可能是在异步提交时,还没有验证成功,按钮提交事件触发,页面已经自动刷新。
<form class="navbar-form navbar-right hidden-xs" role="search">
<div class="form-group">
<input type="text" name="keyword" class="form-control" placeholder="快来搜索你感兴趣的内容">
</div>
<a role="button" href="javascript:;" class="btn btn-default" οnclick="SearchNews()">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</a>
</form>
以上为原搜索框和按钮表单,使用bootstrap框架,嵌入在导航条navbar中。经多次调试后发现,嵌入在bootstrap导航条的表单中的按钮会在被点击后自动刷新页面。
于是将<form>改为<div>标签,问题得到了解决。
罪魁祸首是导航条中的表单按钮会执行自动刷新页面事件,导致了异步传输没有完成验证就被“刷新”。