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

任何使用jQuery Ajax使用Python提交表单而不刷新当前页面的方式？我希望最终结果与Facebook评论的工作方式类似。提交表单而不刷新/重定向当前页面（Python（Django）+ jQuery + Ajax）

我目前使用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的代码中所示，结果是：

该URL出现在地址栏中：main_URL.com/ form_action_url < ---这是我设置用于提交表单的表单操作。
页面重定向到我在服务器端设置的页面。

我很困惑这个Ajax的经验。

来源

2011-10-30 MrCooL

这就是ajax应该做的事情，具体取决于你设置的方式。这听起来像你没有禁用表单提交，所以当你点击提交按钮时页面被刷新。 –

嗨，我编辑了我的问题 – MrCooL

如果您使用AJAX提交表单，为什么要让服务器在某处重定向？我必须说，我不完全明白你在做什么。即使你想这样做，你也不能简单地从服务器返回一个HttpResponseRedirect。我现在可以看到JS代码（我认为你已经在加载文档后将jQuery Form初始化了）并且看起来是正确的。不过，它不应该在任何地方重定向。 –

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

jsFiddle

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

来源

2011-11-01 11:27:49 g19fanatic

非常感谢！这正是我想要的。到目前为止，我只用Google Chrome测试了这一点。 – MrCooL

如果您发布了您的JavaScript代码，回答起来会更容易。

您是否使用提交按钮提交表单？如果是这样，那么jQuery Form应该处理所有事情，而不是刷新页面。

如果您要提交在JavaScript的形式，你的代码应该看起来像jQuery的形式实例：

// 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;在这里非常重要。否则，用户将被重定向。

对你系统的正常工作，你需要做的两相：

提交评论
追加到其他评论中所注释（或获取来自服务器的新意见，然后追加）

这就是你目前的设置的样子吗？

来源

2011-10-30 16:10:21

嗨，我编辑了我的问题 – MrCooL

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

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

大部分的时间，其过程是：

后与xhrPOST呼叫
做服务器上的工作
返回JSON/XML /文本
手柄的形式返回值并有javascript决定怎么做

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

用户提交病人的生命体征
Server验证，并返回{成功：“生命体征收到。”}或{错误：“无效号码”}
的JavaScript XHR回调处理决定下一步该怎么做（关闭对话框，刷新形式的新条目或提醒注意缺少的字段）

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

链接到一个基本的教程Ø n的Django的返回JSON（使用jQuery）link

另外一个提示：当您使用JSON，它是技术上不再AJAX，作为X代表XML。

来源

2011-11-04 02:17:39

Hi @Nick，你知道如何使用Python从服务器端返回JSON/XML /文本？您可以展示的任何快速示例？提前致谢！ – MrCooL

好吧，我们正在使用Django，所以不同的python（或ruby，w/e）框架看起来会不同，但在Django中它会是这样的： 'def myview（response）： ...做一些工作 answer =“{success：'Vitals received'}” return HttpResponse（answer） ' 这是使用Django返回JSON的最基本的方法，原理是一样的，您只需返回'{}'中的内容到您的回应流。在真实环境中，您可能会使用Python附带的json模块（或者您正在使用的任何语言）。 –

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

回答

相关问题