jQuery ajax 和控制器方法

Question

我有这个控制器方法：

def create
    render plain: params[:article].inspect
    #@article = Article.new(article_params)

    #@article = Article.create(article_params)
    #if @article.save
    #   redirect_to @article    
    #else
    #   render 'new'
    #end
end

还有这个 jquery ajax 请求：

function ajaxsend() {

  $.ajax({
    url: "/articles",
    type: "POST",
    data: { "article": { "title": "acme", "text": "text of the article" } },
    success: function(resp){ }
  });

}

但是在我单击运行 e jquery ajax 的按钮后，我什么也没得到。我期待渲染，但没有任何反应，甚至控制台中没有错误。 我究竟做错了什么？我不明白如何将 jquery ajax 的数据发送到控制器。 有什么帮助吗？我是 ruby​​ on rails 开发的新手。红宝石版本：2.1.2；导轨版本：4.1.5；

编辑1：

效果很好，当我以传统方式以表格形式进行时：

结果：

编辑2：

当我按下按钮时，WEBrick 服务器会打印出来：

Started POST "/articles" for 127.0.0.1 at 2014-09-14 09:43:36 +0100
Processing by ArticlesController#create as */*
  Parameters: {"article"=>{"title"=>"acme", "text"=>"123 Carrot Street"}}
  Rendered text template (0.0ms)
Completed 200 OK in 1ms (Views: 0.4ms | ActiveRecord: 0.0ms)

好像没问题。为什么浏览器没有任何反应？为什么 create 方法中的渲染不起作用？有什么帮助吗？

填写表格并按创建文章时的 WEBrick 响应：

Started POST "/articles" for 127.0.0.1 at 2014-09-14 09:52:21 +0100
Processing by ArticlesController#create as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"o8bzaGFcWGaHFFEbgZsfx5bWiHDAIaX3j4xXh3XkTwc=", "article"=>{"title"=>"mmmmm", "text"=>"mmmmm"}, "commit"=>"Create Article"}
  Rendered text template (0.0ms)
Completed 200 OK in 1ms (Views: 0.4ms | ActiveRecord: 0.0ms)

编辑3：

我也试过这种方式：

$.post("/articles", { "article": { "title": "Title1Ar", "text": "text of the article" } }, alert("callback"), "json").error(alert("error handler"));

WEBrick 中的这个：

Started POST "/articles" for 127.0.0.1 at 2014-09-15 09:19:49 +0100
Processing by ArticlesController#create as JSON
  Parameters: {"article"=>{"title"=>"firsttitle", "text"=>"text of the article"}}
  Rendered text template (0.0ms)
Completed 200 OK in 1ms (Views: 0.5ms | ActiveRecord: 0.0ms)

但在浏览器中也没有任何反应。 有什么帮助吗？

Answer 1

我是这样做ajax调用的，你可以试试：

$("#test-ajax-controller").on("click", function() {
  request = void 0;
  request = $.ajax({
    url: "/articles/create/?title=acme&text=123 Carrot Street"
  });
  request.done(function(data, textStatus, jqXHR) {
    console.log(data);
  });
  request.error(function(jqXHR, textStatus, errorThrown) {
    alert("AJAX Error:" + textStatus);
  });
});

在你的控制器中你应该用 JSON 响应

respond_to do |format|
  format.json { render json: @your_return_object }
end 

Answer 2

好像没问题。为什么浏览器没有任何反应？

因为您尚未创建任何功能来处理响应。

每当您发送 Ajax 请求时，您都会始终收到响应。此响应是您在编写 javascript 时需要考虑的。我会为你详细说明一个即时修复，然后是一个更系统的修复，它将让你走上一条更好的道路：

---

Ajax

根据您当前的设置，您需要使用以下方式接收数据：

#app/assets/javascripts/application.js
function ajaxsend() {

  $.ajax({
    url: "/articles",
    type: "POST",
    data: { "article": { "title": "acme", "text": "123 Carrot Street" } },
    success: function(resp){
       alert("Data");
    }
  });

}

在这种情况下，“警报”将产生您需要的效果。为了使这项工作正常工作，您必须使用自己的代码（我不知道您要实现什么目标）。

还必须注意，您必须在 JS 中将此 ajax 代码与 事件 绑定：

#app/assets/javascripts/application.js
$(document).on("submit", "form", function() {
      $.ajax({
        url: $(this).attr("action"),
        type: "POST",
        data: $(this).serialize(),
        success: function(resp){
           alert("Data");
        }
      });
});

---

UJS

对于 Rails，我们很幸运拥有Rails UJS 驱动程序，它为我们的 Rails 应用程序提供了一系列功能，我们可以隐式调用这些功能（IE 无需继续定义函数）。

你可以看到Rails UJS Ajax functionality here

具体来说，您可以这样做：

#app/views/articles/new.html.erb
<%= form_for @article, remote: true do |f| %>

#app/controllers/articles_controller.rb
class ArticlesController < ApplicationController
   respond_to :js, :json, :html

   def create
      @article = Article.new article_params
      @article.save

      respond_with @article
   end

   private

   def article_params
      params.require(:article).permit(:title, :text)
   end
end

#app/assets/javascripts/application.js
$(document).on("ajax:success", "form", function(status, data, xhr){
   alert("DATA RECEIVED");
});