1

Rails 3.2.2 プロジェクトからデータを非同期的に「GET」する方法を学ぼうとしています。私はjavascriptとjqueryの両方に不慣れですが、javascriptは別のドメインのサーバーからデータを取得できないことを学びました。それを回避するために、$.ajax()、$getJSON()、および/または $.jsonp() の使用について読んだので、最初の質問は、いつこれらを別のものよりも使用する必要があるかということです。

Rails 3.2.2プロジェクト内で1つの手法を機能させようとしています(例: $.ajax() 。1つのコントローラー=>画像と1つのフィールド=> 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

まず index アクションを調べて、up.html で $.ajax() 呼び出しを使用して画像名のリストを「GET」します。

<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>

コンソールから次のメッセージを受け取りました。

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 <

私はここで迷っています。「?callback=?」を使用すべきかどうかわかりません。私のURLに、またはコントローラーに追加のパラメーターが必要かどうか、またはまったく別の何かが必要ですか?

4

2 に答える 2

2 
       $(document).ready( function (){ 
            $("button").click(function(){
                    $.ajax({
                        dataType: 'json',  // not jsonp
                        url: "http://localhost:3000/images.json",
                        success: function(response) {
                            console.log(response);
                        }
                    });
            });
        });
于 2012-04-19T15:55:53.250 に答える
1

コンソールの最初の行は無視してください。これは、最近の Chrome/jquery バージョンで表示される標準的な警告です。

2 行目は、Web アプリが json ではなく html を送信したことを示しています。

3 行目は、html (おそらく " " で始まる<html...) を json 文字列であるかのように解析しようとしたためです。

そのため、html ではなく json を送信するように rails に指示する必要があります。json 呼び出しの URL を「http://localhost:3000/images.json」に変更してみてください。

于 2012-04-19T15:53:18.443 に答える