无法在 Rails 5 中将 Json 数据获取到 Ajax

Posted 2023-05-09

【中文标题】无法在 Rails 5 中将 Json 数据获取到 Ajax

【英文标题】：Can't get Json data to Ajax in Rails 5

【发布时间】：2018-07-05 12:33:52

【问题描述】：

您好，我正在尝试使用 Ajax 理解和实现 Rails 动作控制器。我的问题是为什么我无法在我的 Ajax 函数中获取 Json 数据并将其显示到 console.log。我将我的 ajax 函数放在 application.js 文件中。我的 ajax get 方法工作正常，但 post 方法似乎不起作用。在文章索引页面中，当您单击新文章时，它将呈现部分表单，ajax 将与控制器中的创建操作进行通信，以将数据附加到索引页面。但我无法将 Json 数据解析为 Ajax 帖子。 这是我的代码文件： 更新图片 enter image description here 当我单击在网络选项卡显示中仅创建 json 数据时。 Alert 和 console.log 不显示任何内容。

应用程序.js

$(function ()
var $article_table = $('#article_table');
$.ajax(
    type: 'GET',
    dataType: 'json',
    url: '/articles',
    success: function(articles)
        $.each(articles, function(i, article) 
            $article_table.append('<tr><td>'+article.name+'</td></tr>')
        );
    
);
$('#form_article').submit(function()
    //var name = $('#article_name').val();
    var name = JSON.parse(xhr.responseText);
    $.ajax(
        type: 'POST',
        url: '/articles',
        dataType: 'json',
        data: name,
        success: function(data)
            //alert(data.id);
            console.log('success',data);
            //debugger;
        ,
        error: function()

        
    );
);

articles_controller.rb => 在创建控制器时我将文章渲染为 json

   class ArticlesController < ApplicationController
  before_action :set_article, only: [:show, :edit, :update, :destroy]

  # GET /articles
  # GET /articles.json
  def index
    @articles = Article.all
  end

  def show
  end

  # GET /articles/new
  def new
    @article = Article.new
  end

  # GET /articles/1/edit
  def edit
  end

  # POST /articles
  # POST /articles.json
  def create
    @article = Article.new(article_params)

    #respond_to do |format|
      if @article.save
        #format.html  redirect_to @article, notice: 'Article was successfully created.' 
        #format.json  render :show, status: :created, location: @article 
        #format.html
        #format.json  render json: @article, status: :ok
        render json: @article, status: :ok
      else
        #format.html  render :new 
        #format.html
        render json: @article.errors, status: :unprocessable_entity
        #format.json  render json: @article.errors, status: :unprocessable_entity 
      end
    #end
  end

_form.html.erb：

    <%= form_with(model: @article, remote: true , id: :form_article) do |form| %>
  <% if @article.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@article.errors.count, "error") %> prohibited this article from being saved:</h2>

      <ul>
      <% @article.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= form.label :name %>
    <%= form.text_field :name, id: :article_name %>
  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>

index.html.erb：

<p id="notice"><%= notice %></p>

<h1>Articles</h1>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th colspan="3"></th>
    </tr>
  </thead>
  <tbody id="article_table">

  </tbody>
</table>

<br>

<%= link_to 'New Article', new_article_path, id: :new_article_link, remote: true %>

new.js.erb：

 $('#new_article_link').hide().after("<%= j render 'form' %>");

【问题讨论】：

您确定文章已保存吗？也许你有一个错误？在 js 文件中为错误回调添加警报。

您在application.js 的下一行中在哪里定义xhr？ var name = JSON.parse(xhr.responseText);

嗨@kunashir。是的，当我刷新页面时，文章已成功保存，我可以看到添加了新文章，但我需要捕获 json 数据，因为我想使用 ajax（我不想刷新页面）。谢谢

嗨@SRack。是的，我试过了，但没有用。我认为可能没有调用 Ajax Post 函数，因为即使我在其中设置了“成功”字符串，console.log 中也没有显示任何内容。

@TranDuy 你在浏览器中看到服务器的响应了吗？你收到什么？

【参考方案1】：

你需要像这样传递数据

data: article: name: name

关于 jQuery/AJAX 部分见下文

$('#form_article').submit(function()
    // Declare a variable for get data from input field
    var name = $('#article_name').val();
    $.ajax(
        type: 'POST',
        url: '/articles',
        dataType: 'json',
        data: article: name: name,
        success: function(data)
            //alert(data.id);
            //console.log('success', data);
            console.log(JSON.stringify(data));
            //debugger;
        ,
        error: function()
            alert("Error");
        
    );
);

希望对你有帮助

【讨论】：

感谢您的回复。我试过了，但是在 console.log 中仍然没有显示数据。

确保获取输入字段的值，如alert(name);

我添加了 alert(name);但什么也没有出现。我已经在问题中附上了图片。只有网络选项卡显示 Json 数据我无法捕获该数据并将其显示在 console.log 中

嘿@TranDuy，试试这个console.log(JSON.stringify(data));

还是一样。控制台.log 中没有显示任何内容。在 console.log 中，我有“成功”字符串，即使它没有捕获数据，但“成功”字符串应该显示在控制台日志中，对吗？你认为success函数没有被调用吗？