在不刷新/重定向当前页面的情况下提交表单（Python（Django）+ jQuery + Ajax）

7 投票

3 回答

23019 浏览

数据工程师

提问于 2025-04-17 05:17

有没有办法用Python和jQuery Ajax提交表单，而不刷新当前页面？我想要的效果类似于Facebook评论的那种。

我现在在用jQuery Form来做Ajax。但是，它给我的用户体验并不好，因为：

使用jQuery Form提交后，地址栏的URL变成了我提交的表单的地址。
页面确实刷新了。我不喜欢这种情况，尤其是当我已经滚动到页面底部时。提交表单后，页面刷新了，焦点又回到了页面顶部。

我希望我能清楚表达我想要的效果。我需要的东西就像Facebook的评论系统那样。有人评论后，评论提交时页面完全不刷新。

编辑

jQuery代码：

$('#review_submit').submit(function() { 
        var options = {};           
        $(this).ajaxSubmit(options);
        return false; 
});



    $('[name=submit_review_btn]').click(function(){                      
        $('#review_submit').submit();
    });

所以，处理提交的Python代码需要从服务器端重定向页面，把页面重定向到这个URL，'main_URL.com'

根据上面的jQuery代码，结果是：

地址栏显示的URL是：main_URL.com/ form_action_url <--- 这是我设置的提交表单的动作地址。
页面被重定向到我在服务器端设置的页面。

我对这种Ajax体验感到困惑。

3 个回答

我有一个非常动态的网站，使用这种技术到处都是。我们使用的是Dojo，但原理是一样的。就像上面提到的，您的表单需要有一个属性：onsubmit="return false;"（或者在提交的表单对象中），这样页面就不会重新加载。

在服务器端，我们不使用重定向，而是回复JSON（或者XML，或者其他格式），并告诉响应处理程序（比如jQuery、Dojo等）接下来该做什么。

大多数情况下，流程是这样的：

通过xhrPOST调用提交表单
在服务器上进行处理
返回JSON/xml/文本
处理返回的值，让JavaScript决定接下来该做什么

一个具体的例子是这样的：

用户提交病人的生命体征
服务器验证并返回 {success:"已收到生命体征。"} 或 {error:"无效的数字"}
JavaScript的xhr回调处理程序决定接下来该怎么做（关闭对话框、刷新表单以便输入新数据，或者提醒缺少的字段）

补充说明：

这里有一些Python的网页框架链接：链接

这是一个关于在Django中返回JSON的基本教程（配合jQuery）：链接

还有一点需要注意：当你使用JSON时，严格来说，它就不再是AJAX，因为X代表的是XML。

回答于 2025-04-17 由 Python大师

分享举报

如果你能把你的JavaScript代码发上来，回答会简单很多。

你是通过提交按钮来提交表单吗？如果是这样的话，jQuery Form应该能处理好一切，而不会刷新页面。

如果你是用JavaScript来提交表单，你的代码应该像jQuery Form的例子那样：

// attach handler to form's submit event 
$('#myFormId').submit(function() { 
    // submit the form 
    $(this).ajaxSubmit(); 
    // return false to prevent normal browser submit and page navigation 
    return false; 
});

这里的return false;非常重要。否则，用户会被重定向到其他地方。

为了让你的系统正常工作，你需要分两个步骤：

提交评论
把评论添加到其他评论中（或者从服务器获取新评论，然后再添加）

你的当前设置是这样的吗？

回答于 2025-04-17 由 Python大师

分享举报

你可以用jquery的ajaxPost来处理这个问题，而不是使用jquery的表单。这种方法可以让你用.serialize()来获取表单里的参数，并在“表单提交”后返回到一个JS函数，继续做你想做的事情。你可以查看一下jQuery.post()的相关内容。

jsFiddle

这样做不会刷新页面，因为数据是通过AJAX调用发送的。这让你可以在数据发送成功后运行一个函数，做你想做的任何事情（如果发送的数据有返回，你可以在这里使用...如果你想在这个请求成功后再做另一个GET或POST请求，也可以在这里进行...依此类推）。

回答于 2025-04-17 由 Python大师

分享举报

在不刷新/重定向当前页面的情况下提交表单（Python（Django）+ jQuery + Ajax）

3 个回答

撰写回答