jQuery：在表单提交之前执行某些操作

Question

我有一个页面，上面只有一个表单。该表单包含一个文本框和一个提交按钮。

当提交表单时，无论是通过单击按钮还是在文本框中按Enter键，我都希望进行查询（在此情况下，使用Bing Maps对邮政编码进行地理编码），然后像往常一样将表单提交到服务器。

我的当前方法是为唯一的表单添加提交事件处理程序，然后在完成后调用submit()，但我无法使其工作，并且无法调试问题：

$(document).ready(function () {
    $("form").submit(function (event) {
        var postcode = $.trim($("#Postcode").val());
        if (postcode.length === 0) {
            return false;
        }

        var baseUrl = "http://dev.virtualearth.net/REST/v1/Locations/UK/";
        var apiKey = "myKey";
        var url = baseUrl + postcode + "?key=" + apiKey + "&jsonp=?";
        $.getJSON(url, function (result) {
            if (result.resourceSets[0].estimatedTotal > 0) {
                var location = result.resourceSets[0].resources[0].point.coordinates;
                $("#latitude").val(location[0]);
                $("#longitude").val(location[1]);
                $("form").submit();
            }
        });
    });
});

- Saqib

Answer 1

event.preventDefault()在这里是你的好朋友。你基本上遇到了与这里相同的问题。表单在实际ajax请求之前被提交了。你需要停止表单提交，然后执行ajax，最后再提交表单。如果你不加一些停顿，它就会直接运行并且唯一做的事情就是提交表单。

 $(document).ready(function () {
        $("form").submit(function (event) {

// prevent default form submit
    event.preventDefault();
            var postcode = $.trim($("#Postcode").val());
            if (postcode.length === 0) {
                return false;
            }


            var baseUrl = "http://dev.virtualearth.net/REST/v1/Locations/UK/";
            var apiKey = "myKey";
            var url = baseUrl + postcode + "?key=" + apiKey + "&jsonp=?";
            $.getJSON(url, function (result) {
                if (result.resourceSets[0].estimatedTotal > 0) {
                    var location = result.resourceSets[0].resources[0].point.coordinates;
                    $("#latitude").val(location[0]);
                    $("#longitude").val(location[1]);
                    $("form").submit();
                }
            });
        });
    });

然而，当您在其中使用preventDefault时，就无法再使用$('form').submit();继续提交表单。您需要将其作为ajax请求发送，或定义一个条件来使用preventDefault。

可能是这样的：

$(document).ready(function () {

    var submitForReal = false;
        $("form").submit(function (event) {

            var postcode = $.trim($("#Postcode").val());
            if (postcode.length === 0) {
                return false;
            }
    // prevent default form submit
    if(!submitForReal){
    event.preventDefault();
    }else{



            var baseUrl = "http://dev.virtualearth.net/REST/v1/Locations/UK/";
            var apiKey = "myKey";
            var url = baseUrl + postcode + "?key=" + apiKey + "&jsonp=?";
            $.getJSON(url, function (result) {
                if (result.resourceSets[0].estimatedTotal > 0) {
                    var location = result.resourceSets[0].resources[0].point.coordinates;
                    $("#latitude").val(location[0]);
                    $("#longitude").val(location[1]);
                    submitForReal = true;
                    $("form").submit();
                }
            });
          }
        });
    });

- Niklas

---

您还需要排除任何仅需运行一次的代码，因为您可能需要再次运行 $.getJSON(...)。 - matthewnessworthy

非常正确，修改其余部分仅在else条件下运行。虽然，它不应该在表单提交时运行ajax，但现在至少它甚至不会尝试这样做。 - Niklas