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请求了
最新文章
- WinForm 调用 PrintDocument
- 【USACO 2.3】Money Systems(dp)
- JS实现图片预加载无需等待
- JQuery 表单校验插件 validate 使用纪录
- 动态创建JS
- adb shell input keyevent code详解
- js正则表达式用法大全
- php的header()大全
- 记一个社交APP的开发过程——基础架构选型(转自一位大哥)
- PHP中刷新输出缓冲
- MFC工程的复制
- C#后台利用正则表达式查找匹配字符
- 制作ssh互信的docker镜像
- cannal&;otter源码解析
- Java 类加载机制(阿里面试题)-何时初始化类
- RabbitMQ 发布订阅-实现延时重试队列(参考)
- C#中的快捷键,可以更方便的编写代码
- git的配置操作
- HDU 5724 Chess(SG函数+状态压缩)
- 03 Linux的目录结构与常见文件管理
热门文章
- 一、WPF 2个datagrid之间同步进度条
- 【Leetcode】【Medium】Partition List
- 修改容器的hosts文件
- 获取Excel的单元格数据类型(靠谱)
- hdu 6214 Smallest Minimum Cut[最大流]
- 当你的Spring IOC 容器(即applicationContext.xml文件)忘记配到web.xml 文件中时
- 【转】Nginx反向代理转发tomcat
- Sublime Text 3 for Mac 3176 序号版
- 【luogu P1666 前缀单词】 题解
- Android 复制 粘贴 剪贴板的使用 ClipboardManager