javascript - 将带有表单数据的 GeoJSON 数据发布到 Rails 4 应用程序

Question

我有一个创建“事件”的网页。使用简单的表单，用户填写有关事件的一些基本信息:

#new.html.erb
<%= simple_form_for @activity do |f| %>
    <%= f.input :name, label: "Activity name", input_html: { id: "create_activity_name_field" }, hint: "At least 7 characters" %>
    <%= f.input :type, label: "Activity type", input_html: { id: "create_activity_type_field" }, as: :select, :include_blank => false, collection: Activity.types.keys.to_a %>
    <%= f.input :date_field, input_html: { id: "create_activity_date_field" }, as: :string %>
    <%= f.input :time_field, input_html: { id: "create_activity_time_field" }, as: :string %>
    <% f.button :submit, :class => "btn btn-primary" -%>
<% end %>

但是，我也在使用 MapBox 来显示 map 。用户将单击 map 上的点来为事件制定路线。当用户绘制完路线后，我便可以提取该路线的 GeoJSON 数据。

我想使用 javascript 将 GeoJSON 数据与表单数据一起发布。在后端，我会让 Rails 将 GeoJSON 转换为 KML 文件，并使用 Paperclip 将其上传到 Amazon S3。可以保存其余数据，Paperclip 会给我一个 KML 文件的 URL，我可以将其与事件相关联。

我是一个 Rails 新手，我不知道该怎么做，也不知道如何才能克服这个障碍。我考虑过使用 javascript 的 FormData。我对这种方法非常感兴趣，因为实现看起来很简单，但显然它只能真正处理键/值对，而不是复杂的嵌套 JSON 数据。

非常感谢任何建议或策略。非常感谢++，如果有人能给出详细的答案，因为就像我说的，我刚接触 Rails 和 Web 开发几周。

Answer 1

你可能想在这里做的是防止你的表单在 JS 中使用的默认行为:

$('form').submit(function(e) { 
 e.preventDefault();
 var form = $('form');
 var form_data_json = JSON.stringify(form.serializeArray());
 form_plus_geojson = form_data_json.concat(Geojson);

在 JS 中获取数据(这应该很容易，但您并没有真正说明如何从 mapbox 中提取数据)。

然后通过 AJAX 发送回数据(不要忘记两端的验证)

if (my_data_is_not_good/empty/whatever) { 
    console.log('nop')
 } else {
         $.ajax({ 
         type: 'post',
         url: Yourcontrollerpostaction, 
         data: form_plus_geojson,
         dataType: "JSON",

发送数据后，您希望恢复正常的表单提交后行为并提交表单。

         complete: function() { 
            this.off('submit');
            this.submit();
         }
     });
 }

});

然后你只需要在你的 Controller 中解析数据。

def post_controller
  if request.xhr?
    my_hash = JSON.parse(params[:mydata]) 
  else 
    normal post behavior 
  end
end

一切都是快速的伪代码，你可能需要修复一些东西，因为我还没有测试过它，但它应该可以工作。 显然，现在我们在 ajax 中完成所有操作，您不需要 complet 函数回调并可以删除该部分。