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.jsondef create@user = User.new(user_params)respond_to do |format|if @user.saveformat.html { redirect_to @user, notice: 'User was successfully created.' }format.js {} #增加这一句format.json { render :show, status: :created, location: @user }elseformat.html { render :new }format.json { render json: @user.errors, status: :unprocessable_entity }endendend

别忘了还要写服务器端的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自身支持相关推荐

Ajax (部分二：prototype.js代码后半部分)自己做的，总结页面向后台传Form值、单个值和后台向前台传一个或是一组值...
2019独角兽企业重金招聘Python工程师标准>>> Ajax (部分二:prototype.js代码后半部分)自己做的,总结页面向后台传Form值.单个值和后台向前台传一个或是一 ...
Ruby On Rails 4 hello world,Ruby On Rails上手
有机会再试一试Rails了,只是原来接触的是2,现在已然变成了4,似乎现在的安装比原来会快些.. Rails 4 安装针对于安装了RVM gem install rails 没有的话应该主 sudo ...
Ajax 学习二 Accordion和AccordionPane 淡入淡出效果和AutoSize自动尺寸
Ajax 学习二 Accordion和AccordionPane 淡入淡出效果和AutoSize自动尺寸源代码 View Code <%@ Page Language="C#&qu ...
AJAX（二）ResponseText、onreadystatechange 事件、readyState、status、ASP和PHP、数据库实例、XML实例
AJAX(二)ResponseText.onreadystatechange 事件.readyState.status.ASP和PHP.数据库实例.XML实例文章目录 AJAX(二)Response ...
SAP UI5 应用开发教程之八十二 - 采用 OPA5 开发支持页面跳转的 SAP UI5 集成测试用例试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
惠普打印机、扫描仪二次开发、支持状态获取
一.环境介绍运行系统环境: xp .win7.win8.win10. 目前测试支持的是HP Pro 系列的打印机,比如LaserJet Pro, OfficeJet Pro,PageWide等等,理 ...
C#版OPOS打印(基于北洋OPOS SDK二次开发包,支持EPSON和北洋、佳博、商祺等支持标准ESC/POS指令的POS打印机)
C#版OPOS打印基于北洋OPOS SDK二次开发包,支持EPSON和北洋.佳博.商祺等支持标准ESC/POS指令的POS打印机支持并口,串口,网口,USB口,驱动方式等多种端口支持开关钱箱 ...
Android实现网络下载二（多任务下载--支持断点续传）
Android实现网络下载二(多任务下载–支持断点续传) 上文中说了单任务的断点续传,这篇文章就说说多任务下载,不啰嗦了,直接进入正题. 附上demo源码,GitHub代码后续上传,这里的链接还是cs ...
c# 中崎_C#版OPOS打印(基于北洋OPOS SDK二次开发包,支持EPSON和北洋、佳博、商祺等支持标准ESC/POS指令的POS打印机)...
C#版OPOS打印(基于北洋OPOS SDK二次开发包,支持EPSON和北洋.佳博.商祺等支持标准ESC/POS指令的POS打印机) 收藏 C#版OPOS打印基于北洋OPOS SDK二次开发包,支持 ...

rails应用ajax之二:使用rails自身支持

rails应用ajax之二:使用rails自身支持相关推荐

最新文章

热门文章