rails ajax,Ruby on Rails AJAX介绍和用法

本文概述

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'

true, :class => 'delete_itemm' %>

步骤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

ruby-ajax1.png

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

ruby-ajax2.png

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

ruby-ajax3.png

单击返回按钮。

ruby-ajax4.png

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

ruby-ajax5.png

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

ruby-ajax6.png

下载

下载此示例

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值