javascript - 带有用户输入问题的 ajax 请求与变量定义

Question

我构建了一个简单的 html 输入，以便用户可以输入邮政编码，然后我在 javascript 中为该输入设置了一个变量。我可以通过 console.log 来证明变量已设置并且它是一个字符串。然后我尝试在 zip 中运行 ajax 调用和 sub 但它不起作用。我可以在任何阶段 console.log 变量并查看变量已更新，但不知何故这是一个提升问题或 ajax 调用值“userInputZip”始终读取我最初设置的内容。当“userInputZip”最初设置为有效的 zipoAny 帮助时，ajax 调用有效。

$(document).ready(function(){
});//end of document.ready

var inputDate = '2015-12-04T20:00:00';
var inputZipCode = '60618';
var userInputZip;

function runAjax(){
console.log(userInputZip);
$.ajax(getJambaseData);
}

// var dataArr = [];

var getJambaseData = {
  type: 'get',
  url:
  'http://api.jambase.com/events?zipCode='+userInputZip+'&api_key=[inserted my key here]',

  // 'http://api.jambase.com/events?zipCode='+userInputZip+'&api_key=[inserted my key here]',
  success: function (data){
    for (i=0; i< 10; i++){
      if(data.Events[i].Date == inputDate){
      var shortDate = data.Events[i].Date.substring(0,10);
      var shortTime = data.Events[i].Date.substring(11,19);
      // dataArr.push(data.Events[i].Date, data.Events[i].Artists[0].Name);
      $("#divID").append('</p>' + 'date::: '+ shortDate + ' time:::' + shortTime + ' show::: ' + data.Events[i].Artists[0].Name + ' time::: ' + data.Events[i].Date + ' address::: ' + data.Events[i].Venue.Address + ' city::: ' + data.Events[i].Venue.City + '</p>');
    }
  }
  },
  error: function(){
    console.log('failed');
  },

}

function findShows(){
  var userZip = document.getElementById("userInput");
  userInputZip = userZip.value;
  document.getElementById("divID").innerHTML = userInputZip;
  runAjax();
}
////////////////////

Answer 1

你提到过

but somehow it's a hoisting issue or something where the ajax call value 'userInputZip' always reads to what I initially set

您在最初执行脚本时将 getJambaseData 定义为变量。您将 url 值设置为 url:
'http://api.jambase.com/events?zipCode='+userInputZip+'&api_key=[在此处插入我的 key ]'。您还期望发生什么？

这就像说 var x = 10; 并期望它在您调用函数时神奇地改变。

您需要做的是将整个 var getJambaseData = {...} 初始化移动到 runAjax 函数中，它应该会修复它。或者您可以跳过变量初始化部分，只在 $.ajax 调用中传递 {...} 中的部分(显然包括花括号)而不是变量。如果您查看 jQuery 文档，您会在大多数示例中看到它，这是通常的语法。

---

与您的问题无关，但这里有一些友好的建议:

• 在定义变量之前不要使用变量(从上到下阅读)，这样会省去很多麻烦。
• 另一个建议是不要使用太多全局变量，您可以在 findShows 函数中获取 userInputZip 并将其传递给 runAjax 作为函数参数。如果您以非常依赖全局状态的方式开发应用程序，那么您很快就会遇到麻烦。