考虑另一种情况:

1. 页面上半部分显示当前的所有用户,页面下半部分是输入新用户的界面;

2. 每当输入新用户时,页面上半部分会动态更新新加用户的内容;

我们还是用ajax实现,不过这次用rails内部对ajax的支持,其中在服务器端返回一个js脚本,然后在客户端执行。

新建user数据结构 rails g scaffold User name:string age:integer

接着应用数据库视图 rake db:migrate

修改index.html.erb的内容:

<h1>Listing Users</h1>

<ul id="users">
	<%= render @users%>
</ul>
<br />
<%= form_for(@user,remote:true) do |f|%>
	<%= f.label :name %><br \>
	<%= f.text_field :name %>
	<%= f.label :age %><br \>
	<%= f.text_field :age%>
	<%= f.submit %>
<% end %>

同时新建一个局部模板_users.html.erb:

<li><%= user.name%></li>
<li><%= user.age%></li>

接下来增加服务器端对js的支持,很简单:

  def index
    @users = User.all
    @user = User.new
    #puts "******* #{render @user} **********"
  end

  # POST /users
  # POST /users.json
  def create
    @user = User.new(user_params)

    respond_to do |format|
      if @user.save
        format.html { redirect_to @user, notice: 'User was successfully created.' }
        format.js {} #增加这一句
        format.json { render :show, status: :created, location: @user }
      else
        format.html { render :new }
        format.json { render json: @user.errors, status: :unprocessable_entity }
      end
    end
  end

别忘了还要写服务器端的js脚本哦。在view下的users目录中新建一个create.js.erb文件:

$("<%= escape_javascript(render @user)%>").appendTo("#users");
<!--$("#users").append("<p>love</p>");-->

基本完成鸟。整个流程大体如下:

首先用户访问users/index页面,当输入name和age点击提交后会进入create Action,其中的format.js一句提供了ajax支持,它会在浏览器端执行create.js.erb的内容:把新建用户信息异步动态插入页面上半部分。

rails应用ajax之二:使用rails自身支持的更多相关文章

  1. MVC3学习:利用jquery+ajax生成二维码(支持中文)

    二维码越来越热火了,做电子商务网站,不做二维码,你就OUT了. 一.下载DLL文件(ThoughtWorks.QRCode.dll),并在项目中引用.点此下载 如果你还不知道什么是QRCode二维码, ...

  2. Ruby Rails正式学习:Ruby on Rails 做个演示项目吧,逐渐完善

    项目开始 一. 新建Rails项目 1. 修改一下Gemfile文件(简单修改一下) source 'https://rubygems.org' git_source(:github) { |repo ...

  3. 对jquery的ajax进行二次封装

    第一种方法: $(function(){ /** * ajax封装 * url 发送请求的地址 * data 发送到服务器的数据,数组存储,如:{"username": " ...

  4. Ruby On Rails 4 hello world,Ruby On Rails上手

    有机会再试一试Rails了,仅仅是原来接触的是2,如今已然变成了4,似乎如今的安装比原来会快些.. Rails 4 安装 针对于安装了RVM gem install rails 没有的话应该主 sud ...

  5. {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)

    Django基础七之Ajax 本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 一 Ajax简介 ...

  6. Ajax实例二:取得新内容

    Ajax实例二:取得新内容 通过点击pre和next按钮,从服务器取得最新内容. HTML代码 <div id="slide">图片显示区</div> &l ...

  7. Ruby on Rails入门——macOS 下搭建Ruby Rails Web开发环境

    这里只介绍具体的过程及遇到的问题和解决方案,有关概念性的知识请参考另一篇:Ruby Rails入门--windows下搭建Ruby Rails Web开发环境 macOS (我的版本是:10.12.3 ...

  8. {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)

    {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)   Django基础七之 ...

  9. JS table内容转成二维数组,支持colspan和rowspan

    思路:1.先初始化colspan的数据到数组2.根据rowspan和colspan计算th和td的矩阵二次填充数组 说明:需要引用到第三方库jQuery,table中的th和td行和列跨度必须正确 & ...

随机推荐

  1. ubunut系统清理系统根目录下缓存文件夹.cache超大导致磁盘不足

    在使用中突然发现系统超慢,没有做什么特别的操作. 只好重启下电脑,重启后提示系统空间不足1G.挨个查看文件夹大小,没有发现问题,然后就用Ctrl + H显示隐藏文件夹后再继续逐个查看大小,发现.cac ...

  2. (NO.00005)iOS实现炸弹人游戏(八):游戏主角(一)

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 最近一直在做另一个RPG游戏,所以本系列迟迟没有更新,上一篇博 ...

  3. 07 总结ProgressDialog 异步任务

    1,ProgressDialog     >        //使用对象  设置标题             progressDialog.setTitle("标题");   ...

  4. 发运模块中如何创建Debug 文件

     版本11.5.9到12.x A. 针对发运事务处理或者快速发运产生Debug文件 注意:如果通过发运事务处理执行发放,请参考B部分,下面这部分销售订单发放是格外的设置和日志文件. 1.   每一 ...

  5. web安全认证机制知多少

    如今web服务随处可见,成千上万的web程序被部署到公网上供用户访问,有些系统只针对指定用户开放,属于安全级别较高的web应用,他们需要有一种认证机制以保护系统资源的安全,本文将探讨五种常用的认证机制 ...

  6. UIPassValue页面传值&nbsp;UI_08(下)

    2.从前一个界面到后一个界面 注意:解题思路  葵花宝典:属性传值  第一步:在下一个界面视图控制器的.h文件中定义一个属性  第二步:在push之前将数据存储到属性中  第三步:取出属性中的值让控件 ...

  7. BottomSheet底部动作条使用

    底部动作条 底部动作条(Bottom Sheets)是一个从屏幕底部边缘向上滑出的一个面板,使用这种方式向用户呈现一组功能.底部动作条呈现了简单.清晰.无需额外解释的一组操作. 使用环境 底部动作条( ...

  8. ECMAScript中所有的函数的参数都是按值传递的

    看下面一段代码 function setName(obj){ obj.name='Nicholas'; obj=new Object(); obj.name="Greg"; } v ...

  9. JavaScript进阶(八)JS实现图片预览并导入服务器功能

    JS实现导入文件功能       赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉!(PS:此篇博文是自己在午饭时间所写,为此没吃午饭,这就是程序猿 ...

  10. Mapreduce 框架解析

    MapReduce过程解析 一.客户端 Map-Reduce的过程首先是由客户端提交一个任务开始的. public static RunningJob runJob(JobConf job) thro ...