Django：能否为同一表单同时设置action属性与jQuery提交事件？

不过这里有几个细节得给你捋清楚，不然可能会踩坑：

• 首先，你写的event.preventDefault();会完全阻止表单的默认提交行为——也就是说，不管action属性填了啥，浏览器都不会自动跳转到那个地址提交表单了，只会执行你自定义的JS逻辑。这其实是个很实用的设计：把action设为有效的后端路由，就能作为JS禁用时的降级方案，保证表单在任何情况下都能正常工作。
• 你代码里的{% url 'javascript:index' %}是错误用法！Django的{% url %}标签是用来生成对应路由的URL的，它没法解析javascript:这种伪协议。如果你的核心需求是用JS处理提交，要么把action设为真实的后端视图路由（作为降级），要么直接写成action="javascript:void(0);"，甚至可以不写action（浏览器默认会提交到当前页面）。
• 另外，你的jQuery代码里$('#table').load('...没写完，记得补全要加载的目标地址（比如后端处理表单后返回的HTML片段接口），这样才能实现无刷新更新页面的效果。

给你个修正后的参考示例：

Django模板代码 #

<form id="login-form" action="{% url 'your_actual_login_view' %}" 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
    
    // 用AJAX提交表单数据，这里复用了form的action和method属性
    $.ajax({
        url: $(this).attr('action'),
        method: $(this).attr('method'),
        data: $(this).serialize(), // 自动序列化表单数据
        success: function(response) {
            $('#table').html(response); // 把后端返回的内容插入到table元素里
            // 或者用$('#table').load('/path/to/table/fragment/'); 加载特定片段
        }
    });
});

这样设置后，当用户浏览器支持JS时，会走AJAX无刷新提交；如果JS被禁用，表单会自动提交到action指定的后端视图，完美兼顾两种场景。

内容的提问来源于stack exchange，提问作者barciewicz