使用ajax从heroku获取rails json数据到静态网站答案

【问题标题】：fetch rails json data from heroku with ajax to static website使用ajax从heroku获取rails json数据到静态网站
【发布时间】：2014-05-06 13:14:14
【问题描述】：

我在获取要在静态网站中显示的 json 数据时遇到问题。数据来自一个简单的 ruby on rails REST 服务——它位于 heroku。在这个例子中，我只是从 localhost 使用它。对，它说我的数据未定义。

$(document).ready(function() {

  $.ajax({  
    type: "GET",
    url: "http://localhost:3000/projects.json", 
    cache: false,
    dataType: "json",
    data: {
      success: function(data) { 
        alert(data);
        $.each(data, function(index, value) { 
          var v = JSON.parse(value);
          $("<ul><li>" + v.name + "</li><li>" + v.description + "</li><li>" +v.tech + "</li></ul>")
            .appendTo($("#tech"));
        });
      }
    }
  });

});

我的另一个问题是我如何将它附加到属性名称、描述、技术中——这在 html 中：

<section id="projects">
        <h2>
            Projects
        </h2>
         <article id="project">
             <img id="project-image" src="" alt=""/>
            <label id="name">

             </label>
             <ul id="tech">
                <li>

                 </li>
                 <li>

                 </li>
             </ul>
             <p id="description">

             </p>
         </article>

【问题讨论】：

当您在浏览器中访问localhost:3000/projects.json 时会发生什么？这会显示您想要的 JSON 吗？
它从我所有的项目中返回了 json
为什么你的成功函数在数据元素里面？
如果成功，它应该获取数据，遍历元素并附加到 html 元素。但我不确定是否有这样做的标准方法......
@PerJohannessen - 所有回调都应该是传递给$ajax 的对象的第一级元素。我注意到将它传递给 data 元素仍然可以调用它（不知道为什么），但是它的行为并不像它应该那样。

标签： ruby-on-rails ruby ajax json heroku

【解决方案1】：

@BroiSatse 是对的——成功不应该在数据内部。请尝试以下操作：

$(document).ready(function() {

  $.ajax({  
      type: "GET",
      url: "http://localhost:3000/projects.json", 
      cache: false,
      dataType: "json",
      success: function(data) { 
        alert(data);

        $.each(data, function(index, value) { 
          var v = JSON.parse(value);

          $("<ul><li>" + v.name + "</li><li>" + v.description + "</li><li>" +v.tech + "</li></ul>")
                                    .appendTo($("#tech"));
        });
      }
    });
 });

【讨论】：

好的，现在我明白了：XMLHttpRequest cannot load localhost:3000/projects.json?_=1399384895492。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问 Origin 'null'。
@PerJohannessen - 尝试将 dataType 更改为 jsonp
它删除了错误消息，我可以看到它正在尝试从服务器获取。但它没有附加到任何元素...
好像我的数据里什么都没有

【解决方案2】：

在我的项目控制器中添加了这个：

 def index
  @projects = Project.all
  projects = @projects.to_json
  respond_to do |format|
  format.json {render :json => projects, :callback => params[:callback]}
 end
end

在客户端/ajax 端：

$(document).ready(function() {

  $.ajax({  
    type: "GET",
    url: "heroku_url/projects.json", 
    cache: false,
    dataType: "json",
    success: function(data) { 
    alert(data);

    $.each(data, function(index, value) { 

    $("<article id='project'><label id='name'>"+data[index].name+"</label>
    <pid='tech'>"+data[index].tech+"</p><p id='description'>"+data[index].description+"
    </p></article><br />").appendTo($("#projects"));

     });
    }
  });
});

【讨论】：