3

現在、書籍検索サイトからいくつかのデータを取得し、そのデータを個人用データ​​ベースに入力しようとしています。私の考えは、必要な 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 を動作させることができないように見えることです: [送信] ボタンをクリックしても、localhost から呼び出した 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 は現在、Same-origin Policy によりクロスドメインで直接リクエストを作成できません」について言及しています。外部ページでコードが機能しなかったのはこれが原因ですか? はいの場合、コードを機能させるために何ができるか、または同じ目標を達成するために他にどのようなアプローチを採用できますか? 私が取り組んでいる書籍検索サイトは複数ありますが、これらの多くには、データを直接抽出できる API がありません。

前もって感謝します。

PS: CG_DEV によるHow to use type: "POST" in jsonp ajax callの提案も試しました。これは、クロスドメイン AJAX に使用するデータ型である jsonp で $.post を実行できることを示しています。結果: Firebug では、POST リクエストが行われていることがわかります。しかし、私の関数コールバックは起動されず、少なくとも「成功」が返される必要がある場合、firebug は応答本文を登録しません。

4

1 に答える 1

1

クロス オリジン リソース共有を許可するように設定できます。次の 2 つの手順に従います。サーバーから応答ヘッダーにこれを設定します。

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

//* すべてのオリジン ドメインに対して許可する場合、または、cors を許可するオリジン ドメインも指定できます。

クライアント側でこれをページに追加します

$.support.cors = true;

短所: ie < ie10 では完全にはサポートされていません。

于 2013-05-24T04:58:24.990 に答える