最近在写一个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. Linux(centos7)安装maven3.5

    1.创建一个maven文件夹 [root@MiWiFi-R3-srv ~]# mkdir /usr/local/maven 1 2.上传apache-maven-3.5.0-bin.tar.gz到/u ...

  2. Redis入门实例(Redis+Sprint+maven创建工程)

    一.>创建一个maven工程应用和相关配置:Redis_study,创建工程应用过程略 1.>配置pom.xml:文件内容如下 <project xmlns="http:/ ...

  3. antd button

    引用 :import { Button } from 'antd'; <Button type = "primary" //按钮样式颜色 shape = "circ ...

  4. 【Z】段错误Segment Fault定位,即core dump文件与gdb定位

    使用C++开发系统有时会出现段错误,即Segment Fault.此类错误程序直接崩溃,通常没有任何有用信息输出,很难定位bug,因而无从解决问题.今天我们介绍core dump文件,并使用gdb进行 ...

  5. SharpZipLib压缩解压

    一.介绍 SharpZipLib是一个完全由C#编写的ZIP,GZIP,Tar和BZIP2 Library,可以方便的支持这几种格式的压缩和解压缩. https://github.com/icshar ...

  6. 如何给Docker hub用户上传头像

    我第一次使用Docker hub时,觉得很奇怪,这个网站上面没有允许用户上传头像的地方. 后来经过研究才发现,需要用在Docker hub上注册用户的同一个邮箱到Gravatar这个网站上再注册一个账 ...

  7. UVa 658 - It's not a Bug, it's a Feature!(Dijkstra + 隐式图搜索)

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

  8. php-------面向对象详解

    php面向对象详解 面向对象 对象概念是面向对象技术的核心.在显示世界里我们所面对的事情都是对象,如计算机.电视机.自行车等.在面向对象的程序设计中,对象是一个由信息及对信息进行处理的描述所组成的整体 ...

  9. docker-3-常用命令(下)

    importance 1.启动守护式容器 docker run -d 容器名   使用镜像centos:latest以后台模式启动一个容器 docker run -d centos   问题:然后do ...

  10. springmvc错误集锦-dubbo包含低版本的spring包,依赖的时候应该排除Caused by: java.lang.reflect.MalformedParameterizedTypeException

    dubbo 常见错误 1. Caused by: java.lang.reflect.MalformedParameterizedTypeException 启动时报错,原因是dubbo 依赖 spr ...