JavaScript / jQuery - 如何使用js处理表单然后在不使用ajax的情况下提交它？

发布于 2024-12-17 02:36:58 字数 1226 浏览 1 评论 0原文

我正在使用 Python / Django 编写一个网站，目前正在通过 geopy 模块进行服务器端地理编码。我想通过 Javascript 逐步增强地理编码（以确保我不会达到 Google 的每日地理编码请求/用户限制），然后将 Javascript 地理编码的结果传递到服务器进行进一步处理。

我目前正在做的是使用 javascript 和 Google 地理编码 API 来获取（纬度、经度）坐标并将它们作为隐藏输入添加到我的表单中。但是，我不确定如何使用（lat，lon）提交此表单而不陷入无限循环。我宁愿不通过 Ajax 发送此消息，因为对于这个特定页面，99.9% 的页面需要刷新，并且我希望设计尽可能简单，因此 Ajax 会显得有些过分。

我尝试将 event.preventDefault() 放入 if 语句中测试隐藏的纬度/经度变量的存在，但无法使其工作。

有什么想法吗？提前致谢！瓦西里

$(document).ready(function() {

var g = new GoogleGeocode();  

//bind event handler
$('#address_form').bind('submit', function(event){

    //get address from form
    var address = $('#id_address').val();

    event.preventDefault();

    //get lat/lon
    g.geocode(address, function(data) {  
        if(data != null) {  
            alert(data.longitude + " " + data.latitude);  
            //insert lat and lon into the form
            $('<input type="hidden" id="lat" name="lat" value="' + data.latitude + '"/>').appendTo('form');
            $('<input type="hidden" id="lon" name="lon" value="' + data.longitude + '"/>').appendTo('form');
        } else {  
            alert('ERROR! Unable to geocode address');  
        }
    });  
});
});

原文

I am writing a website using Python / Django, and am currently doing server-side geocoding through the geopy module. I would like to implement a progressive enhancement of doing the geocoding via Javascript (to make sure I don't hit Google's daily limit of geocode requests / user), and then pass the results of the Javascript geocoding to the server for further processing.

What I am currently doing is using javascript and the Google geocoding API to get the (lat, lon) coordinates and add them as hidden inputs into my form. However, I am not sure how to submit this form with the (lat, lon) without running into an infinite loop. I would rather stay away from sending this via Ajax because for this particular page 99.9% of the page needs to be refreshed, and I would like to keep the design as simple as possible, so Ajax would be overkill.

I played around with putting the event.preventDefault() into an if statement testing for existence of the hidden lat/lon variables, but could not get it to work.

Any ideas? Thanks in advance! Vasiliy

$(document).ready(function() {

var g = new GoogleGeocode();  

//bind event handler
$('#address_form').bind('submit', function(event){

    //get address from form
    var address = $('#id_address').val();

    event.preventDefault();

    //get lat/lon
    g.geocode(address, function(data) {  
        if(data != null) {  
            alert(data.longitude + " " + data.latitude);  
            //insert lat and lon into the form
            $('<input type="hidden" id="lat" name="lat" value="' + data.latitude + '"/>').appendTo('form');
            $('<input type="hidden" id="lon" name="lon" value="' + data.longitude + '"/>').appendTo('form');
        } else {  
            alert('ERROR! Unable to geocode address');  
        }
    });  
});
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

云醉月微眠 2024-12-24 02:36:58

一旦您确定必须提交表单，您应该取消绑定表单submit事件处理程序。试试这个

$(document).ready(function() {

var g = new GoogleGeocode();  

//bind event handler
$('#address_form').bind('submit', function(event){

    //get address from form
    var address = $('#id_address').val();

    event.preventDefault();

    //get lat/lon
    g.geocode(address, function(data) {  
        if(data != null) {  
            alert(data.longitude + " " + data.latitude);  
            //insert lat and lon into the form
            $('<input type="hidden" id="lat" name="lat" value="' + data.latitude + '"/>').appendTo('form');
            $('<input type="hidden" id="lon" name="lon" value="' + data.longitude + '"/>').appendTo('form');

             $('#address_form').unbind('submit').submit();

        } else {  
            alert('ERROR! Unable to geocode address');  
        }
    });  
});

});

You should unbind the form submit event handler once you are sure you have to submit the form. Try this

$(document).ready(function() {

var g = new GoogleGeocode();  

//bind event handler
$('#address_form').bind('submit', function(event){

    //get address from form
    var address = $('#id_address').val();

    event.preventDefault();

    //get lat/lon
    g.geocode(address, function(data) {  
        if(data != null) {  
            alert(data.longitude + " " + data.latitude);  
            //insert lat and lon into the form
            $('<input type="hidden" id="lat" name="lat" value="' + data.latitude + '"/>').appendTo('form');
            $('<input type="hidden" id="lon" name="lon" value="' + data.longitude + '"/>').appendTo('form');

             $('#address_form').unbind('submit').submit();

        } else {  
            alert('ERROR! Unable to geocode address');  
        }
    });  
});

});

回复收藏 0 原文