我想我宁愿做code在ERB /​​红宝石，因为我更马上熟悉它是。虽然它几乎感觉有点意义有JSON，因为@expenses是我已经在我目前的表code使用的。但是，不会渲染：文件expenses_table.html.erb刷新整个页面？要不怎么会就知道在哪里渲染只是表和替换什么是previously呢？这听起来更容易应对 format.js 并作出 index.js.erb的，因为我知道我可以代替在HTML和我的部分。但我没有试过，因为所有的例子我见过的响应，以 format.json 。如果这听起来像我只是困惑，不知道发生了什么事情，那是因为我。我只是需要一些澄清。感谢您的帮助！

如果我应该甚至可以使用JSON的AJAX。

您可以使用任何你想要的String类型。该问题是解析上的JavaScript侧的串以提取每个数据。

 EXP1 = 10，EXP2 = 20，EXP3 = 30
 

然后你的JavaScript code可以分割的字符串，，那么=号，然后使用片创建一个对象，那么你可以使用该对象引用的数据。在另一方面，如果数据被作为一个JSON字符串，所有你需要做的，在JavaScript是：

  VAR OBJ = JSON.parse（数据）;
 

...和OBJ将类似于一个Ruby散列，在那里你可以看一下键获取值的东西。

所以我想我的主要问题是如何JSON部分工程...我   理解是通过@expenses，它基本上会呈现什么   @ expenses.to_json回报，这只是一堆JSON的，键值   对。我如何采取并表？

这是正确的。您用您的编程技能表。

我的一个朋友已经做了很多AJAX，但没有的Ruby on Rails的   说，我可以只写在AJAX成功功能HTML

当然，但诀窍还是以编程方式获取数据，在JSON并将其插入到HTML表。如果你想要去的路线，你可以返回一个完整的表作为反应，这样就可以使用ERB /​​引入nokogiri /红宝石在服务器端插入表中的数据。然后，你会写是这样的：

  @expenses = ....
渲染：文件/some/dir/expenses_table.html.erb
 

另一种方法可能是给每个＆LT; TD＆GT; 表格中的id属性，等于在你的JSON数据的关键。然后，你可以使用JavaScript来循环遍历JSON数据每个键，查找＆LT; TD＆GT; 与ID，然后替换在JSON数据的录入与价值对应于该密钥。

如果您想更具体的建议，你必须发表您的表的HTML是什么// @ expenses.to_json看起来像一个小的例子还有。

顺便说一句，jQuery的阿贾克斯（）函数有太多的功能，因此，所有的常见的Ajax请求有快捷功能，在相关选项为你填写，如的getJSON（），在那里你只需指定的URL，数据和成功的功能。在这种情况下，不会为您节省大量的工作，但也许函数名比AJAX更具描述性的。

回应发表评论的问题：

我想我的困惑则是JavaScript的是什么？难道这就是   原来的AJAX调用？

是的。这是JavaScript的需要code中的唯一。

如果是这样的js.erb文件，然后对我来说，   调用一些红宝石code？

没有。如果你想创建一个使用Ruby的一些JS（这就是再培训局的），你会使用js.erb文件，并要返回JS code作为响应。我们已经建立了，你不希望返回JavaScript作为响应。但是，使用导轨设置Ajax是非常混乱，所以我可能不会理解你的问题的要点。这是非常简单的不使用轨生成AJAX的JavaScript。

据我了解的东西，如果你把远程：真正的在Rails的HTML帮助，当你创建一个HTML表单，则当表单提交，请求被发送到你的Rails应用程序使用的接受头文/ JavaScript的。这意味着，如果你的行动有一个 format.js 行的respond_to块，这条线将执行，并且可以发送一些JavaScript返回给浏览器，如：一个 .js.erb 文件，其中包含code，执行一个Ajax请求，让您的费用数据。您的浏览器会立即执行返回的js，这将发出一个Ajax请求到服务器请求的费用数据。需要注意的是轨道的方式是低效的：浏览器有两个请求发送到服务器来完成一项Ajax请求：一是请求被发送到服务器，以获得JS code，这将使开支数据处理Ajax请求，那么浏览器执行了ajax code，它发送另一个请求到服务器，以获取费用数据。

或者，我可以调用一个JavaScript文件中的响应   至？

在我看来像你想用一个全新的表替换现有表，即你不能改变两个或三个＆LT; TD＆GT;的的现有的表，这应使事情变得非常容易。事实上，据我所知，您可以使用您用来创建现有的表来创建新表相同的ERB code。然而，你的指数操作的响应Ajax请求应仅返回表 - 而不是整个页面。这意味着你应该把code创建表到一个单独的模板，部分：

观点/共享/ _table.html.erb ：

 ＆LT;表ID =费用＆GT;
<thead><th>Description</th><th>Amount</th><th>Date</th></thead>
＆LT;％@ expenses.each办|费用| ％＆GT;
＆其中; TR＆GT;
  ＆LT;  - 我用了一个简短的费用模式： - ＆GT;
  ＆其中; TD＆GT;＆其中;％= expense.description％GT;＆所述; / TD＆GT;
  ＆其中; TD＆GT;＆其中;％= number_to_currency expense.amount％GT;＆所述; / TD＆GT;
  ＆其中; TD＆GT;＆其中;％= expense.date％GT;＆所述; / TD＆GT;
＆LT; / TR＆GT;
＆LT;％结束％GT;
＆LT; /表＆gt;
 

然后就包括部分在意见/费用/ index.html.erb ：

 ＆LT; H1＆GT;费用＃指数和LT; / H1＆GT;
＆LT; P＆GT;发现我在app / views /费用/ index.html.erb＆LT; / P＆GT;

＆LT; D​​IV＆GT;
＆LT;选择一个id ='expense_day'＆GT;
＆LT;期权价值=所有＆GT;所有＆LT; /选项＆GT;
＆LT;期权价值=2014年10月5日＆GT; 10/5/14 LT; /选项＆GT;
＆LT;期权价值=2014年10月6日→10/6/14＆LT; /选项＆GT;
＆LT; /选择＆GT;
＆LT; / DIV＆GT;

＆LT;％=渲染共享/表％＆GT; ＆LT;  - ！这 - ＆GT;
 

在默认情况下，渲染（）将寻找一个部分在被称为应用程序/ views目录共享/ _table.html.erb 。

这两个文件合并（插入到应用程序布局）组成index.html.erb视图。因为表现在是一个单独的模板，只是该表可响应呈现一个Ajax请求：

 类ExpensesController＆LT;的ApplicationController

  高清指数
    respond_to代码做|格式|
      如果request.xhr？ #IS这一个Ajax请求？
        target_date_str = PARAMS ['target_date']

        如果target_date_str ==所有
          @expenses = Expense.all
        其他
          @expenses = Expense.where（日期：Date.strptime（target_date_str，％Y-％M-％D））
        结束

        #Render只是表Ajax请求：
        的format.html {渲染部分：共享/表}

      否则#then不是一个Ajax请求
        @expenses = Expense.all
        的format.html #By默认渲染index.html.erb
      结束
    结束

  结束

结束
 

的respond_to（）看请求中的Accept报头，并根据该选择匹配的格式为：

 的format.html
format.json
format.xml
等等
 

我审查了jQuery的。获得发送的请求（）AJAX功能，并将其发送与的text / html 作为最高优先级，所以格式的接受头的请求html的将选择的块的respond_to。 修改我最初写索引操作思维会有format.json线Ajax请求，和的format.html行非Ajax请求。但因为索引动作现在返回的HTML在两种情况下，的respond_to（）块是不需要的：

 类ExpensesController＆LT;的ApplicationController
  高清指数
    如果request.xhr？ ＃如果一个Ajax请求......
      target_date_str = PARAMS ['target_date']

      如果target_date_str ==所有
        @expenses = Expense.all
      其他
        @expenses = Expense.where（日期：Date.strptime（target_date_str，％Y-％M-％D））
      结束

      呈现部分：共享/表#Overrides导轨这使得index.html.erb默认操作

    否则#then不是一个Ajax请求
      @expenses = Expense.all #rails默认渲染index.html.erb
    结束

  结束
 

下面是我使用的JavaScript：

 ＆LT;脚本＆GT;

$（文件）。就绪（函数（）{
  $（＃expense_day）。在（变，函数（）{

    VAR selected_date = $（本）.VAL（）;

    $获得（
      /开支，
      {target_date：selected_date}，
      函数（表）{
        $（＃费用）。replaceWith（表）
      }
    ）;

  }）;
}）;

＆LT; / SCRIPT＆GT;

    ＆LT; H1＆GT;费用＃指数和LT; / H1＆GT;
    ＆LT; P＆GT;发现我在app / views /费用/ index.html.erb＆LT; / P＆GT;

    ＆LT; D​​IV＆GT;
    ＆LT;选择一个id ='expense_day'＆GT;
    ＆LT;期权价值=所有＆GT;所有＆LT; /选项＆GT;
    ＆LT;期权价值=2014年10月5日＆GT; 10/5/14 LT; /选项＆GT;
    ＆LT;期权价值=2014年10月6日→10/6/14＆LT; /选项＆GT;
    ＆LT; /选择＆GT;
    ＆LT; / DIV＆GT;

    ＆LT;％=渲染部分：共享/表，费用：@expenses％＆GT;
 

我把JavaScript中的index.html.erb认为，这应该说清楚的JavaScript的HTML页面的一部分。但是，你可以删除index.html.erb的JavaScript，并把它在另一个文件 - 但最终的js必须找到自己的方式回到index.html.erb文件。这里有一些链接，讨论JavaScript的备用位置：

为什么铁轨没有渲染.js.erb文件？

Best的方式来增加页面的JavaScript在Rails 3应用程序？

Rails有一种叫做资产管道，这是恶补所有的JavaScript和CSS到的几行可以通过删除所有空格的方法。因为文件更小，你的浏览器可以更快地加载它们。要利用这一点的涅槃的，你必须把你的资产，即你的Ja​​vaScript和CSS文件，到某些目录。这真的是你需要担心的，因为你的JavaScript code不是数千页长的不是。

I can't believe I haven't found other questions to answer this but I've searched high and low and can't find anything that really answers my question.

Basically, I have an Expenses page in which I want to display all Expenses in a given month in a table. I have a month and year select and right now I have it working by adding month and year parameters to the url and going to that href with a little javascript. I would like to avoid a page refresh however and just update the table when the select box value is changed. As I understand it, because I'm not using a form, I can't use :remote => true and thus have to use AJAX. My research has brought me to set things up as the following.

This is my JQuery with an AJAX call:

$(document).ready(function() {

    $('#monthSelect').change(function() {
        // alert("yay");

        var m = $(this).val();
        var y = $("#yearSelect").val();
        $.ajax({
            type: "GET",
            url: "/expenses",
            data: { month : m, year : y } ,
            success: function(data) {

            },
            dataType: "json"
        });
    });
});

#monthSelect and #yearSelect are the ids of my two select boxes. This part seems to work. When I change the value of the month select box, it sends the GET request to "/expenses" with the correct month and year in the params.

/expenses naturally routes to my index action. Here is the part where I'm confused.

def index
    @expenses = # Code that gets the expenses that correspond to the month and year in the params.
    # This part works. I've tested it and @expenses are all the records I want

    respond_to do |format|
        format.html
        format.json { render json: @expenses, status: :ok } #?????
    end
end

So I guess my primary question is how the json part works, and if I should even be using json in the AJAX. Tutorials and videos I've looked at all seem to imply that getting the response in json is the way you're supposed to do it, but I'm not sure what "rendering json" even means. My understanding is that passing @expenses, it basically will render what @expenses.to_json returns, which is just a bunch of json, key-value pairs. How do I take that and make a table?

A friend of mine that has done plenty of AJAX but no Ruby on Rails said that I can just write the HTML in the AJAX success function

...
success: function(data) {
    $("#expenses-table").html("HTML of my Table");
}

But this just doesn't seem like the Rails way, to put a bunch of Javascript code that just puts HTML into a string. And then what does the render: json do if I'm just putting the HTML in the AJAX? I did see an answer here on Stack Overflow that had

success: function(data) {
    $("#expenses-table").html(data);
}

which would be nice, since data does have all the json I want. But obviously that doesn't just work like that.

So if I could get some clarification on this whole mess, if I'm even approaching it right with JSON, or if I should just write the HTML in the AJAX, that would be much appreciated.

EDIT 1: Here's my current table code:

<table id="expenses">
    <thead>
      <tr>
        <th>Description</th>
        <th>Amount</th>
        <th>User</th>
        <th>Date</th>
        <th colspan="3"></th>
      </tr>
    </thead>

    <tbody>
      <% @expenses.each do |expense| %>
        <tr id="expenses-row">
          <td><%= expense.description %></td>
          <td><%= number_to_currency expense.amount %></td>
          <td><%= expense.user.name %></td>
          <td><%= expense.date.strftime("%m/%Y") %></td>
          <td><%= link_to 'Show', expense %></td>
          <% if expense.user == @user %>
            <td><%= link_to 'Edit', edit_expense_path(expense) %></td>
            <td><%= link_to 'Delete', expense, method: :delete, data: { confirm: 'Are you sure?' } %></td>
          <% else %>
            <td></td>
            <td></td>
          <% end %>
        </tr>
      <% end %>
    </tbody>
  </table>

Basically just the standard scaffold table. Most of the changes were just css. Here's what the json looks like for one record

[{"id":8,"description":"This is a test","amount":"35.0","user_id":1,"date":"2014-10-01","created_at":"2014-10-03T07:07:53.412Z","updated_at":"2014-10-03T07:07:53.412Z","receipt_file_name":null,"receipt_content_type":null,"receipt_file_size":null,"receipt_updated_at":null}]

I guess I'd rather do the code in ERB/ruby as I'm more immediately familiar with it. Though it almost feels a little pointless to have the json since @expenses is what I already use in my current table code. However, wouldn't render :file "expenses_table.html.erb" refresh the whole page? Or how would it know where to render just that table and replace what was previously there? It almost sounds easier to respond to format.js and make an index.js.erb because I know I could replace the html with my partial. But I haven't tried that as all the examples I've seen respond to format.json. If it sounds like I'm just confused and don't know what's going on it's because I am. I just need some clarification. Thanks for your help!

if I should even be using json in the AJAX.

You can use any type of String you want. The problem is parsing the string on the javascript side to extract each piece of data. For instance, you could respond with a String such as:

"exp1=10, exp2=20, exp3=30"

Then your javascript code can split the String on ", ", then the "=" sign, then use the pieces to create an object, then you can use the object to refer to the data. On the other hand, if the data is sent as a JSON string, all you have to do in the javascript is:

var obj = JSON.parse(data);

...and obj will be something similar to a ruby Hash, where you can look up keys to get values.

So I guess my primary question is how the json part works...My understanding is that passing @expenses, it basically will render what @expenses.to_json returns, which is just a bunch of json, key-value pairs. How do I take that and make a table?

That's correct. You make the table using your programming skills.

A friend of mine that has done plenty of AJAX but no Ruby on Rails said that I can just write the HTML in the AJAX success function

Sure, but the trick is still to programmatically take the data in the json and insert it into an html table. If you want to go that route, you could return a complete table as the response, so that you can use ERB/Nokogiri/ruby on the server side to insert the data in the table. Then you would write something like:

@expenses = ....
render :file "/some/dir/expenses_table.html.erb"

Another approach might be to give each <td> in the table an id attribute that is equal to a key in your json data. Then you can use javascript to loop over each key in the json data, look up the <td> with that id, then replace the entry with the value in the json data corresponding to the key.

If you want more concrete suggestions, you'll have to post a small example of your table's html as well as what @expenses.to_json looks like.

By the way, the jQuery ajax() function has too many features, so all of the common ajax requests have shortcut functions, where the relevant options are filled in for you, e.g. getJSON(), where you just specify the url, data, and the success function. In this case, that doesn't save you much work, but maybe the function name is more descriptive than 'ajax'.

Response to comment questions:

I guess my confusion then is which javascript is this? Is this the original AJAX call?

Yes. That is the only javascript you need to code.

Should that be in a js.erb file then for me to call some ruby code?

No. You would use a js.erb file if you want to create some js using ruby (that is what erb is for), AND you want to return js code as the response. We've established that you don't want to return javascript as the response. However, using rails to setup ajax is very confusing, so I may not be understanding the gist of your questions. It's much simpler not to use rails to generate ajax javascript.

As far as I understand things, if you put remote: true in your rails html helper when you create an html form, then when the form is submitted, a request is sent to your rails app with an Accept header of text/javascript. That means if your action has a respond_to block with a format.js line, that line will execute, and you can send some javascript back to the browser, e.g. a .js.erb file that contains code that performs an ajax request to get your expense data. Your browser will immediately execute the returned js, which will send an ajax request back to the server asking for the expense data. Note that the rails way is inefficient: the browser has to send two requests to the server to accomplish one ajax request: one request is sent to the server to get the js code that will make an ajax request for the expense data, then the browser executes the ajax code which sends another request to the server to get the expense data.

Or can I call a javascript file in the respond to?

It looks to me like you want to replace the existing table with a whole new table, i.e. you are not changing two or three <td>'s in the existing table, which should makes things very easy. In fact, as far as I can tell, you can use the same erb code that you used to create the existing table to create the new table. However, your index action's response to an ajax request should only return the table--not the whole page. That suggests you should put the code that creates the table into a separate template, a partial:

views/shared/_table.html.erb:

<table id="expenses">
<thead><th>Description</th><th>Amount</th><th>Date</th></thead>
<% @expenses.each do |expense| %>
<tr> 
  <!-- I used an abbreviated Expense model: -->
  <td><%= expense.description %></td>
  <td><%= number_to_currency expense.amount %></td>
  <td><%= expense.date %></td>
</tr>
<% end %>
</table>

Then you include the partial in views/expenses/index.html.erb:

<h1>Expenses#index</h1>
<p>Find me in app/views/expenses/index.html.erb</p>

<div>
<select id='expense_day'>
<option value="all">All</option>
<option value="2014-10-5">10/5/14</option>
<option value="2014-10-6">10/6/14</option>
</select>
</div>

<%= render "shared/table" %>   <!-- HERE -->

By default, render() will look for a partial in the app/views directory called shared/_table.html.erb.

Those two files combined (inserted into the application layout) make up the index.html.erb view. Because the table is now a separate template, just the table can be rendered in response to an ajax request:

class ExpensesController < ApplicationController

  def index
    respond_to do |format|
      if request.xhr?  #Is this an ajax request?
        target_date_str = params['target_date']

        if target_date_str == "all"
          @expenses = Expense.all
        else
          @expenses = Expense.where(date: Date.strptime(target_date_str, "%Y-%m-%d"))
        end

        #Render just the table for the ajax request:
        format.html { render partial: "shared/table" }

      else  #then not an ajax request
        @expenses = Expense.all
        format.html   #By default renders index.html.erb 
      end
    end

  end

end

respond_to() looks at the Accept header in the request and based on that chooses a matching format:

format.html
format.json
format.xml
etc.  

I examined the request sent by jQuery's .get() ajax function, and it sends a request with an Accept header of text/html as the highest priority, so format.html will be chosen in the respond_to block. Edit: I originally wrote the index action thinking there would be a format.json line for the ajax request, and a format.html line for a non ajax request. But because the index action now returns html in both cases, the respond_to() block isn't needed:

class ExpensesController < ApplicationController
  def index
    if request.xhr?  #if an ajax request...
      target_date_str = params['target_date']

      if target_date_str == "all"
        @expenses = Expense.all
      else
        @expenses = Expense.where(date: Date.strptime(target_date_str, "%Y-%m-%d"))
      end

      render partial: "shared/table"  #Overrides rails default operation which renders index.html.erb

    else  #then not an ajax request
      @expenses = Expense.all  #rails defaults to rendering index.html.erb
    end

  end

Here is the javascript I used:

<script>

$( document ).ready(function() {
  $("#expense_day").on("change", function() {

    var selected_date = $(this).val();

    $.get( 
      "/expenses", 
      { target_date: selected_date }, 
      function(table) {
        $("#expenses").replaceWith(table)  
      }
    );

  });
});

</script>

    <h1>Expenses#index</h1>
    <p>Find me in app/views/expenses/index.html.erb</p>

    <div>
    <select id='expense_day'>
    <option value="all">All</option>
    <option value="2014-10-5">10/5/14</option>
    <option value="2014-10-6">10/6/14</option>
    </select>
    </div>

    <%= render partial: "shared/table", expenses: @expenses %>

I put the javascript in the index.html.erb view, which should make it clear that the javascript is part of the html page. However, you can remove the javascript from index.html.erb and put it in another file--but eventually the js has to find its way back into the index.html.erb file. Here are some links that discuss alternate locations for the javascript:

Why is rails not rendering the .js.erb file?

Best way to add page specific javascript in a Rails 3 app?

Rails has something called the asset pipeline, which is a method for cramming all the javascript and css into as few lines as possible by removing all the whitespace. Because the files are smaller, your browser can load them faster. To take advantage of that minifying, you have to put your assets, i.e. your javascript and css files, into certain directories. That is really not something you need to worry about because your javascript code is not thousands of pages long.