Question

我的模板中有一个表单，它将提交的数据发送到"{% url 'javascript:index' %}"：

<form id="login-form" action="{% url 'javascript:index' %}" method="POST">
    {% csrf_token %}
    {{ form }}
    <input id="create_table" type="submit" value="View results" />
</form>

但是我还有一个jQuery脚本，它被分配到这样的相同形式：

$('#login-form').on('submit', function(event){
    event.preventDefault();
    console.log("form submitted!");  // sanity check
    $('#table').load('http://127.0.0.1:8000/results',function(){
    $('#go_back').remove();
    }); 
});

问题是，表单永远不会发布到"{% url 'javascript:index' %}"，因为首先执行jQuery脚本。

有没有办法按顺序提交表单：首先将数据发送到"{% url 'javascript:index' %}"，然后运行脚本？

Answer 1

您应该使用AJAX来执行此操作。

$('#login-form').on('submit', function(event){

    event.preventDefault();

    var myform = document.getElementById('login-form');
    var fd = new FormData(myform );

    var post_url = $(this).find('#login-url').val();

    var csrftoken = getCookie('csrftoken');
    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
        }
    });

    $.ajax({
        url : post_url,
        data : fd,
        cache: false,
        processData: false,
        contentType: false,
        type : "POST",
        success : function(data) {
            console.log("form submitted!");  // sanity check
            $('#table').load('http://127.0.0.1:8000/results',function(){
                $('#go_back').remove();
            }); // <-- Add it Here!
        },
        error : function() {
            console.log("something bad happened")
        }
    });

});

我不知道你的代码是做什么的，但我把它作为演示包含在成功调用中。不知道它是否会起作用。

注意1：如果您使用的是AJAX，请不要将URL放在“action”中。它在技术上并不重要，但它是一个很好的习惯，不会以你不打算工作的方式对事物进行编码。而是将url添加为表单的隐藏输入，然后您可以在JQuery / AJAX调用期间获取它，即

<input type="hidden" id="login-url" value="{% url 'javascript:index' %}" />

注意2：您可以使用

从视图中返回数据

return JsonResponse({'hello': 'world'})

然后您可以通过data.hello在成功通话中访问，这将返回'world'。

注意3：大多数浏览器现在都支持FormData，但我不完全确定旧版本的Internet Explorer。

无论哪种方式，您都可以通过标准字典来发布数据。只需定义像

这样的字典

fd = {variable_name: variable_value}

并删除

cache: false,
processData: false,
contentType: false,

来自AJAX电话的

。

Django：我可以同时拥有＆＃34; action =＆＃34;和jQuery分配到相同的表单？

1 个答案: