Fatal编程技术网
  • javascript/
  • Javascript 在rails 3.2.2中使用$.ajax（）异步获取数据

Javascript 在rails 3.2.2中使用$.ajax（）异步获取数据

javascript jquery ruby-on-rails ajax

Javascript 在rails 3.2.2中使用$.ajax（）异步获取数据,javascript,jquery,ruby-on-rails,ajax,jsonp,Javascript,Jquery,Ruby On Rails,Ajax,Jsonp,我正在尝试学习如何从rails 3.2.2项目异步“获取”数据。我对javascript和jquery都是新手，但我了解到，javascript无法从不同域中的服务器获取数据。为了解决这个问题，我已经阅读了有关使用$.ajax（）、$getJSON（）和/或$.jsonp（）的文章，所以我的第一个问题是什么时候应该使用它们 我正在尝试使用一种技术（例如，rails 3.2.2项目中的$.ajax（）），我有一个简单的支架，由一个控制器=>Images和一个字段=>t.string:name组成

我正在尝试学习如何从rails 3.2.2项目异步“获取”数据。我对javascript和jquery都是新手，但我了解到，javascript无法从不同域中的服务器获取数据。为了解决这个问题，我已经阅读了有关使用$.ajax（）、$getJSON（）和/或$.jsonp（）的文章，所以我的第一个问题是什么时候应该使用它们

我正在尝试使用一种技术（例如，rails 3.2.2项目中的$.ajax（）），我有一个简单的支架，由一个控制器=>Images和一个字段=>t.string:name组成

class ImagesController < ApplicationController
  # GET /images
  # GET /images.json
  def index
    @images = Image.all

    respond_to do |format|
      format.html # index.html.erb
      format.json { render json: @images }
    end
  end

  # GET /images/1
  # GET /images/1.json 
  def show
    @image = Image.find(params[:id])

    respond_to do |format|
      format.html # show.html.erb
      format.json { render json: @image }
    end
  end

  # GET /images/new
  # GET /images/new.json
  def new
    @image = Image.new

    respond_to do |format|
      format.html # new.html.erb
      format.json { render json: @image }
    end
  end

  # GET /images/1/edit
  def edit
    @image = Image.find(params[:id])
  end

  # POST /images
  # POST /images.json
  def create
    @image = Image.new(params[:image])

    respond_to do |format|
      if @image.save
        format.html { redirect_to @image, notice: 'Image was successfully created.' }
        format.json { render json: @image, status: :created, location: @image }
      else
        format.html { render action: "new" }
        format.json { render json: @image.errors, status: :unprocessable_entity }
      end
    end
  end

  # PUT /images/1
  # PUT /images/1.json
  def update
    @image = Image.find(params[:id])

    respond_to do |format|
      if @image.update_attributes(params[:image])
        format.html { redirect_to @image, notice: 'Image was successfully updated.' }
        format.json { head :no_content }
      else
        format.html { render action: "edit" }
        format.json { render json: @image.errors, status: :unprocessable_entity }
      end
    end
  end

  # DELETE /images/1
  # DELETE /images/1.json
  def destroy
    @image = Image.find(params[:id])
    @image.destroy

    respond_to do |format|
      format.html { redirect_to images_url }
      format.json { head :no_content }
    end
  end
end

class ImagesController
首先，我想探索索引操作，并使用up.html中的$.ajax（）调用“获取”图像名称列表：

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">    </script>
</head>
<body>
    <script>
        $(document).ready( function (){ 
            $("button").click(function(){
                    $.ajax({
                        dataType: 'jsonp',
                        url: "http://localhost:3000/images",
                        success: function(response) {
                            console.log(response);
                        }
                    });
            });
        });
    </script>

    <button id ="button" type ="button">Get names</button>

</body>
</html>


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$.ajax({
数据类型：“jsonp”，
url:“http://localhost:3000/images",
成功：功能（响应）{
控制台日志（响应）；
}
});
});
});
取名字
我从控制台收到以下信息：

event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed  from the engine in the near future.
jquery.min.js:16Resource interpreted as Script but transferred with MIME type text/html:  "http://localhost:3000/images?    callback=jQuery15209319186636712402_1334849479698&_=1334849481034".
images:1Uncaught SyntaxError: Unexpected token <

event.layerX和event.layerY在WebKit中已被破坏和弃用。它们将在不久的将来从引擎中删除。
jquery.min.js:16解释为脚本但使用MIME类型text/html传输的资源：http://localhost:3000/images?    callback=jquery1520919186636712402_13348494749698&_=13348494841034”。
图像：1默认语法错误：意外标记<
我在这里迷路了。我不确定我是否应该在url中使用“？callback=？”，或者我是否应该在控制器中使用其他参数，或者完全其他什么？

忽略控制台中的第一行-这是最新Chrome/jquery版本中出现的标准警告

第二行告诉您，您的web应用程序发送的是html，而不是json

第三行是由于试图解析html（大概从"
关于您在控制台中收到的第一条警告消息，请参阅感谢您的响应。更改后，错误消失了，但是，我希望看到Images表中的记录，但控制台中没有显示任何内容。更改localhost:3000/Images.json后，错误消失了，但是，我希望看到Images表中的记录Images表，但console.XMLHttpRequest中没有显示任何内容无法加载。Access-Control-Allow-Origin不允许使用Origin。将json作为数据类型删除会导致跨域问题，并且响应没有任何值。

       $(document).ready( function (){ 
            $("button").click(function(){
                    $.ajax({
                        dataType: 'json',  // not jsonp
                        url: "http://localhost:3000/images.json",
                        success: function(response) {
                            console.log(response);
                        }
                    });
            });
        });