使用 jQuery 表单插件提交时 Django 表单出现问题

Question

当使用 jQuery 表单插件提交表单时，目标视图收到的请求与以标准方式（没有 JavaScript）提交表单时收到的请求不同，并且我的 Django 模板未按预期呈现。 当以标准方式提交时，模板会呈现表单错误（“form.[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>,

Answer 1

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

您需要将 json 或 xml 传递回您的 javascript，并以这种方式将错误插入到页面中。

您也可以将表单渲染为 html 的 blob 并覆盖页面上的当前表单（但这有点复杂并且效率不高）

基本上我会推荐仅使用 django 的 request.is_ajax() 方法判断表单是否使用ajax提交，并针对ajax请求返回json