当注入外部URL时，jQuery AJAX无法工作 - jQuery AJAX can't work when injected on external URL?

我正在尝试从图书搜索站点检索一些数据，并用这些数据填充个人数据库。我的想法是在页面上注入必要的jQuery，这样当我看到一个标题，我认为我想在未来返回，我可以点击一个复选框，做必要的额外的评论，然后我希望通过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">&lt;item&gt;&lt;title&gt;' + title + '&lt;/title&gt;&lt;author&gt;' + author + '&lt;/author&gt;&lt;publisher_n_edn&gt;' + publishd + '&lt;/publisher_n_edn&gt;&lt;status&gt;' + status + '&lt;/status&gt;&lt;image&gt;' + img_link + '&lt;/image&gt;&lt;serep&gt;N&lt;/serep&gt;&lt;/item&gt;</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工作:当我点击我的提交按钮，我没有看到输出，当我使用完全相同的jQuery时，我从本地主机调用的HTML文件。这个，我称之为使用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无法从本地主机检索数据，其中提到了"由于同源策略，JavaScript目前无法跨域直接请求"。这就是为什么我的代码不能在外部页面上工作的原因吗?如果是，我能做些什么使代码工作，或者我能采用什么其他方法来实现相同的目标?我正在开发多个图书搜索站点，其中许多站点没有API，我可以直接从中提取数据。

提前谢谢你。

注:我也尝试了CG_DEV关于如何使用type: "POST"的建议。在jsonp ajax调用中，它表示$。post可以用json完成，这是跨域AJAX使用的数据类型。结果:在Firebug上，我确实看到了POST请求。但是我的函数回调没有被触发，并且firebug在至少应该返回"Success"时没有注册响应体。

可以设置允许跨域资源共享请遵循两个步骤:在响应头

上设置

Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin:*

//*如果你想允许所有的源域，或者你也可以指定你想允许cors的源域

在客户端添加到您的页面

$.support.cors = true;

缺点:ie <ie10。>