使用jQuery表单插件提交时,Django表单的问题

时间:2009-12-10 17:16:29

标签: jquery django forms request submit

使用jQuery表单插件提交表单时,目标视图收到的请求与以标准方式(没有javascript)提交表单时收到的请求不同,我的Django模板无法按预期呈现。 当以标准方式提交时,模板呈现表单错误(“表单。[field_name] .errors)”,而在通过javascript提交时则不会。 使用javascript提交,我如何获得允许使用标准提交呈现模板的请求? 在这两种情况下收到的请求对象之间的代码和差异如下所示。

感谢 jul

javascript代码:

var is_geocoded = false;
var interval;

$(function(){

    $("#submit").click(function() {  
        var options = { 
            beforeSubmit:  getPosition,  // pre-submit callback 
            success:       showResponse  // post-submit callback       
        }; 

        // bind form using 'ajaxForm' 
        $('#addresto').ajaxForm(options); 
    });  

});

function getPosition() {

    var geocoder =  new GClientGeocoder();
    var country = $("#id_country").val();
    var city = $("#id_city").val();
    var postal_code = $("#id_postal_code").val();
    var street_number = $("#id_street_number").val();
    var street = $("#id_street").val();
    var address = street_number+", "+street+", "+postal_code+", "+city+", "+country;

    geocoder.getLatLng( address, function(point) {

        if (point) {

            $("#id_latitude").val(point.lat())
            $("#id_longitude").val(point.lng())
            is_geocoded = true;
        } else {
            is_geocoded = true;
        }
    });

    interval = setInterval("doSubmit()", 500);

    return false;
}

function doSubmit() {

    if (is_geocoded) {
        $("#addresto").ajaxSubmit();
        clearInterval(interval);
    }
}

Django模板代码:

<form id="addresto" action="" method="POST">

<p><label for="id_name">Name:</label>{{form.name.errors}} {{ form.name }} </p>
<p><label for="id_country">Country:</label>{{form.country.errors}} {{ form.country }} </p>

<!-- more stuff -->

<p style="clear: both;"><input type="Submit" id="submit" value="Submit" /></p>
</form>

以下是视图与标准提交和javascript提交收到的请求之间的区别:

xxx@xxx:~$ diff javascript_submit standard_submit 
7c7
<  'CONTENT_TYPE': 'application/x-www-form-urlencoded; charset=UTF-8',
---
>  'CONTENT_TYPE': 'application/x-www-form-urlencoded',
24c24
<  'HTTP_ACCEPT': '*/*',
---
>  'HTTP_ACCEPT': 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8',
28d27
<  'HTTP_CACHE_CONTROL': 'no-cache',
33d31
<  'HTTP_PRAGMA': 'no-cache',
36d33
<  'HTTP_X_REQUESTED_WITH': 'XMLHttpRequest',
70c67
<  'wsgi.input': <socket._fileobject object at 0x891d064>,
---
>  'wsgi.input': <socket._fileobject object at 0x898b09c>,

1 个答案:

答案 0 :(得分:4)

通过ajax提交时未出现错误的原因是您没有刷新页面。

你需要将json或xml传回你的javascript并将错误插入页面。

您也可以将表单渲染为一个html的blob并覆盖页面上的当前表单(但这有点复杂,效率不高)

基本上我只会使用django的request.is_ajax()方法来确定表单是否使用ajax提交,并返回json以获取ajax请求