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

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

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

非常感谢您的帮助

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>

---

}

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

<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" />

---

我想这可能是因为你处理表格提交的方式。与使用

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

$（“表格”）。提交（函数（）{
var loc=$（“输入[name='locationtext']”，this.val（）；
$.getJSON（“http://api.songkick.com/api/3.0/search/locations.json?jsoncallback=?", {
查询：loc，
apikey：“eRACBJEh2i3NOewK”
}，函数（数据）{
var getID=data.resultsPage.results.location[0].metroArea.id；
警报（getID）；
});
返回false；
});​

请注意事件处理程序如何返回

false

。这将阻止运行默认操作（提交表单）

---

JSFIDLE demo here-

在您第一次提交表单时，请检查浏览器的错误控制台并查看网络选项卡（Firebug/Chrome开发工具）。不确定它是否能解决问题，但我会添加更新事件处理程序，如下所示：

onsubmit=“doSearch（this.locationtext.value）；返回false；”

返回false正是我所需要的。。。很简单。nnnnnnnn，你能添加你的评论作为问题的解决方案吗，这样我就可以把它标记为正确答案了？我认为真正需要的是

e.preventDefault（）。此外，jQuery将所选元素（
#doSearch
）绑定到处理程序中的
此
变量，因此您不需要
e.target
“表单提交后”是什么意思？最初的问题代码在submit上运行。是的，
e.target
可能不需要，但我认为这是一个很好的实践，有时在使用对象方法时，
此
指的是对象本身，而不是DOM元素，因此为了避免将来出现问题，我总是使用
e.target
，只是偏好的问题。忘了“提交表单后”这是个错误，我会编辑这篇文章的
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

   });

})

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