我正在尝试让我的AJAX调用使用rails 3，但我很困惑。 我有一个索引页面，它列出了一个小表格中的所有对象，后面有一个细节链接。 HAML页面如下所示：
%h1
Step 1: Create/upload your CV
#europasslogo
%table.index
%tr
%th.bottom_border= 'CV ID'
%th.bottom_border= 'CV Title'
%th.bottom_border= 'Links'
- @cvs.each do |cv|
%tr
%td.cell= cv.id
%td.cell= cv.name
%td.cell
= link_to 'Matching', match_resume_url(cv.id)
= link_to "Details", cv_path(cv.id), {:remote => true, :method => :get}
.clear
#details
当用户点击“详细信息”链接时，响应需要显示在底部的#details div中。这是非常基本的，因为我只想将CV的输出作为该div中的明文。
在我的控制器中，我创建了以下内容：
class CvsController < ApplicationController
def new
@cvs = Cv.all
end
def show
cv = Cv.find params[:id]
@data = IO.readlines("public/cvs/#{cv.id}.xml", "").to_s
render :layout => false
end
def match
@cv = Cv.find params[:id]
@language = Language.find_or_create_by_code :en
@vacancies = Vacancy.joins(:vacancy_occupations).where('vacancy_occupations.concept_id' => @cv.occupations.collect{|o| o.id}).uniq
end
end
获取CV并读取匹配的文件。到目前为止没什么特别的。 当我打开页面并单击链接时，我看到AJAX请求如此命中服务器：
Started GET "/cvs/2" for 192.168.33.82 at Fri May 13 00:55:49 -0700 2011
Processing by CvsController#show as JS
Parameters: {"id"=>"2"}
Cv Load (0.1ms) SELECT `cvs`.* FROM `cvs` WHERE `cvs`.`id` = 2 LIMIT 1
Rendered cvs/show.js.haml (2.1ms)
Completed 200 OK in 69ms (Views: 4.3ms | ActiveRecord: 0.1ms)
所以我知道服务器收到了AJAX调用并生成了响应。使用Firebug，我也可以在控制台中看到服务器的响应：
$('details').html(<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="http://europass.cedefop.europa.eu/xml/cv_en_GB.xsl" type="text/xsl"?>
<europass:learnerinfo xsi:schemaLocation="http://europass.cedefop.europa.eu/Europass/V2.0 http://europass.cedefop.europa.eu/xml/EuropassSchema_V2.0.xsd" xmlns:europass="http://europass.cedefop.europa.eu/Europass/V2.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" locale="en_GB">
<docinfo>
<issuedate>2011-05-05T11:31:55+02:00</issuedate>
<xsdversion>V2.0</xsdversion>
<comment>Automatically generated Europass CV</comment></docinfo>
<prefs>
<field name="step1.firstName" before="step1.lastName"></field>
<field name="step1.addressInfo" keep="true"></field>
<field name="step1.telephone" keep="false"></field>
<field name="step1.mobile" keep="false"></field>
<field name="step1.fax" keep="false"></field>
<field name="step1.email" keep="true"></field>
<field name="step1.nationality" keep="true"></field>
<field name="step1.birthDate" keep="true" format="/numeric/long"></field>
<field name="step1.gender" keep="true"></field>
<field name="step1.photo" keep="false"></field>
<field name="step1.application.label" keep="true"></field>
<field format="/numeric/long" name="step3List[0].period"></field>
<field name="step3List" keep="true" before="step4List"></field>
<field keep="false" name="step3List[0].company.sector.label"></field>
<field keep="false" name="step3List[0].company.addressInfo"></field>
<field keep="false" name="step3List[0].company.name"></field>
<field keep="true" name="step3List[0].activities"></field>
<field keep="true" name="step3List[0].position.label"></field>
<field name="step4List" keep="false"></field>
<field name="step5.motherLanguages" keep="false"></field>
<field name="step5.foreignLanguageList" keep="false"></field>
<field name="step6.socialSkills" keep="false"></field>
<field name="step6.organisationalSkills" keep="false"></field>
<field name="step6.technicalSkills" keep="false"></field>
<field name="step6.computerSkills" keep="false"></field>
<field name="step6.artisticSkills" keep="false"></field>
<field name="step6.otherSkills" keep="false"></field>
<field name="step6.drivingLicences" keep="false"></field>
<field name="step7.additionalInfo" keep="false"></field>
<field name="step7.annexes" keep="false"></field>
<field name="grid" keep="false"></field></prefs>
<identification>
<firstname>Wouter</firstname>
<lastname>ESCOmatch</lastname>
<contactinfo>
<address>
<addressLine>Haachtstesteenweg</addressLine>
<municipality>Kampenhout</municipality>
<postalCode>1910</postalCode>
<country>
<label>BElgium</label></country></address>
<telephone></telephone>
<fax></fax>
<mobile></mobile>
<email>wouter.dewanckel@tenforce.com</email></contactinfo>
<demographics>
<birthdate>1975-01-26</birthdate>
<gender>M</gender>
<nationality>
<label>belgium</label></nationality></demographics></identification>
<application>
<code>71110</code>
<label>Miner</label></application>
<workexperiencelist>
<workexperience>
<period>
<from>
<year>2000</year>
<month>--02</month>
<day>---02</day>
</from>
<to>
<year>2004</year>
<month>--02</month>
<day>---02</day>
</to>
</period>
<position>
<code>82121</code>
<label>Quartermaster staff, military</label>
</position>
<activities>
process control
diving
military
</activities>
<employer>
<name></name>
<address>
<addressLine></addressLine>
<municipality></municipality>
<postalCode></postalCode>
<country>
<label></label>
</country>
</address>
<sector>
<label></label>
</sector>
</employer>
</workexperience>
</workexperiencelist>
<languagelist>
<language xsi:type="europass:mother">
<label> </label></language></languagelist>
<skilllist>
<skill type="social"></skill>
<skill type="organisational"></skill>
<skill type="technical"></skill>
<skill type="computer"></skill>
<skill type="artistic"></skill>
<skill type="other"></skill>
<structured-skill xsi:type="europass:driving"></structured-skill></skilllist>
<misclist>
<misc type="additional"></misc>
<misc type="annexes"></misc></misclist></europass:learnerinfo>);
抱歉，文件相当大。所以我看到很多Javascript产生了。 show.js.haml文件如下所示：
= "$('details').html(#{@data});"
我做错了吗？我不是很擅长这个javascript的东西，但我要问的不是那么难吗？ 我想要的只是当我点击链接时，@ data变量中的所有内容都放在我的详细信息div中......
答案 0 :(得分：1)
使用= "$('details').html(#{@data});"代码会在HAML中转义。
使用!= "$('details').html(#{@data});"然后执行代码并替换内容。
但是我不确定'细节'是否是正确的选择器。据我所知，如果是ID，你应该使用'#details'。
答案 1 :(得分：1)
我认为当你将JS与服务器端代码分开时，你会发现更少的麻烦，而且twain不会满足。您的控制器基本上只是读取文件并将其加载到页面上。我们完全可以在JS中做到这一点：
简历链接
= link_to "Details", cv_path(cv.id), :'data-cv-id' => cv.id
JS连线
$('table.index').delegate('a[data-cv-id]', 'click', function (e) {
var id = $(e.target).data('cv-id');
$.ajax({
type: 'GET',
url: '/cv/' + id + '.xml',
dataType: 'xml',
success: function (xml) {
$('#detail').html(xml);
}
});
e.preventDefault();
});
（无耻的插件）我的jquery plugin可以让这更容易：
$('table.index').delegate('a[data-cv-id]', 'click', function (e) {
$.read('/cv/{id}.xml', { id: $(e.target).data('cv-id') })
.then(function (xml) {
$('#details').html(xml);
});
e.preventDefault();
});
JS连线 - 原型
以下是使用Prototype.js
的示例var table = $$('table.index')[0];
$(table).on('a[data-cv-id]', 'click', function (event, element) {
new Ajax.Request('/cv/' + event.getAttribute('data-cv-id') + '.xml', {
method: 'get',
onSuccess: function (transport) {
//do something with transport.responseXML
//not sure how to write Prototype code for this bit
}
});
Event.stop(event);
});
您可以更进一步，将请求/提出问题与amplify.request分开。另请参阅JS模板系统，如Handlebars。
我知道将Rails模板与Javascript结合起来很诱人......但根据我的经验，这从未真正解决过。将控制器编写为JSON / XML服务API并在Javascript中进行数据请求/模板化更容易。
从Rails中删除RJS是有原因的：当您在服务器端代码和前端代码之间创建这些不必要的连接时，您的应用程序会变得更脆弱并且难以维护。您的控制器不应该依赖于模板中的标记。
答案 2 :(得分：0)
感谢所有反馈人员，但我设法在我的帮助下得到了一些帮助。
在控制器中，我有以下代码：
@cv = Cv.find params[:id]
doc = REXML::Document.new File.open "public/cvs/#{@cv.id}.xml"
@data = REXML::XPath.first(doc.root, "identification").text
@data << REXML::XPath.first(doc.root, "application").text
@data << REXML::XPath.first(doc.root, "workexperiencelist").text
# Render the partial
render(:update) { |page| page.replace_html 'details', :partial => 'cvs/show', :layout => false}
这会加载我需要的所有数据并呈现局部视图。命令的其余部分完成我需要的魔法并触发javascript以更新内容。我个人认为这种方法很容易理解。