rails中发送ajax请求

标签：render   参数   lin   重复   rip   出错   问题   rem   pos   

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

标签：render   参数   lin   重复   rip   出错   问题   rem   pos   

原文地址：https://www.cnblogs.com/Stay-J/p/9543527.html