Ruby on Rails AJAX

2024年12月18日 | 3 分钟阅读

AJAX 简介

AJAX 代表异步 Javascript 和 XML。它是多种技术的混合体，是 Rails 应用程序的重要组成部分。它允许客户端更改，而无需重新加载页面。

让我们看看一个普通的 Web 服务器的工作原理。在键入网址并单击搜索时，浏览器会向服务器发出请求。为了组装搜索到的页面，它会获取所有相关的资源，如 JavaScript 文件、图像和样式表。单击链接时，也会遵循相同的过程。这被称为“请求响应周期”。

JavaScript 向服务器发出请求，并解析响应。它可以更新页面上的信息。通过结合这两种能力，可以用 JavaScript 创建一个网页，该网页可以仅更新自身的一部分，而无需从服务器加载整个页面。这种技术称为 AJAX。

默认情况下，Rails 附带 CoffeeScript。

让我们看一个示例代码，使用 jQuery 库发出 Ajax 请求

$.ajax(url: "/test").done (html) ->
  $("#results").append html

上面的代码从“/test”获取数据，然后将结果追加到 id 为 results 的 div 中。

非侵入式 JavaScript

为了处理附加到 DOM 的 JavaScript，Rails 使用“非侵入式 JavaScript”技术。这被认为是前端社区中最好的技术。

这被称为“非侵入式”JavaScript，因为我们不会将 JavaScript 代码混合到 HTML 中。这样，我们可以通过添加 data 属性轻松地将行为添加到任何链接。很多好处会累加起来，例如整个 JavaScript 都可以在每个页面上提供，这意味着它会在首次页面加载时下载，然后可以在之后的每个页面上缓存。

示例

让我们看一个在删除操作上执行 Ajax 的示例。

步骤 1 创建一个名为 item 的应用程序。

步骤 2 编写以下命令。

步骤 3 编写迁移命令。

步骤 4 通过编写以下代码来更新 aap/views/itemms/index.html.erb 文件中的 destroy 操作

:remote => true, :class => 'delete_itemm' 

<tbody> 
    <% @itemms.each do |itemm| %> 
      <tr> 
        <td><%= itemm.state %></td> 
        <td><%= itemm.capital %></td> 
        <td><%= link_to 'Show', itemm %></td> 
        <td><%= link_to 'Edit', edit_itemm_path(itemm) %></td> 
        <td><%= link_to 'Destroy', itemm, method: :delete, data: { confirm: 'Are you sure?' }, :remote => true, :class => 'delete_itemm' %></td> 
      </tr> 
    <% end %> 
  </tbody>

步骤 5 创建 app/views/itemms/destroy.js.erb 文件。

$('.delete_itemm').bind('ajax:success', function() { 
   $(this).closest('tr').fadeOut(); 
});	

步骤 6 转到 app/controllers/itemms_controller.rb 中的控制器文件，然后编写以下代码。

 def destroy 
   @itemm = Itemm.find(params[:id]) 
   @itemm.destroy 
   
   respond_to do |format| 
      format.html { redirect_to item_url } 
      format.json { head :no_content } 
      format.js   { render :layout => false } 
   end 
   
end

步骤 7 启动 Rails 服务器。

步骤 8 在 localhost 上运行它。