gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 16:38:04 27 4
gpt4 key购买 nike

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

#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 开发几周。

最佳答案

你可能想在这里做的是防止你的表单在 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 函数回调并可以删除该部分。

关于javascript - 将带有表单数据的 GeoJSON 数据发布到 Rails 4 应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32419217/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com