rails中发送ajax请求
最近在写一个blog系统练练手,遇到一个一个问题,用户添加评论的时候想发送ajax请求,但是rails里的ajax和Python中的不太一样,Python中的ajax是用js,jquery实现的和rails不太一样,在此记录一下,研究了好久终于弄明白了一点
告诉框架我们要发送ajax请求
rails这个框架吧,ajax与后端结合的非常紧密。
当我们想发送一个ajax请求的时候,在模板生成的时候我们可以添加一个属性
form表单, <%= form_for (Comment.new), url: post_comments_path(@post),remote:true do |f| %> 当我加上remote:true时那么就会发送ajax请求了。
a标签 也是一样 <%= link_to 'ajax-request', '/xxxx/create', remote: true%> 这样也就可以发送ajax请求了。
为什么我们这么一设置就可以发送ajax请求了呢。因为rails内部使用了?
Rails 使用一种叫做 Unobtrusive JavaScript(UJS) 的方式来挂载内建的 JavaScript 功能,也就是你在 app/assets/javascripts/application.js 里面加载的 //= require jquery_ujs,这些功能包括
- 让超连结可以用
:method参数支援非 GET 方法 - 用超连结、按钮和表单可以用
:remote => true支援 Ajax - 超连结、按钮和表单可以用
"data-confirm"参数可以跳确认对话视窗 - 送出按钮可以用
data-disable-with参数在送出表单时暂时关闭按钮避免重复送出
这里我也遇到了一个问题当我直接发送的时候,服务器告诉我没有csrf token验证
这里我们需要在模板中加上 <%= csrf_meta_tags %> 这样就不会出错了
Ajax请求的过程
1.当我们点击发送ajax请求的时候,会到相应的控制器中。比如我这里到了cmment控制器中。
comments_conttroller.rb class CommentsController < ApplicationController def create
pp params
@post = Post.where(id: params[:post_id]).first
@comment = Comment.new(user_id: current_user.id, post_id: params[:post_id], content: params[:comment][:content]) respond_to do |format|
if @comment.save
format.html # 里面是要生成的html代码,就是我在页面上要添加的
format.js #执行的js代码 文件名和方法名一致,例如我这个是create.js.erb
format.json {render json: @comment}
end
end
end private
def comment_params
params.require(:comment).permit(:content)
end
end
respond_to do |format| "https://api.rubyonrails.org/classes/ActionController/MimeResponds.html"可以到该网站去查看用法
主要就是看返回什么我们这里是ajax请求那么返回的就是format.js
2. 到了相应的create.js.erb中
$("#comment_content").append("<%= escape_javascript(render 'create') %>")
<%= escape_javascript(render 'create') %>
这里回去找相对应的模板 我这里render 'create' 那么他就回去找(因为我这里是comments下,回在comments目录下找)_create.html.erb。
这样就可以发送ajax请求了
rails中发送ajax请求的更多相关文章
- Vue中发送ajax请求——axios使用详解
axios 基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用 功能特性 在浏览器中发送 XMLHttpRequests 请求 在 node.js 中发送 htt ...
- Vue中使用axios发送ajax请求
作为前后端交互的重要技巧--发送ajax请求,在Vue中我们使用axio来完成这一需求: 首先是下载axios的依赖, npm install --save axios vue-axios 然后在ma ...
- js中使用队列发送ajax请求
最近,项目中需要按照先后顺序发送ajax请求,并且在一次请求结束后才能发起下一次,不然就会导致逻辑错误. 解决办法是定义一个数组,保存ajax请求数据. 以下使用extjs4定义一个类 Ext.def ...
- 在发送ajax请求时加时间戳或者随机数去除js缓存
在发送ajax请求的时候,为了保证每次的都与服务器交互,就要传递一个参数每次都不一样,这里就用了时间戳 大家在系统开发中都可能会在js中用到ajax或者dwr,因为IE的缓存,使得我们在填入相同的值的 ...
- PHP--------TP中的ajax请求
PHP--------TP中的ajax请求 以jQuery中的ajax为例: (1)引入jQuery 通过模板替换表示路径,我们可以自定义模板替换变量(在config中定义) /*自定义模板替换标签* ...
- 原生js发送ajax请求
堕落了一阵子了,今天打开博客,发现连登录的用户名和密码都不记得了.2016年已过半,不能再这么晃荡下去了. 参加了网易微专业-前端攻城狮 培训,目前进行到大作业开发阶段,感觉举步维艰.但是无论如何,不 ...
- Jquery发送ajax请求以及datatype参数为text/JSON方式
Jquery发送ajax请求以及datatype参数为text/JSON方式 1.方式一:datatype:'text' 2.方式二:datatype:'JSON' 3.使用gson-1.5.jar包 ...
- 【liferay】1、使用alloy-UI发送ajax请求
1.首先liferay要发送ajax请求,那么就需要在jsp中定义resourceURL <portlet:resourceURL var="workDeal" id=&qu ...
- ASP.NET Core Razor中处理Ajax请求
如何ASP.NET Core Razor中处理Ajax请求 在ASP.NET Core Razor(以下简称Razor)刚出来的时候,看了一下官方的文档,一直没怎么用过.今天闲来无事,准备用Rozor ...
随机推荐
- C# 使用 Invoke 实现函数的白盒 UT 测试
公有方法可以直接调用,但是一些非公开的方法,在覆盖率测试的时候也需要覆盖,可以使用 Invoke 来调用. 调用方法如下,其中 this 可以改为被调用的方法所属的类名,通过 BindingFlags ...
- Python学习---匿名函数和闭包的学习
1.1. 匿名函数 匿名函数的命名规则: 用lamdba 关键字标识,冒号(:)左侧表示函数接收的参数(a,b) ,冒号(:)右侧表示函数的返回值(a+b). 因为lamdba在创建时不需要命名,所 ...
- laravel中delete()方法和destroy()方法的区别
delete()方法是实例方法,需要查询到相应的数据并通过模型实例调用 destroy()方法可以直接调用,通过索引删除记录 举个栗子: /*delete()方法删除*/ //先查找记录 $blog ...
- js数组 标签: javascript 2016-08-03 14:15 131人阅读 评论(0) 收藏
数组排序 reverse()方法 reverse()方法会反转数组的顺序. sort()方法 默认情况下sort()方法按升序排列数组项.为实现排序sort()方法调用每项的toString(),然后 ...
- 「C语言」数据类型及混合运算与类型转换
深入学习C语言时,有必要先了解一下数据类型的概念,以及它们之间的混合运算与类型转换. 本篇文章便是根据<C语言程序设计教程>和在线翻阅资料后整理而出.(练习题将逐步更新) 目录: ...
- hdu 4825 Xor Sum(trie+贪心)
hdu 4825 Xor Sum(trie+贪心) 刚刚补了前天的CF的D题再做这题感觉轻松了许多.简直一个模子啊...跑树上异或x最大值.贪心地让某位的值与x对应位的值不同即可. #include ...
- nodejs中的fiber(纤程)库详解
fiber/纤程 在操作系统中,除了进程和线程外,还有一种较少应用的纤程(fiber,也叫协程).纤程常常拿来跟线程做对比,对于操作系统而言,它们都是较轻量级的运行态.通常认为纤程比线程更为轻量,开销 ...
- UglifyJS 压缩选项
UglifyJS 压缩选项 1.使用逗号运算符连接简单语句 2.使用点符号代替中括号属性 foo [“bar”]→foo.bar 3.删除逻辑上走不到的代码 4.删除调试代码 debug ...
- ORM优缺点
优点: 1.提高了开发效率.由于ORM可以自动对Entity对象与数据库中的Table进行字段与属性的映射,所以我们实际可能已经不需要一个专用的.庞大的数据访问层. 2.ORM提供了对数据库的映射,不 ...
- $.ajax方法success方法窗口弹不出