在提交表单之前等待地理位置返回结果答案

【问题标题】：Wait for geolocation to return result before submitting form在提交表单之前等待地理位置返回结果
【发布时间】：2017-03-07 06:25:54
【问题描述】：

如果留空，我正在尝试在提交表单中填写城市名称。我有这个代码来获取用户所在的城市。

    var form = $("form.js-reservation-form");
    form.submit(function(e) {        
            $.getJSON("http://www.geoplugin.net/json.gp?jsoncallback=?", function(data) {
                console.log(data.geoplugin_city);
                $("input.geocity").val(data.geoplugin_city);       
            });
....
rest of code ....
});

问题是在地理编码返回值之前提交了表单。如何更改代码以先等待 geoplugin 返回值，然后运行其余代码？

【问题讨论】：

在回调函数中提交表单
异步请求不等待响应，开始执行下一条语句

标签： jquery forms geolocation location form-submit

【解决方案1】：

我创建小提琴来演示它是如何工作的。由于限制我无法查询你的 json，所以我模拟它，以展示它是如何工作的 - https://jsfiddle.net/skyr9999/w5tun6nz/

这里是html：

<form class="js-reservation-form">
  <input class="geocity" type="input">
  <button type="button" id="submit-form">Submit</button>
</form>

和js

$(".js-reservation-form").click(function (e) {
    $.ajax({
        type: "POST",
        url: "/echo/json/",
        data: {"json": JSON.stringify({"geoplugin_city": "Magadan"})},
        cache: false,
        success: function (data) {
            console.log(data.geoplugin_city);
            $("input.geocity").val(data.geoplugin_city);
            //$('form.js-reservation-form').submit();

        }});
});

那么它是如何工作的 - 首先只有普通按钮和绑定在其上的事件，然后它执行 ajax 查询以获取 JSON，如果不需要，您可以使用您的 URL 并摆脱 data。在JSON加载了input.geocity的城市集值和jquery提交的表单之后。

我评论提交代码是因为它会导致快速错误，在你的代码中你必须取消注释这个字符串//$('form.js-reservation-form').submit();

【讨论】：