`
black_star
  • 浏览: 33158 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

ruby on rails(9) -- AJAX(1)

阅读更多
   火热的Ajax啊,全世界的程序员都在讨论它(c,c++请飘过),终于我要开始学习啦。
    首先是代码重用,rails为了使逻辑和表现分开,采取了一些列的方法,其中之一是,不要把逻辑写在表现页面上。因为,我们要分离拉。局部的代码,就采用partical。如<%= render(:partial =>"cart_item", :collection => cart.items)%>,:partial 的参数所对应的页面就是在参数名前加_.因此对应的页面为_cart_item.html.erb.
   修改add_to_cart.html.erb
 
<table>
 <%= render(:partial => "cart_item",:collection => @cart.items)%> 
  <tr class="total-line">
    <td colspan="2">Total</td>
    <td class="total-cell"><%= number_to_currency(@cart.total_price) %></td>
  </tr>
</table>
  

  由于:partial 所指的为cart_item.因此,编写页面_cart_item.html.erb,:collection嘛意思么
  
   _cart_item.html.erb
 
  <tr>
     <td><%=h cart_item.quantity %>&times;</td>
     <td><%=h cart_item.title%></td>
     <td class="item-price"><%= number_to_currency(cart_item.price)%>
  </tr>
  

  里面的变量名和:partial参数一致
  同理,修改layout/store_html.erb页面
 
  	<div id="side">
	   <div id="cart">
	<%= render (:partial => "cart",:object => @cart)%>		   </div>
  

  bject又是嘛意思么,这些个参数,刷新@cart?
   然后编写 _cart.html.erb ,用于计算total_price
  
   <div class="cart-title">Your Cart</div>
   <table>
	<%= render(:partial =>"cart_item", :collection => cart.items)%>
	<tr class="total-line">
	<td colspan="2">Total</td>
	<td class="total-cell"><%= number_to_currency(cart.total_price)%></td>	
	</tr>	
</table>
<%=button_to "Empty Cart", :action =>:empty_cart%>
   

    @cart未定义,所以在store_controller里面
    
      def index
  	@products = Product.find_products_for_sale
  	@cart = find_cart
      end
     

    然后修改css亦即重定向。即可看到购物车在左边,原来的废掉了。css使购物车放右边,就是平时网页上的购物车了。
  ps:partial 如果对应的逻辑页面多,能否写到一个上去,或者有什么方法便于管理多个逻辑页面,不能就这么放在view下吧

   接下来是正题,ajax
   首先引入rails的js包,layout/store_controller.html.erb导入  <%= javascript_include_tag :defaults%>
   然后删除index.html.erb <%=button_to ... %>,改为
 
  <%form_remote_tag :url => {:action => :add_to_cart,:id => product}   do%>
  <%= submit_tag "Add to Cart"%>
  <%end%>
  

  form...tag ,表示要用<form>,remote表示远程调用Ajax。url 服务程序调用地址 do,end form基本格式
   然后修改add_to_cart action 如下
  
   else
  	@cart = find_cart
  	@cart.add_product(product)
  	respond_to{|format| format.js}
    end
   

   repond_to 根据不同的格式类型采取不同的处理方式。客户端发送给浏览器式,头部Accept-Type: text/xml,指明格式,浏览器根据这个,采取不同的处理方式,未指明,默认text/html。
   format.js指向index.rjs
   然后编辑view/store/add_to_action.js.rjs。为什么在这个目录?
   page.replace_html("cart",:partial => "cart",bject => @cart)
   page,js产生器,page_html()取代
<div id="cart">
<%= render (:partial => "cart",:object => @cart)%>
</div>
参数必须一致
  • 大小: 8.2 KB
分享到:
评论

相关推荐

    《Ruby on Rails Web开发学习实录》

    全书共分17章,主要内容包括:搭建ruby on rails开发平台、ruby语言的基础知识(像控制语句、面向对象、数组和块等)、文件处理、数据库持久化、rails控制器和路由、视图模板以及发送邮件和ajax等。 《ruby on rails ...

    Beginning Ruby on Rails

    Ruby on Rails is the revolutionary online programming tool that makes creating functional e-commerce web sites faster and easier than ever. With the intuitive, straightforward nature of Ruby and the ...

    Ajax-rails-ajax-demo.zip

    Ajax-rails-ajax-demo.zip,ruby on rails的ajax演示项目,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页的...

    Ajax on Rails

    Learn to build dynamic, interactive web applications using the two most important approaches to web development today: Ajax and the phenomenally efficient Ruby on Rails platform. This book teaches ...

    jquery-treetable-ajax-example:带有 D&D 支持的 AJAXified jQuery treeTable 表的 Ruby on Rails 示例

    它在服务器端使用 Ruby on Rails 和 SQLite。 文件 app/views/nodes/index.html.erb 包含有趣的 Javascript 位。 当节点扩展时,它使用 jQuery.ajax 函数下载远程节点。 当节点在分支之间移动 (D&D) 时,它还使用 ...

    使用Ruby on Rails开发LBS网站初探示例代码

    这几天一直在学习使用RoR(Ruby on Rails),想建立一个功能全面一点的LBS(Location Based Service)网站。但是对于我这个RoR的初学者(仅有几天时间)来说,毕竟太复杂了。因此本文试图简化原来的设计思路,抛弃一切...

    在Ruby on Rails中使用AJAX的教程

    主要介绍了在Ruby on Rails中使用AJAX的教程,文章来自于IBM官方网站技术文档,需要的朋友可以参考下

    rails-ranger::cowboy_hat_face:坚定的Ruby on Rails API的AJAX客户端

    护林员探索Ruby on Rails API的路由和路径| Rails Ranger是之上的薄薄一层,它为您提供了一个自以为是的界面,以查询使用Ruby on Rails构建的API。主要特点遵循Ruby on Rails路由约定的URL构建在前端和API之间交换...

    Agile Web Development With Ruby On Rails

    Agile Web Development With Ruby On Rails

    Ruby_on_Rails_Web_开发之旅[清晰文字pdf].part1

    本书从Ruby和Rails的历史讲起,以在Rails框架上克隆故事共享网站digg.com为例,详细讲述了Ruby和Rails的安装过程、框架组成部分、与AJAX和Web 2.0技术结合、安全措施、高级话题和扩展功能等。本书带领读者运用最新...

    Ruby on Rails Web开发之旅.pdf【第二部分】

    第1章 Ruby on Rails简介 1.1 历史 1.2 开发原则 1.2.1 惯例优先 1.2.2 不重复自我 1.2.3 灵活的开发 1.3 构建wleb应用程序示例 1.3.1 digg简介 1.3.2 应用程序示例的特性 1.4 小结 第2章 技术准备  2.1 所需软件...

    Ruby on Rails Web开发之旅.pdf【第一部分】

    第1章 Ruby on Rails简介 1.1 历史 1.2 开发原则 1.2.1 惯例优先 1.2.2 不重复自我 1.2.3 灵活的开发 1.3 构建wleb应用程序示例 1.3.1 digg简介 1.3.2 应用程序示例的特性 1.4 小结 第2章 技术准备  2.1 所需软件...

    Ruby on Rails Web开发之旅.pdf【第三部分】

    第1章 Ruby on Rails简介 1.1 历史 1.2 开发原则 1.2.1 惯例优先 1.2.2 不重复自我 1.2.3 灵活的开发 1.3 构建wleb应用程序示例 1.3.1 digg简介 1.3.2 应用程序示例的特性 1.4 小结 第2章 技术准备  2.1 所需软件...

    Ruby.on.Rails.Enterprise.Application.Development

    Ruby.on.Rails.Enterprise.Application.Development

    curso-rails-feevale:Feevale 的 Ruby on Rails 课程

    #Feevale 的 Ruby on Rails 课程##Ruby历史安装语言(面向对象、块、模块和语法) 宝石交互式控制台 (irb) 元编程##Rails - 概述目前网络开发配置约定MVC ##Rails - 模型(ActiveRecord + ActiveModel) 迁移验证...

    get-started-with-ruby-on-rails:“ Ruby on Rails入门”课程的源代码

    Ruby on Rails是一个开放源代码框架,可让您快速轻松地构建Web应用程序。 这个框架的设计考虑了开发人员的生产力和幸福感。 使用Rails,您可以通过强大的约定,合理的默认值和大量的库来轻松创建Web应用程序。 如果...

    跨越边界1:Ajax on Rails

    您一定知道Ajax是这样一种编程技术,它...Ruby on Rails框架和Ajax的完美集成所产生的力量在一定程度上促成了该框架的繁荣。本文全面介绍了两个简单的Ajax例子,延着这个思路介绍了Ruby/Ajax这一组合如此成功的原因。

    rails-react-auth:使用Ruby on Rails和React进行身份验证的样本应用程序

    使用Rails和React进行身份验证本教程显示了一个使用Ruby on Rails,React,React Router和JWT(JSON Web令牌)进行身份验证的示例。 它是使用以下命令创建的,该命令在Ruby on Rails中配置React: $ rails new ...

Global site tag (gtag.js) - Google Analytics