Rails 前端试图在没有表格的情况下将自动生成的数据保存到数据库
Rails Frontend Trying to save autogenerated data to database without form
我是 rails 上 ruby 的新手。我正在尝试将自己生成的数据保存到数据库中。我已经调查并发现我打算使用 ajax,但是我看到的所有 videos/forums 都是使用表单而不是刷新页面的 ajax 的例子。我想不按提交自动保存数据
假设项目是新建项目,数据库为postgresql。我已经使用 postgis 创建了一个可以保存地理点的数据库。我创建了另一个页面,其中实现了地图,我可以在其中手动定位位置。我想将手动固定的位置保存到数据库中。
function onMapClick(e) {
alert("You clicked the map at " + e.latlng);
}
mymap.on('click', onMapClick);
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(mymap);
}
mymap.on('click', onMapClick);
e.latlng 包含地理点,但我不知道如果用户单击地图上的任何地方,如何将其保存到数据库中。
您无需提交表单即可使用 ajax。
基本上你想要的是向地图添加事件监听器,当用户点击然后发送 ajax 请求到控制器。
例如,假设您的地图位于 div 内,id 为 my-map。
如果你使用 jQuery 你可以这样写:
$('#my-map').on('click', function() {
# add your logic here
$.ajax({
url: 'your-url',
type: 'POST',
dataType: 'json',
contentType: "application/json; charset=utf-8",
data: JSON.stringify({
'let': data you want to send to backend
})
}
希望有用!
编辑:
在我查看了你的代码后,我发现你的项目中不能有 jQuery,所以你不能使用 jQuery ajax。你需要使用香草 javascript。所以你可以这样写而不是上面的这个片段。
var xhttp = new XMLHttpRequest();
const params = { saving_location: { geoPoints: e.latlng } }
xhttp.onreadystatechange = function() {//Call a function when the state changes.
if(xhttp.readyState == 4 && xhttp.status == 200) {
alert(http.responseText);
}
}
xhttp.open("POST", "/saving_locations", true);
xhttp.setRequestHeader('Content-Type', 'application/json', 'Accept', 'application/json');
xhttp.send(JSON.stringify(params));
同时在您的应用程序控制器中添加 protect_from_forgery with: :null_session
并在您的保存位置控制器中添加 skip_before_action :verify_authenticity_token
。(在 before_action 下)。
这是一个很好的博客 post 为什么你需要这个 https://blog.nvisium.com/understanding-protectfromforgery
请注意,您不想保存数据库,因为您在数据库中的 geoPoints 类型是点类型,并且您将字符串发送到 rails 控制器。我从不使用 rails 中的点,所以在这里我帮不了你。(你总是可以在数据库中添加两列,一列用于经度,一列用于纬度,然后存储数字而不是点)
我是 rails 上 ruby 的新手。我正在尝试将自己生成的数据保存到数据库中。我已经调查并发现我打算使用 ajax,但是我看到的所有 videos/forums 都是使用表单而不是刷新页面的 ajax 的例子。我想不按提交自动保存数据
假设项目是新建项目,数据库为postgresql。我已经使用 postgis 创建了一个可以保存地理点的数据库。我创建了另一个页面,其中实现了地图,我可以在其中手动定位位置。我想将手动固定的位置保存到数据库中。
function onMapClick(e) {
alert("You clicked the map at " + e.latlng);
}
mymap.on('click', onMapClick);
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(mymap);
}
mymap.on('click', onMapClick);
e.latlng 包含地理点,但我不知道如果用户单击地图上的任何地方,如何将其保存到数据库中。
您无需提交表单即可使用 ajax。 基本上你想要的是向地图添加事件监听器,当用户点击然后发送 ajax 请求到控制器。
例如,假设您的地图位于 div 内,id 为 my-map。 如果你使用 jQuery 你可以这样写:
$('#my-map').on('click', function() {
# add your logic here
$.ajax({
url: 'your-url',
type: 'POST',
dataType: 'json',
contentType: "application/json; charset=utf-8",
data: JSON.stringify({
'let': data you want to send to backend
})
}
希望有用!
编辑:
在我查看了你的代码后,我发现你的项目中不能有 jQuery,所以你不能使用 jQuery ajax。你需要使用香草 javascript。所以你可以这样写而不是上面的这个片段。
var xhttp = new XMLHttpRequest();
const params = { saving_location: { geoPoints: e.latlng } }
xhttp.onreadystatechange = function() {//Call a function when the state changes.
if(xhttp.readyState == 4 && xhttp.status == 200) {
alert(http.responseText);
}
}
xhttp.open("POST", "/saving_locations", true);
xhttp.setRequestHeader('Content-Type', 'application/json', 'Accept', 'application/json');
xhttp.send(JSON.stringify(params));
同时在您的应用程序控制器中添加 protect_from_forgery with: :null_session
并在您的保存位置控制器中添加 skip_before_action :verify_authenticity_token
。(在 before_action 下)。
这是一个很好的博客 post 为什么你需要这个 https://blog.nvisium.com/understanding-protectfromforgery
请注意,您不想保存数据库,因为您在数据库中的 geoPoints 类型是点类型,并且您将字符串发送到 rails 控制器。我从不使用 rails 中的点,所以在这里我帮不了你。(你总是可以在数据库中添加两列,一列用于经度,一列用于纬度,然后存储数字而不是点)