Ruby on Rails AJAX介绍和用法 _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服务器。