Question

在页面加载时，下面的代码执行api请求并返回结果。然后，我有一些代码，在更改选择器时使用该选择器的值更新其中一个变量，然后使用函数newsFeed（）重新请求api;

我的问题是变量在函数运行之前没有得到更新。

如何在运行包含ajax的函数之前更新值？

$(document).ready(function() {

var api = '//www.url.com'
var search = 'search?'
var orderBy = 'newest'

var url = api + search + orderBy

//API Call Setup        
function newsFeed(data) {

    $.ajax({
        url: url,
        success: function results(data) {
            for (var i =0; i < data.response.total; i++) {
                var content = '<li>' + data.response.results[i] + '</li>';
                $('#news').append(content);     
            //end of for loop
            };                   
        }
    });       
}

newsFeed();

$("#selector").change(function(){      
   $('#news').empty(); //remove all child nodes  
    orderBy = $("#orderBy :selected").text();        
    newsFeed(); 
});
});

Answer 1

在您的ajax通话中，您要求url: url

$.ajax({
        url: url,

将网址定义为

var url = api + search + orderBy

但是var url并没有通过更改其中一个组合变量的值来神奇地更新。在您设置url之后（直到您更新它），这将是您需要更新的变量。

最快的解决方法是完全摆脱var url并使用像

这样的ajax调用

$.ajax({
        url: api + search + orderBy,

Answer 2

您正在更新orderBy变量，但之后不会更新url。移动url的声明，使其与AJAX调用位于同一个块中。

$(document).ready(function() {

    var api = '//www.url.com';
    var search = 'search?';
    var orderBy = 'newest';

    //API Call Setup        
    function newsFeed(data) {

        var url = api + search + orderBy; // This line has been moved

        $.ajax({
            url: url,
            success: function results(data) {
                for (var i =0; i < data.response.total; i++) {
                    var content = '<li>' + data.response.results[i] + '</li>';
                    $('#news').append(content);     
                };                   
            }
        });       
    }

    ...

Answer 3

正如baao所说，url内的newsFeed()变量并未更新。我建议将变量作为参数传递给newsFeed函数。

$(document).ready(function() {

  var api = '//www.url.com'
  var search = 'search?'
  //API Call Setup        
  function newsFeed(orderBy) {
    // set url every time function is called
    var url = api + search + orderBy

    $.ajax({
      url: url,
      success: function results(data) {
          for (var i =0; i < data.response.total; i++) {
              var content = '<li>' + data.response.results[i] + '</li>';
              $('#news').append(content);     
          //end of for loop
          };                   
      }
    });       
  }

  // First call with default orderBy value
  newsFeed('newest');

  $("#selector").change(function(){      
     $('#news').empty(); //remove all child nodes  
      orderBy = $("#orderBy :selected").text();        
      newsFeed(orderBy); 
  });
});

Answer 4

您需要像这样安排代码：

$(document).ready(function() {

var api = '//www.url.com'
var search = 'search?'
var orderBy = 'newest'

var url = api + search + orderBy


$("#selector").change(function(){      
   $('#news').empty(); //remove all child nodes  
    orderBy = $("#orderBy :selected").text();        
    newsFeed(); 
});


//API Call Setup        
function newsFeed(data) {

    $.ajax({
        url: url,
        success: function results(data) {
            for (var i =0; i < data.response.total; i++) {
                var content = '<li>' + data.response.results[i] + '</li>';
                $('#news').append(content);     
            //end of for loop
            };                   
        }
    });       
}

    newsFeed(); 

});

在运行包含ajax的函数之前更新值

4 个答案: