如何使用AJAX监控ruby控制器传递到视图html的实例变量

how to monitor instance variable from ruby controller pass to view html using AJAX

本文关键字：视图 html 变量 实例 AJAX 何使用 监控 ruby 控制器      更新时间：2023-09-26

Hi我想创建一个页面，在那里它可以随着变量的迭代动态地监视（查看）或呈现控制器内的变量值。

view.html.erb

<a id='get_value' class="btn">Run</a>
<ul id="value_variable_from_controller"><ul>
<script>
var getTheValue=function(){
      $.ajax({
        type:'GET',
        url:'/run/results',
        success:function(data,status){
        <!--how to dynamically UPDATE the value_variable_from_controller?-->
        alert("Successfully");
        }
      });
    }
    $(document).on("click","#get_value",getTheValue);
</script>

这是我的控制器，我在这里迭代x的值，

results.rb

x=0
5.times do 
 x++
 sleep(1)
 #HOW TO RETURN THE VALUE OF VAR X EVERY UPDATE?
 #render :json => x, :status => :ok #do i need to have a loop in js?
end

非常感谢。

如果我理解正确，您希望每次在服务器上更新HTML文档中的值，对吗？尽管客户端和服务器之间的状态转换通常由客户端启动，但还是有一些方法可以实现这一点1

为了解决这个问题，websocket是目前最流行的方法——基本上是在客户端和服务器之间打开双向通信管道。当然，对于您的简单示例来说，这可能有些过头了（除非您需要客户端和服务器之间的大量实时交互，否则这当然值得一试），而轮询之类的东西可能更合适（这确实是由客户端发起的），尽管它会生成大量请求。

您还可以考虑只打开一个连接的长轮询。

轮询是一种技术，在这种技术中，客户端以一定的间隔调用请求数据的服务器，这将适用于您的情况。从您发布的代码来看，您似乎也希望可以通过单击#get_value链接来获取值，该链接可以使用与长轮询服务相同的方法。这里有一个例子：

// in your view/javascript
$(document).ready(function() {
  function getValue(trigger) { 
    $.ajax({
      type: 'GET',
      url: '/run/results/',
      success: function(data, status) {
        $('#value_variable_from_controller').text(data.x);
        if(trigger) { 
          setTimeout(getValue(true), 1000); }
      }
    )} // end AJAX
  } // end getValue
  // binding the action to your link as well
  $('#get_value').on('click', function(event) {
    event.preventDefault();
    getValue(false);
  });
  // start the polling
  getValue(true);
}); 
# in your controller
 @x = 0 # initial value
def results
  @x++ # increment every time this action is called
  render @x.to_json
end

通过这种方式，客户端初始化数据流，服务器根据客户端请求改变状态——这是客户端/服务器体系结构中的规范。

1客户端-服务器特性描述了应用程序中协作程序的关系。服务器组件向一个或多个客户端提供功能或服务，这些客户端发起对此类服务的请求。(http://en.wikipedia.org/wiki/Client%E2%80%93server_model)

相关文章：