javascript - getJSON仅在第二次调用时给出结果

我有一个将城市作为输入的表单，然后使用jQuery通过SongKick API获取该位置的ID，然后使用该ID获取该位置的未来事件，同时也使用SongKick API和jQuery。

我遇到的问题是，当我进入一个城市并点击提交时，对SongKick API的第一次调用永远不会返回结果，但是如果我再次点击提交而未更改城市文本，它就可以正常工作（并且每次都可以工作之后，使用相同的城市文字）。

任何帮助深表感谢。

HTML代码：

<form action="#" onsubmit="doSearch(this.locationtext.value);">
    <input onfocus="this.value=''" type="text" size="60" name="locationtext" value="Enter a City" />
    <input type="submit" value="Make it rain" />
  </form>

JavaScript代码：

function doSearch(locations) {

jQuery.getJSON("http://api.songkick.com/api/3.0/search/locations.json?query=" + locations + "&apikey=eRACBJEh2i3NOewK&jsoncallback=?", function(locdata){
    // THIS CODE NEVER RUNS THE FIRST TIME
    // get metro area ID from SongKick result
    var getID = locdata.resultsPage.results.location[0].metroArea.id;

    // pass ID to another SongKick API call to get events at location
    jQuery.getJSON("http://api.songkick.com/api/3.0/metro_areas/" + getID + "/calendar.json?apikey=eRACBJEh2i3NOewK&jsoncallback=?", function(data){
       // do whatever with result
    });
});

}

最佳答案

您必须在阻止表单的Submit事件之后检查输入值：

<form action="#" id="doSearch">
<input onfocus="this.value=''" type="text" size="60" name="locationtext" value="Enter a City" />
<input type="submit" value="Make it rain" />

jQuery(function($){


   $("#doSearch").submit(function(e){

    e.preventDefault();//prevent the form to be submitted

     var location = $(e.target).find('[name="location"]').val();

     //do what you need with location

   });

})