Question

我想问为什么我的Javascript函数不会使用随附的jQuery函数$ .getJSON（）？

HTML

<form action="" method="get">
    <input id="search" name="search" type="text" class="map-search form-control input-sm"/>
    <span class="input-group-btn">
         <input class="map-search btn btn-default btn-sm" type="submit" onclick="nominatim_search()" />
         <span class="glyphicon glyphicon-search"></span>
    </span>
</form>

Javacript

function nominatim_search() {
    var query = document.getElementById("search").value;
    $.getJSON('http://nominatim.openstreetmap.org/search/ph/'+query+'?format=json&limit=1&polygon_geojson=1&bounded=1&addressdetails=1', function (boundary) {
        var json = boundary[0].geojson;
        L.geoJSON(json).addTo(map);
  });
}

然而，它会进入函数并提醒查询，但是JSON不会加载。我会在功能之外。

Answer 1

您没有关闭输入标记，只需添加>：

<input class="map-search btn btn-default btn-sm" type="submit" onclick="nominatim_search()">

Answer 2

输入不是模板化标签，因此您必须关闭它而不将其他标记放入其中：

<input class="map-search btn btn-default btn-sm" type="submit" onclick="nominatim_search()" />

表单<input> ..... </input>对html

无效

<强>更新

要解决此问题，必须更改输入类型=＆＃34;提交＆＃34;，因为提交会导致在脚本中函数结束之前重新加载页面。在这个答案的评论部分，我建议使用输入类型=＆＃34;按钮＆＃34;这就是诀窍。使用<button type="button">标记替换输入的其他解决方案足以被视为对此问题有效，可能<button type="button">标记更符合问题需求，因为它是模板化标记，所以它可以用其他标签写成。

Answer 3

这里只需尝试用这些替换标记。由于您使用Span修改按钮文本，因此请使用<button>代替<input>。

<强> HTML

<form action="" method="get">
    <input id="search" name="search" type="text" class="map-search form-control input-sm">
    <span class="input-group-btn">
    <button class="map-search btn btn-default btn-sm" type="button" onclick="nominatim_search()" />
         <span class="glyphicon glyphicon-search"></span>
    </button>
    </span>
</form>

让我知道它是否有助于解决您的问题。

Javascript onClick不会激活getJSON

3 个答案: