javascript - 如何在 JQuery 中停止 'GET' 直到我执行了一些 JavaScript 逻辑？

Question

我在 ASP.Net MVC 中有一个表单，如下所示。它用 get 提交，但在提交之前我想运行一些预获取处理(从谷歌地图获取地理坐标)，然后如果坐标返回，我将提交给我的 Controller 。如果没有返回坐标，那么我会显示一些错误消息并且不会点击 Controller 。

这是我的表格

@using (Html.BeginForm("Search", "Home", FormMethod.Get))
{
    <div class="form-group">
        @Html.TextBoxFor(model => model.SearchQuery, new { @class = "form-control"})
        @Html.ValidationMessageFor(model => model.SearchQuery, "", new { @class = "text-danger" })

        @Html.TextBoxFor(model => model.ClassDate, "{0:MM/dd/yyyy}", new { @class = "datefield form-control" })
        @Html.ValidationMessageFor(model => model.ClassDate, "", new { @class = "text-danger" })
    </div>
    <button type="submit" id="submitSearch" class="btn btn-default">Search</button>
}

这是我的 javascript 事件，它将获取地址并将其提交到谷歌地图。我尝试在开头添加 event.preventDefault 以阻止它调用表单“GET”，但这不起作用。

$("#submitSearch").click(function (event) {
        event.preventDefault();
        var geocoder = new google.maps.Geocoder();
        var address = document.getElementById('SearchQuery').value;
        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
                if (results[0].formatted_address) {
                    region = results[0].formatted_address + '<br/>';
                }
                var infowindow = new google.maps.InfoWindow({
                    content: 'Location info:<br/>Country Name:' + region +
                    '<br/>LatLng:' + results[0].geometry.location + ''
                });
                google.maps.event.addListener(marker, 'click', function () {
                    // Calling the open method of the infoWindow 
                    infowindow.open(map, marker);
                });

            }
            else {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
    });

我应该从页面中删除表单并仅使用 JQuery 和 Ajax 调用它吗？

Answer 1

不要立即提交表单，让 onclick 事件打开模式对话框，也可以在此事件中运行脚本。

如果没有返回坐标，则在模式中显示一条消息，否则显示带有提交按钮的表单。