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 中的点,所以在这里我帮不了你。(你总是可以在数据库中添加两列,一列用于经度,一列用于纬度,然后存储数字而不是点)