jQuery AJAX 在外部 URL 上注入时无法工作？
Posted
技术标签:
【中文标题】jQuery AJAX 在外部 URL 上注入时无法工作？【英文标题】：jQuery AJAX can't work when injected on external URL? 【发布时间】：2013-05-19 15:08:52 【问题描述】：我目前正在尝试从图书搜索网站检索一些数据，并用这些数据填充个人数据库。我的想法是在页面上注入必要的 jQuery，这样当我看到一个我想以后想返回的标题时，我就可以点击一个复选框，制作必要的额外 cmets，然后我希望提交通过 AJAX 到一个 php 脚本，然后用适当的标题为我填充我的 mysql 数据库。
请查看此示例以获取图书馆目录：
// for every book entry, append checkboxes
$('.document-frame').append('<p>Choose:?<input type="checkbox" class="Jcustom_c" /></p><p>Serendepity?:<input type="checkbox" class="Jserep" /></p><p>Include snippet?:<input type="checkbox" class="Jsnippet" /></p>');
// append a Submit button at the bottom of the page, and a blank div for feedback upon success in POST-ing the necessary data
$('#resultPage').append('<input id="Justin" class="Jcustom" type="submit"/><div id="Jfeedback"></div>');
// whenever my checkbox is checked, retrieve / "scrape" the necessary book data
$('.Jcustom_c').change(function()
if ($(this).is(':checked'))
var title = $(this).parent().parent().find('.title a').text();
var author = $(this).parent().parent().find('.authors a').text();
var publishd = $(this).parent().parent().find('.publisher').text();
var status = $(this).parent().parent().find('.metadata .summary').text();
var img_link = $(this).parent().parent().find('img.artwork').attr("src")
// create an XML string from that data. Escape "<" and ">", otherwise when we append the string to the browser for feedback, the browser will not render them correctly.
var appended = '<div class="Jappended"><item><title>' + title + '</title><author>' + author + '</author><publisher_n_edn>' + publishd + '</publisher_n_edn><status>' + status + '</status><image>' + img_link + '</image><serep>N</serep></item></div>';
// show the string just below the book title. Hence if I "pick" the book from the catalogue, the XML string will show up to confirm my the fact that I "picked" it.
$(this).parent().parent().append(appended);
// if I uncheck the box, I remove the XML string
else
$(this).parent().nextAll(".Jappended").remove(appended);
$(this).parent().prevAll(".Jappended").remove(appended);
);
然后我有了 AJAX：
$('#Justin').click(function(e)
e.preventDefault;
var string = "<itemset>";
$(".Jappended").each(function()
var placeh = $(this).text();
string = string + placeh;
$('.results_container').append(string);
)
// these come from <textarea> boxes I append to the end of the page just before the Submit button. (Above, I did not include the jQuery to append these boxes.)
var odp = $("#odp").val()
var mre = $("#motivation_revisit").val()
var mra = $("#motivation_rationale").val()
var stu = $(".hdr_block h5 span").text()
var string = string + "<odpath>" + odp + "</odpath><stused>" + stu + "</stused><motivation><revisit>" + mre + "</revisit><rationale>" + mra + "</rationale></motivation></itemset>"
var post_var = xml_string : string, source : "NUS" ;
$.post('http://localhost:8888/db-ajax.php', post_var , function(data)
$('#Jfeedback').html(data);
);
我的问题是我似乎无法让 AJAX 工作：当我单击提交按钮时，我看不到在我调用的 HTML 文件上使用完全相同的 jQuery 时所期望的输出本地主机。这个，我用http://localhost:8888/some_html.html 调用的工作：
<html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script>
$(document).ready( function()
...
$('#Justin').click(function(e)
e.preventDefault;
var string = "<itemset>";
/*
$(".Jappended").each(function()
var post_var = xml_string : "hello", source : "NUS" ;
$.post('http://localhost:8888/db-ajax.php', post_var , function(data)
// if (data == "Success")
$('#Jfeedback').html(data);
//
);
);
);
</script>
<body>
...
</body>
</html>
db-ajax.php 很简单：
echo "Success";
我已经阅读了这篇文章：jQuery cannot retrieve data from localhost，其中提到了“由于同源策略，javascript 目前无法跨域直接请求”。这是我的代码无法在外部页面上运行的原因吗？如果是，我该怎么做才能使代码正常工作，或者我可以采用哪些其他方法来实现相同的目标？我正在开发多个图书搜索网站，其中许多没有可以直接从中提取数据的 API。
提前谢谢你。
P.S.：我还尝试了 CG_DEV 在How to use type: "POST" in jsonp ajax call 上的建议，它说 $.post 可以使用 jsonp 完成，这是用于跨域 AJAX 的数据类型。结果：在 Firebug 上，我确实看到了 POST 请求。但是我的函数回调没有被触发，并且当至少应该返回“成功”时，firebug 没有注册响应体。
【问题讨论】：
【参考方案1】：你可以设置允许跨域资源共享 遵循两个步骤： 从服务器在响应头上设置这个
Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin:*
//* 如果你想允许它用于所有源域，或者你也可以指定你想允许 cors 的源域。
在客户端将其添加到您的页面上
$.support.cors = true;
缺点：在 ie
【讨论】：
我只是重新审视这个答案。有没有一种只在客户端启用而不是使用 jQuery 的 jscript 方式？以上是关于jQuery AJAX 在外部 URL 上注入时无法工作？的主要内容，如果未能解决你的问题，请参考以下文章