Ruby on Rails AJAX介绍和用法

本文概述

• AJAX简介
• 简洁的JavaScript

AJAX简介

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

让我们看看普通Web服务器的工作情况。在输入网址并单击搜索后, 浏览器会向服务器发出请求。为了组装搜索到的页面, 它会获取所有相关资产, 例如JavaScript文件, 图像和样式表。单击链接时, 将遵循相同的过程。这称为”请求响应周期”。

JavaScript向服务器发出请求, 然后解析响应。它可以更新页面上的信息。结合这两种功能后, 可以使用JavaScript制作网页, 而该JavaScript可以仅更新网页的一部分, 而无需从服务器加载整个页面。这种技术称为AJAX。

默认情况下, Rails附带了CoffeeScript。

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

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

上面的代码从” / test”中获取数据, 然后将结果与结果ID附加到div。

简洁的JavaScript

为了处理附加到DOM的JavaScript, Rails使用” Unobtrusive JavaScript”技术。这被认为是前端社区中的最佳技术。

之所以称为”不干扰” JavaScript, 是因为我们没有将JavaScript代码混入HTML。这样, 我们可以通过添加data属性轻松地将行为添加到任何链接。就像在每个页面上都可以使用整个JavaScript一样, 它带来了很多好处, 这意味着它将在首次加载页面时下载, 然后可以在每个页面上进行缓存。

例子

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

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

rails new item

步骤2编写以下命令。

rails generate scaffold Itemm state:string country:string

步骤3编写migrate命令。

rake db:migrate

步骤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服务器。

rails s

步骤8在localhost上运行它。

http://localhost:3000/itemms

创建一个项目, 如以下快照所示。

它将创建如下所示的项目。

单击返回按钮。

如果你单击”销毁”链接, 则将通过AJAX显示一个弹出窗口。它将从列表中销毁该物品。

单击确定以最终删除该项目。

下载

下载此示例