Question

我最近决定使用Node服务器作为一种代理，从我的前端向第三方公共api发出api调用。我已经成功地将请求发送到我的Node端点，然后发送到第三方api并收到了我期待的响应，但现在我不能为我的生活找出为什么网址没有改变并且窗口中的视图没有更新。

这是我index.html中的按钮，它启动整个决策：

<a id="coords" type="button" class="btn btn-lg btn-default" href="#">
Send coords to backend</a>

这是按钮的点击处理程序：

$(function() {
var latitude;
var longitude;
$('#coords').on('click', function(event) {
  event.preventDefault();
  if ("geolocation" in navigator) {
    navigator.geolocation.getCurrentPosition(function(position) {
      latitude = position.coords.latitude;
      longitude = position.coords.longitude;

      $.ajax({
        url: "/venues",
        data: {
          latitude: latitude,
          longitude: longitude
        },
        success: function(data) {
        }
      });
    })
   }
 });
});

这是我的路线定义：

app.get('/venues', function(request, response) {
  var latitude = request.query.latitude;
  var longitude = request.query.longitude;

  foursquare.getNearbyVenues(latitude, longitude, returnData);

  function returnData(data) {
    response.render('venues', data);
  }
});

我已经验证了传递到returnData的数据实际上是我从第三方api请求的对象。

但是，页面和网址会在点击之前保持不变，并且所需网页（地点）的HTML会显示为对检查员中{jj}调用的{jj}的响应

我在这里缺少什么？

Answer 1

您必须对返回的数据执行某些操作。

您只需将页面重定向到/venues

即可

$.ajax({
    url: "/venues",
    data: {
      latitude: latitude,
      longitude: longitude
    },
    success: function(data) {
      window.location.href = '/venues'
    }
});

但是那种方法违背了ajax的目的，并且完成了两次，所以你可能只想在某处插入返回的HTML

$.ajax({
    url: "/venues",
    data: {
      latitude: latitude,
      longitude: longitude
    },
    success: function(data) {
      $('#some_container').html(data);
    }
});

data处理程序中的success(data)变量是来自Node的response.render('venues', data)的结果

将ajax请求的路由和更新视图更改为节点服务器

1 个答案: