javascript - jQuery:在提交表单之前执行一些操作

Question

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

提交表单时，通过单击按钮或在文本框中按回车键，我想进行查找(在本例中，使用 Bing map 对邮政编码进行地理编码)，然后将表单提交到服务器，一如既往。

我目前的方法是将提交事件的处理程序添加到唯一表单，然后在我完成后调用 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();
            }
        });
    });
});

Answer 1

event.preventDefault() 是你的 friend 。您基本上遇到与 here 相同的问题.表单在实际的 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();
                }
            });
          }
        });
    });