在 rails 3.2.2 中使用 $.ajax() 异步获取数据
Posted
技术标签:
【中文标题】在 rails 3.2.2 中使用 $.ajax() 异步获取数据【英文标题】：Obtaining data asynchronously using $.ajax() in rails 3.2.2 【发布时间】：2012-05-01 04:33:27 【问题描述】：我正在尝试学习如何从我的 rails 3.2.2 项目异步“获取”数据。我是 javascript 和 jquery 的新手，但我了解到，javascript 无法从不同域中的服务器获取数据。为了解决这个问题，我已经阅读了有关使用 $.ajax()、$getJSON() 和/或 $.jsonp() 的信息，所以我的第一个问题是什么时候应该使用一个而不是另一个？
我正在尝试让一种技术发挥作用（例如，在我的 rails 3.2.2 项目中使用 $.ajax()。我有一个简单的脚手架，由一个控制器 => 图像和一个字段 => 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
我首先想探索索引操作并使用 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>
我从控制台收到以下信息：
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 中，或者我是否应该在我的控制器中添加其他参数或完全其他的东西？
【问题讨论】：
关于您在控制台中收到的第一条警告消息，请参阅***.com/questions/7825448/… 【参考方案1】： $(document).ready( function ()
$("button").click(function()
$.ajax(
dataType: 'json', // not jsonp
url: "http://localhost:3000/images.json",
success: function(response)
console.log(response);
);
);
);
【讨论】：
更改 localhost:3000/images.json 后，错误消失了，但是，我希望在 Images 表中看到记录，但控制台中没有显示任何内容。 XMLHttpRequest 无法加载 localhost:3000/images.json。 Access-Control-Allow-Origin 不允许来源localhost。 删除 json 作为数据类型会导致跨域问题，并且响应没有任何值。【参考方案2】：忽略控制台中的第一行 - 这是最近的 Chrome/jquery 版本中出现的标准警告。
第二行告诉你你的网络应用发送的是 html，而不是 json
第三行是由于试图解析 html（大概以“<html...”开头），就好像它是一个 json 字符串一样。
因此，您需要告诉 rails 向您发送 json，而不是 html。尝试将 json 调用中的 url 更改为“http://localhost:3000/images.json”。
【讨论】：
感谢您的回复。更改localhost:3000/images.json 后，错误消失了，但是，我希望在 Images 表中看到记录，但控制台中没有显示任何内容。以上是关于在 rails 3.2.2 中使用 $.ajax() 异步获取数据的主要内容，如果未能解决你的问题，请参考以下文章