最近在写一个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请求的更多相关文章

  1. Vue中发送ajax请求——axios使用详解

    axios 基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用 功能特性 在浏览器中发送 XMLHttpRequests 请求 在 node.js 中发送 htt ...

  2. Vue中使用axios发送ajax请求

    作为前后端交互的重要技巧--发送ajax请求,在Vue中我们使用axio来完成这一需求: 首先是下载axios的依赖, npm install --save axios vue-axios 然后在ma ...

  3. js中使用队列发送ajax请求

    最近,项目中需要按照先后顺序发送ajax请求,并且在一次请求结束后才能发起下一次,不然就会导致逻辑错误. 解决办法是定义一个数组,保存ajax请求数据. 以下使用extjs4定义一个类 Ext.def ...

  4. 在发送ajax请求时加时间戳或者随机数去除js缓存

    在发送ajax请求的时候,为了保证每次的都与服务器交互,就要传递一个参数每次都不一样,这里就用了时间戳 大家在系统开发中都可能会在js中用到ajax或者dwr,因为IE的缓存,使得我们在填入相同的值的 ...

  5. PHP--------TP中的ajax请求

    PHP--------TP中的ajax请求 以jQuery中的ajax为例: (1)引入jQuery 通过模板替换表示路径,我们可以自定义模板替换变量(在config中定义) /*自定义模板替换标签* ...

  6. 原生js发送ajax请求

    堕落了一阵子了,今天打开博客,发现连登录的用户名和密码都不记得了.2016年已过半,不能再这么晃荡下去了. 参加了网易微专业-前端攻城狮 培训,目前进行到大作业开发阶段,感觉举步维艰.但是无论如何,不 ...

  7. Jquery发送ajax请求以及datatype参数为text/JSON方式

    Jquery发送ajax请求以及datatype参数为text/JSON方式 1.方式一:datatype:'text' 2.方式二:datatype:'JSON' 3.使用gson-1.5.jar包 ...

  8. 【liferay】1、使用alloy-UI发送ajax请求

    1.首先liferay要发送ajax请求,那么就需要在jsp中定义resourceURL <portlet:resourceURL var="workDeal" id=&qu ...

  9. ASP.NET Core Razor中处理Ajax请求

    如何ASP.NET Core Razor中处理Ajax请求 在ASP.NET Core Razor(以下简称Razor)刚出来的时候,看了一下官方的文档,一直没怎么用过.今天闲来无事,准备用Rozor ...

随机推荐

  1. FZEasyFile的使用

    FZEasyFile的使用 https://github.com/jiecao-fm/FZEasyFile 操作沙盒文件很恶心,但用上FZEasyFile就变得简单了. 以前你需要这么做才行: NSF ...

  2. RabbitMQ 启动

    1.使用Rabbit MQ 管理插件,可以更好的可视化方式查看Rabbit MQ 服务器实例的状态,你可以在命令行中使用下面的命令激活: C:\Program Files\RabbitMQ Serve ...

  3. windows server 2003安装Oracle webtier 32位因环境变量原因报错

    在服务中启动Oracle processer manager时报错:错误1053:服务没有及时响应启动或控制请求 原因是本系统还安装过BI和Oracle数据库等产品 解决方法:删除和本次安装无关的环境 ...

  4. January 23 2017 Week 4 Monday

    Knowledge is long, life is short. 吾生也有涯,而知也无涯. I often feel that I have a lot of things to learn, ne ...

  5. Geekforgeek week1

    1. is palindrome solution 1: check to reverse the digit, if they are the same number https://www.gee ...

  6. is和as在类型转换时的性能差异

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/xxdddail/article/details/36655219 is和as是.NET中经常使用的操 ...

  7. UVa 1218 - Perfect Service(树形DP)

    链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  8. 小知识积累-linux下一些简单开发配置

    系统环境为 redhat enterprise 6.x,主要是针对初学者在linux下用gcc和vi简单测试开发的一些配置 1.vi 自动换行 在终端下敲入vi命令打开文件 : vi ~/.vimrc ...

  9. 记一次重装系统后恢复EFS加密文件过程

    之前用了8年的win7系统被我删注册表给折腾挂了, 无法进入系统, 无法进入安全模式, 无法使用光盘修复 只能重装系统,习惯性的重装前GHOST备份了一下 今天忽然发现有好几个项目文件居然成了绿色的, ...

  10. HDU 1078 FatMouse and Cheese ( DP, DFS)

    HDU 1078 FatMouse and Cheese ( DP, DFS) 题目大意 给定一个 n * n 的矩阵, 矩阵的每个格子里都有一个值. 每次水平或垂直可以走 [1, k] 步, 从 ( ...