时间戳

首页 > 解决方案 > Rails前端尝试将自动生成的数据保存到没有表单的数据库中

ruby-on-rails - Rails前端尝试将自动生成的数据保存到没有表单的数据库中

问题描述

我是 ruby​​ on rails 的新手。我正在尝试将自己生成的数据保存到数据库中。我调查并发现我打算使用 ajax，但是我看到的所有视频/论坛都是使用表单而不是刷新页面的 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 保存地理点，但如果用户单击地图上的任何位置，我不知道如何将其保存到数据库中。

标签： ruby-on-railspostgresqlpostgis

解决方案

您不需要提交表单即可使用 ajax。基本上你想要的是向地图添加事件侦听器，当用户单击时，将 ajax 请求发送到控制器。

例如，假设您的地图位于 id 为 my-map 的 div 中。如果你使用 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 下）。这是一篇很好的博客文章，为什么你需要这个https://blog.nvisium.com/understanding-protectfromforgery

请注意，您不想保存数据库，因为您在数据库中的 geoPoints 类型是点类型，并且您将字符串发送到 rails 控制器。我从不使用rails中的点，所以在这里我无法为您提供帮助。（您始终可以在db中添加两列，一列用于经度，一列用于纬度，然后存储数字而不是点）

推荐阅读