rails和js 进行json格式数据，post交互

最新推荐文章于 2021-08-05 23:12:40 发布

1235775ffffggg

最新推荐文章于 2021-08-05 23:12:40 发布

阅读量491

点赞数

CC 4.0 BY-SA版权

分类专栏： rails+js 文章标签： json ruby

本文链接：https://blog.youkuaiyun.com/yylcym/article/details/84763087

rails+js 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在Rails 4环境中实现从前台JS到后台的POST请求，包括配置路由、解决CSRF验证问题及安全返回JSON数据的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里使用rails版本为 4.0.0

windows平台

前台js执行post请求的函数为：

function get_data(){
json={
user_id:1
}

         $.ajax({
             type: "POST",
             url: "say/get_data",
             data: json,
             dataType: "json",
             success: function(data, textStatus){
			// var data = eval("("+data+")");#这个地方不建议使用eval执行，据网上别人说，会引起恶意代码被执行
			  $.each(data,function(item) {;
			        $('body').append("<div>" + data[item] + "</div>");
			 });

                      },
			 error:function(data){
			         alert("请求后台数据出错")
			       }
         });     
      
}

后台rails代码为：

class SayController < ApplicationController
  def hello
  end

  def get_data
  p params
  p params["user_id"]
  p "1"*88

    json_str = "{'xx':'1111', 's':'2222'}" 
    respond_to do |format|
          #format.json {render json: json_str.to_json }#如果用json字符串，则需要通过to_json转化格式返回给前台js，那么前台需要执行eval来再次转换格式
	    format.json {render json: {'xx'=>"22",'dd'=>33} }  #此处建议使用hash格式数据返回，这样前台js就无需执行eval来转换格式
    end
  end
end

开始运行后，第一次是报这种错误

Started POST "/say/get_data" for 127.0.0.1 at 2016-01-24 21:19:44 +0800

ActionController::RoutingError (No route matches [POST] "/say/get_data"):

这是因为我们rails后台控制器的get_data发法是手工添加进来的，需要添加相应的routes

我们需要在config/routes.rb文件中，增加一行post 'say/get_data'，为rails增加post请求的路由。

Demo2::Application.routes.draw do
  resources :products

  get "say/hello"
  post 'say/get_data'   #为get_data增加post请求路由
end

第二次运行已经报错：

Started POST "/say/get_data" for 127.0.0.1 at 2016-01-24 21:24:29 +0800
Processing by SayController#get_data as JSON
Parameters: {"user_id"=>"1"}
Can't verify CSRF token authenticity
Completed 422 Unprocessable Entity in 1ms

这是因为我们rails后台做了csrf鉴权（按理说前台做了crsf头部，应该有权限才对，这个暂时不会），需要屏蔽它

class ApplicationController < ActionController::Base
  # Prevent CSRF attacks by raising an exception.
  # For APIs, you may want to use :null_session instead.
  protect_from_forgery with: :exception
  skip_before_filter :verify_authenticity_token  #这行代码用来取消crsf鉴权
end

至此，前台的js已经可以正常进行后台post请求json格式数据了。

其中，个人比较推荐只用hash格式返回json数据的，这样比较方便组装数据，并且前台无需执行eval，更安全些