rails form ajax,在Rails中实现分布提交表单

前言

产品经理期待能够分布提交表单。第一次做这方面的，觉得有点难。

在这次，我对它的处理是提交了三次表单。

然而后来在对这个表单编辑时，又有做成一个表单。所以，理论上三次分布只提交一次表单也是可行的。

实现

介绍利用到的数据模型

Group －> Roles

一个Group中有若干的Role，而Group的创建会随之建立一个属于创建者的Role。

在实现分布提交前，已经有可以直接使用的Model了，不过我也对它有一点点细节方面的修改。

实现中会遇到的难题

在controller中的处理还是满简单的，与一次性提交的表单的区别是，将一些格式限制暂时的忽略掉。

group.rb

validates :group_xxx, presence: { message: "..." },

format: { with: xx_xx, message: "..." },

length: {

minimum: num,

too_short: "..."

},

unless: :skip_validate_group_code

groups_controller.rb

@group.update_attributes(group_params.merge({skip_validate_group_code: false}))

使用Ajax做提交，与controller的配合。利用controller的render属性把新的表单传递到Ajax的data，替换掉原来的表单。

之所以要选择Ajax做处理是因为，表单输入错误的时候，给予其错误提示。

groups_controller.rb

if @group.save

render partial: 'form_one'

eles

render partial: 'form_two'

end

js

$(document).ready(function(){

$('body').delegate('#form_one, #form_two, #form_three', "ajax:success", function(event, data, status, xhr){

$('.modal-dialog').html($(data));

});

});

html

_form_one.html.erb

做完这部分后，发现了在第三次表单提交后，对于它的期望是跳转到另外一个页面的。然而因为remote这个属性，它一律把读取的页面都会传递给ajax做处理。

所以，在controller中第三个表单提交成功后，传递的仅仅是一个id。我在js中为他传递的内容做了判断，以此来选择是替换内容或者是跳转页面。

group_controller.rb

if @role.save

render id: id

else

render 'form_three'

end

js

// Redirect if returned data is object

if (typeof data == 'object') {

return location.href = "..." + data.group_id;

}

// Show form modal if returned data is HTML

if ($(data).find('.navbar-brand').length == 0) {

$('.modal-dialog').html($(data));

}

后续

在这件事情过去后一个月。产品经理本着精益求精的心态(喂，让我重新做这个功能。一开始是要求在第三步的时才提交表单，而不是分三次提交。后来跟经理讨论需要，把它改为第二次和第三次分别提交了两次。

对于Controller 与 view 传递数据的理解

在我们访问一个新的页面的时候，会在 controller 里面找到 action 对应的方法。它会传递全局变量给 view。 view 传递给 controller 数据只能通过 params。

但是 controller 使用 render 读取页面是没有刷新的，那么 view 被打开也不会请求相应的 action 方法。view 将继承 controller 给予的全局变量。

总而言之就是 controller 与 view 是会互相传递数据的。 controller 传给 view 的是全局变量，而 view 传递给 controller 的是 params。