我的页面上有一个表单。该表单包含一个文本框和一个提交按钮。
提交表单后,通过单击按钮或在文本框中按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(); } }); }); });
event.preventDefault()是你的朋友在这里。在完成实际的ajax请求之前,将提交表单。您需要停止表单提交,然后执行ajax,然后进行表单提交。如果您没有在其中停靠,它将一直运行,唯一有时间要做的就是提交表单。
event.preventDefault()
$(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。
preventDefault
$('form').submit();
大概是这样的:
$(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(); } }); } }); });