Question

使用带有jQuery Ajax的Python，无需刷新当前页面的任何方式提交表单？我希望最终结果与Facebook评论的工作方式类似。

我目前正在使用jQuery Form来执行Ajax。但是，它没有给我我想要的用户体验，因为：

使用jQuery表单提交后，地址栏上的网址刷新为我提交的表单。
确实刷新了页面。我特别不喜欢它，让我说我在页面底部向下滚动到最大值。提交表单后，它刷新了页面，焦点被重定向到页面顶部。

我希望我已经明确表达了我想要的东西。我需要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代码后，结果为：

网址显示在地址栏上：main_URL.com/ form_action_url＆lt; ---这是我设置提交表单的表单操作。
页面重定向到我在服务器端设置的页面。

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

Answer 1

你可以通过使用jquery的ajaxPost而不是使用jquery的形式来处理这个问题。这将允许您.serialize()表单（获取参数）并能够返回到JS函数，以便在“表单提交”后执行您想要的操作。查看jQuery.post()

jsFiddle

这不会刷新页面，因为帖子是通过AJAX调用发生的。它允许你在帖子通过之后运行一个函数并执行你想要的（如果帖子返回数据，它将在这里可用...如果你想在这个之后做另一个GET或POST，它可以在这里完成......等等）

Answer 2

如果您发布了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;在这里非常重要。否则，将重定向用户。

为了让你的系统工作，你需要它来做两阶段：

提交评论
将评论附加到其余评论（或从服务器获取新评论然后追加）

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

Answer 3

我有一个非常动态的网站，在整个地方使用这项技术。我们使用Dojo，但原则是相同的。就像上面的海报所说，你的表格需要有onsubmit =“return false;”作为属性（或在它提交的表单对象中），以便不重新加载页面。

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

大多数情况下，过程是：

使用xhrPOST调用发布表单
在服务器上工作
返回JSON / xml / text
处理该返回值并让javascript确定要执行的操作

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

用户提交患者生命体征
服务器验证并返回{success：“Vitals received。”}或{error：“Invalid number”}
javascript xhr回调处理程序确定下一步操作（关闭对话框，刷新新条目的表单或引起对丢失字段的注意）

编辑：链接到一些Python Web框架：link

链接到Django中返回JSON的基础教程（使用JQuery）link

另一个注意事项：当您使用JSON时，技术上不再是AJAX，因为X代表XML。

提交表单而不刷新/重定向当前页面（Python（Django）+ jQuery + Ajax）

3 个答案: