最近在写一个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请求了

最新文章

  1. WinForm 调用 PrintDocument
  2. 【USACO 2.3】Money Systems(dp)
  3. JS实现图片预加载无需等待
  4. JQuery 表单校验插件 validate 使用纪录
  5. 动态创建JS
  6. adb shell input keyevent code详解
  7. js正则表达式用法大全
  8. php的header()大全
  9. 记一个社交APP的开发过程——基础架构选型(转自一位大哥)
  10. PHP中刷新输出缓冲
  11. MFC工程的复制
  12. C#后台利用正则表达式查找匹配字符
  13. 制作ssh互信的docker镜像
  14. cannal&amp;otter源码解析
  15. Java 类加载机制(阿里面试题)-何时初始化类
  16. RabbitMQ 发布订阅-实现延时重试队列(参考)
  17. C#中的快捷键,可以更方便的编写代码
  18. git的配置操作
  19. HDU 5724 Chess(SG函数+状态压缩)
  20. 03 Linux的目录结构与常见文件管理

热门文章

  1. 一、WPF 2个datagrid之间同步进度条
  2. 【Leetcode】【Medium】Partition List
  3. 修改容器的hosts文件
  4. 获取Excel的单元格数据类型(靠谱)
  5. hdu 6214 Smallest Minimum Cut[最大流]
  6. 当你的Spring IOC 容器(即applicationContext.xml文件)忘记配到web.xml 文件中时
  7. 【转】Nginx反向代理转发tomcat
  8. Sublime Text 3 for Mac 3176 序号版
  9. 【luogu P1666 前缀单词】 题解
  10. Android 复制 粘贴 剪贴板的使用 ClipboardManager