Question

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

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

非常感谢任何帮助。

HTML code：

<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
    });
});

}

Answer 1

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

<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

   });

})

Answer 2

我认为这可能是由于您处理表单提交的方式。您应该尝试使用不显眼的方法来附加事件处理程序，而不是使用onsubmit属性。 jQuery让这很容易。

<form action="#"> 
    <input type="text" size="60" name="locationtext" placeholder="Enter a City" /> 
    <input type="submit" value="Make it rain" />
</form>

$("form").submit(function() {
    var loc = $("input[name='locationtext']", this).val();
    $.getJSON("http://api.songkick.com/api/3.0/search/locations.json?jsoncallback=?", {
        query: loc,
        apikey: "eRACBJEh2i3NOewK"
    }, function(data) {
        var getID = data.resultsPage.results.location[0].metroArea.id;
        alert(getID);
    });
    return false;
});

注意事件处理程序如何返回false。这可以防止默认操作（提交表单）从运行

这里的JSFiddle演示 - http://jsfiddle.net/VSt3R/2/

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

2 个答案: