rails应用ajax之二:使用rails自身支持
考虑另一种情况:
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自身支持的更多相关文章
- MVC3学习:利用jquery+ajax生成二维码(支持中文)
二维码越来越热火了,做电子商务网站,不做二维码,你就OUT了. 一.下载DLL文件(ThoughtWorks.QRCode.dll),并在项目中引用.点此下载 如果你还不知道什么是QRCode二维码, ...
- Ruby Rails正式学习:Ruby on Rails 做个演示项目吧,逐渐完善
项目开始 一. 新建Rails项目 1. 修改一下Gemfile文件(简单修改一下) source 'https://rubygems.org' git_source(:github) { |repo ...
- 对jquery的ajax进行二次封装
第一种方法: $(function(){ /** * ajax封装 * url 发送请求的地址 * data 发送到服务器的数据,数组存储,如:{"username": " ...
- Ruby On Rails 4 hello world,Ruby On Rails上手
有机会再试一试Rails了,仅仅是原来接触的是2,如今已然变成了4,似乎如今的安装比原来会快些.. Rails 4 安装 针对于安装了RVM gem install rails 没有的话应该主 sud ...
- {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)
Django基础七之Ajax 本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 一 Ajax简介 ...
- Ajax实例二:取得新内容
Ajax实例二:取得新内容 通过点击pre和next按钮,从服务器取得最新内容. HTML代码 <div id="slide">图片显示区</div> &l ...
- Ruby on Rails入门——macOS 下搭建Ruby Rails Web开发环境
这里只介绍具体的过程及遇到的问题和解决方案,有关概念性的知识请参考另一篇:Ruby Rails入门--windows下搭建Ruby Rails Web开发环境 macOS (我的版本是:10.12.3 ...
- {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)
{Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) Django基础七之 ...
- JS table内容转成二维数组,支持colspan和rowspan
思路:1.先初始化colspan的数据到数组2.根据rowspan和colspan计算th和td的矩阵二次填充数组 说明:需要引用到第三方库jQuery,table中的th和td行和列跨度必须正确 & ...
随机推荐
- ubunut系统清理系统根目录下缓存文件夹.cache超大导致磁盘不足
在使用中突然发现系统超慢,没有做什么特别的操作. 只好重启下电脑,重启后提示系统空间不足1G.挨个查看文件夹大小,没有发现问题,然后就用Ctrl + H显示隐藏文件夹后再继续逐个查看大小,发现.cac ...
- (NO.00005)iOS实现炸弹人游戏(八):游戏主角(一)
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 最近一直在做另一个RPG游戏,所以本系列迟迟没有更新,上一篇博 ...
- 07 总结ProgressDialog 异步任务
1,ProgressDialog > //使用对象 设置标题 progressDialog.setTitle("标题"); ...
- 发运模块中如何创建Debug 文件
版本11.5.9到12.x A. 针对发运事务处理或者快速发运产生Debug文件 注意:如果通过发运事务处理执行发放,请参考B部分,下面这部分销售订单发放是格外的设置和日志文件. 1. 每一 ...
- web安全认证机制知多少
如今web服务随处可见,成千上万的web程序被部署到公网上供用户访问,有些系统只针对指定用户开放,属于安全级别较高的web应用,他们需要有一种认证机制以保护系统资源的安全,本文将探讨五种常用的认证机制 ...
- UIPassValue页面传值 UI_08(下)
2.从前一个界面到后一个界面 注意:解题思路 葵花宝典:属性传值 第一步:在下一个界面视图控制器的.h文件中定义一个属性 第二步:在push之前将数据存储到属性中 第三步:取出属性中的值让控件 ...
- BottomSheet底部动作条使用
底部动作条 底部动作条(Bottom Sheets)是一个从屏幕底部边缘向上滑出的一个面板,使用这种方式向用户呈现一组功能.底部动作条呈现了简单.清晰.无需额外解释的一组操作. 使用环境 底部动作条( ...
- ECMAScript中所有的函数的参数都是按值传递的
看下面一段代码 function setName(obj){ obj.name='Nicholas'; obj=new Object(); obj.name="Greg"; } v ...
- JavaScript进阶(八)JS实现图片预览并导入服务器功能
JS实现导入文件功能 赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉!(PS:此篇博文是自己在午饭时间所写,为此没吃午饭,这就是程序猿 ...
- Mapreduce 框架解析
MapReduce过程解析 一.客户端 Map-Reduce的过程首先是由客户端提交一个任务开始的. public static RunningJob runJob(JobConf job) thro ...