使用rails中的$ .ajax（）異步獲取數據3.2.2

我正試圖學習如何從我的rails 3.2.2項目異步獲取數據。我對javascript和jquery都很陌生，但我瞭解到，javascript無法從不同域中的服務器獲取數據。爲了避免使用$ .ajax（），$ getJSON（）和/或$ .jsonp（），所以我的第一個問題是什麼時候應該使用另一個？我有一個簡單的腳手架組成的一個控制器=>圖像和一個字段=> t.string：。名字

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

我首先要探討的索引操作，並使用$阿賈克斯（）調用在up.html「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 =？'在我的網址，或者如果我應該在我的控制器或其他什麼其他的參數完全？

來源

2012-04-19 JohnGalt

關於您在控制檯中看到的第一個警告訊息，請參閱http://stackoverflow.com/問題/ 7825448/webkit-issues-with-event-layerx-and-event-layery – Matt 2012-04-19 15:53:12

忽略控制檯中的第一行 - 這是最近出現在Chrome/jquery版本中的標準警告。

第二行是告訴你，你的Web應用程序發送的HTML，而不是JSON

第三行是在試圖解析HTML（大概開始於「<html...」），就好像它是一個JSON字符串。

所以，你需要告訴軌道發送給你json，而不是html。試着改變你的網址在JSON調用「的」 http：//本地主機：3000/images.json」。

來源

2012-04-19 15:53:18

謝謝你的迴應。更改http：// localhost：3000/images.json後，錯誤消失了，不過，我預料以查看Images表中的記錄，但在控制檯中沒有顯示任何內容。 – JohnGalt 2012-04-19 16:06:06

 $(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-19 15:55:53 thecodeparadox

在更改localhost：3000/images.json後，錯誤消失了，但是，我期望在Images表中看到記錄，但沒有顯示 – JohnGalt 2012-04-19 16:11:09

@JohnGalt試試我的更新回答 – thecodeparadox 2012-04-19 16:15:01

XMLHttpRequest無法加載http：// localhost：3000/images.json。或者igin http：// localhost不被Access-Control-Allow-Origin允許。 – JohnGalt 2012-04-19 16:17:39

使用rails中的$ .ajax（）異步獲取數據3.2.2

回答

相關問題