如何使用 AJAX 请求将用户在类变量中的 HTML5 位置从 JavaScript 传递到 Rails 控制器？

Posted 2023-02-23

【中文标题】如何使用 AJAX 请求将用户在类变量中的 HTML5 位置从 JavaScript 传递到 Rails 控制器？

【英文标题】：How to use AJAX request to pass user's HTML5 location in a class variable from JavaScript to Rails controller?

【发布时间】：2021-02-14 14:07:20

【问题描述】：

我正在使用 Ruby (2.7.2p137)、Ruby on Rails (v6.0.3.4) 和 Geokit-rails (2.3.2)。

我正在尝试将用户的位置传递给 Geokit-rails gem 中的方法。为此，我尝试使用 AJAX 请求将用户的 html5 位置从 javascript 传递到 Rails 控制器。

更新：需要类变量而不是实例变量。答案中对此进行了解释。

以下是调用 show_location 方法时来自服务器的错误/响应：

Started GET "/show_location?user_location%5B%7B%3Avalue%3D%3Enil%7D%5D=" for ::1 at 2021-02-21 13:03:18 +0000
Processing by PropertiesController#show_location as HTML
  Parameters: "user_location"=>":value=>nil"=>""
Completed 500 Internal Server Error in 2ms (ActiveRecord: 0.0ms | Allocations: 1235)  
  
NoMethodError (undefined method `*' for nil:NilClass):

app/controllers/properties_controller.rb:77:in `show_location'

以下响应显示在服务器上，因此 index.js 中的 JavaScript 似乎正在运行：

Started POST "/user_long" for ::1 at 2021-02-21 12:57:13 +0000
Started POST "/user_lat" for ::1 at 2021-02-21 12:57:13 +0000
Processing by PropertiesController#user_lat as */*
  Parameters: "lat"=>"53.3200896"
No template found for PropertiesController#user_lat, rendering head :no_content
Completed 204 No Content in 80ms (ActiveRecord: 0.0ms | Allocations: 2885)


Processing by PropertiesController#user_long as */*
  Parameters: "long"=>"-6.2521344"
No template found for PropertiesController#user_long, rendering head :no_content
Completed 204 No Content in 34ms (ActiveRecord: 0.0ms | Allocations: 2340)

这是在浏览器中记录到控制台的 HTML5 位置对象：

Object
latitude: 53.3200896
longitude: -6.2521344
__proto__: Object

下面是我的 index.js 文件中请求 HTML5 位置的 JavaScript：

//function that gets the location and returns it
function getLocation() 
  if(navigator.geolocation) 
    navigator.geolocation.getCurrentPosition(showPosition);
   else 
    console.log("Geo Location not supported by browser");
  


//function that retrieves the position
function showPosition(position) 
  var location = 
    latitude: position.coords.latitude,
    longitude: position.coords.longitude
  

  $(document).ready(function() 
    var lat = $(this).val();
    $.ajax(
        type: 'post',
        url: '/user_lat',
        data: lat: position.coords.latitude,
    success: function(data) 
      console.log(data);
    
    );      
  )

  $(document).ready(function() 
    var long = $(this).val();
    $.ajax(
        type: 'post',
        url: '/user_long',
        data: long: position.coords.longitude,
    success: function(data) 
      console.log(data);
    
    );      
  )

  console.log(location)


//request for location
getLocation();

这是我的 Rails 控制器 (properties_controller.rb) 中的方法，它根据指定坐标按距离显示属性列表：

def show_location

    @user_lat = user_lat

    @user_long = user_long

    @properties = Property.by_distance(:origin => [@user_lat, @user_long])

end

以下是我的属性控制器中用于 AJAX 请求的方法：

  def user_lat
    @user_lat = params["lat"]
  end

  def user_long
    @user_long = params["long"]
  end

我知道 gem 和控制器正在工作，因为当我将坐标硬编码到 show_location 方法中时，它可以成功运行。工作方法如下。

  def show_location
    
    @properties = Property.by_distance(:origin => [53.3200896,-6.2521344])

  end

所以我只需要帮助将用户的位置传递给这个方法。

使用上面的代码，我收到以下错误：

undefined method `*' for nil:NilClass

关于行：

@properties = Property.by_distance(:origin => [@user_lat, @user_long])

任何帮助表示赞赏。

【问题讨论】：

了解如何使用 ajax 将数据从客户端发送到服务器

您需要在showPosition() 中发送它，因为geolocation.getCurrentPosition() 是异步

【参考方案1】：

我想通了。 AJAX 请求正在运行，但是 properties_controller 中的方法将用户的纬度和经度存储到实例变量而不是类变量。

实例变量不能在方法外使用/访问，而类变量可以在类内的任何方法中使用/访问。

这在 properties_controller.rb 中得到纠正：

  def user_lat
    @@user_lat = params["lat"]
    session[:user_lat] = @@user_lat
  end

  def user_long
    @@user_long = params["long"]
    session[:user_long] = @@user_long
  end

然后将类变量传递给 show_location 方法。

def show_location
    @properties = Property.by_distance(:origin => [@@user_lat, @@user_long])
end