我正在写一个网页,显示指定城市的餐馆。 后端是一个节点服务器,它使用yelp API获取结果并将其转发为JSON。
在javascript文件中,当我在document.ready()
函数中调用ajax get方法时,它工作正常。控制台显示XHR finished loading
。
但是当我在jquery中运行它点击这样的功能时,它不起作用。
$(document).ready(function(){
$('#btn').click(function(){
var city = $('#city').val();
var post = $.ajax({
url: "/query?city=" + city,
type: "GET"
});
post.done(function(json){
window.alert('ok');
});
post.fail(function(json){
window.alert('failed');
});
});
});
警告'失败'和控制台说XHR failed loading: GET "http://localhost/query?city=colombo".
但是在节点服务器中它接受请求和进程。当我直接将http://localhost/query?city=colombo
粘贴到浏览器的地址栏或Postman中时,它会收到请求。
你能解释一下为什么它只能在jquery点击功能中失败,但在它之外工作正常......
答案 0 :(得分:2)
在您的HTML按钮中,您错过了类型属性
<button type="button" id="btn" class="btn btn-block col-8">Search</button>
问题在于,由于您的按钮位于表单中,因此单击将触发提交,页面将重新加载。
另一种防止这种情况的方法是将您的事件监听器更改为:
$('#btn').click(function(e) {
e.preventDefault();
...
});
答案 1 :(得分:0)
试试这个,因为你有一个表格
$("form").submit(function(e) {
var city = $('#city').val();
var post = $.ajax({
url: "/query?city=" + city,
type: "GET"
});
post.done(function(json){
window.alert('ok');
});
post.fail(function(json){
window.alert('failed');
});
});