1

サーバー (Java サーブレット) からの投稿応答に基づいて div コンテンツを生成しているサードパーティと協力しています。私が抱えている問題の 1 つは、フォームにレベル付けされたラジオ ボタンのリストがあることです。

そのフォームで送信を押したら、サーバーへのポスト呼び出しを行い、サード パーティ サイトでその div を再レンダリングする必要があります。jQueryのさまざまなバリエーションを無駄に使用しました。

最新の jQuery を含めました (jQuery のサブ 1.4 リリースも試しました)。フォームの送信ボタンを押すと、同じページをレンダリングするだけで、サーバーへの呼び出しはレンダリングしません。

作成したフォームに基づいて投稿結果をレンダリングするローカル ページの div を更新するにはどうすればよいですか? 以下は私が現在持っているものです：

形：

    <form action='\' id=\"form1\">... radio buttons ... </form>
    <input hidden field name = value passed from Java method>
    <input hidden field id = value passed from Java method>
    <input hidden field the value of the selected checkbox>

HTML:

    <script language='Javascript' type='text/javascript'>
    $(\"#form1\").submit(function(event) {
      event.preventDefault();

      var $form = $( this ),
        name2= $form.find( 'input[name=\"name\"]' ).val(),
        id2= $form.find( 'input[name=\"id\"]' ).val(),
        url = $form.attr( 'action' );
    $.post( url, { name2:name, id2:id },
      function( data ) {
         var content = $( data ).find( '#content' );
         $( \"#this_div\" ).empty().append( content );
      });
    });
    </script>
4

1 に答える 1

0

サードパーティのサイトからサーバーへの AJAX リクエストの送信:

ブラウザーのセキュリティ要件により、現在、サードパーティ サーバーに対してクロスドメイン AJAX 要求を行うことはできません。これは、$.post 要求が同一ドメイン ポリシーと呼ばれるものに限定されることを意味します。

したがって、サーバーが example.com でサードパーティ サーバーが domain.com の場合、domain.com はサーバーに対して AJAX リクエストを作成できません。

ただし、このブラウザのセキュリティを回避するために使用できる手法があります。XMLHttpRequests をクロス ドメインにすることはできませんが、JavaScript<script>タグ ブロックは任意のドメインから JavaScript を読み込むことができます。

スクリプト タグ リモーティング (JSONP) では、スクリプト タグを使用してサーバーにリクエストを送信します。

スクリプトタグ:

// from domain.com to your server, example.com, make a request using a script tag
var urlWithParams = "http://example.com/getHTMLForm.do?id2=" + id2 + "&name2" + name2;
var script = document.createElement("script");
script.setAttribute("type","text/javascript");
script.setAttribute("src", urlWithParams);

// create a script tag, which invokes your servlet 
document.getElementsByTagName("head")[0].appendChild(script);

getHTMLForm.do は、データを送信して応答で HTML を取得するために現在使用している架空のサーブレットです。POST を使用して要求本文でパラメーターを渡す代わりに、データをクエリ パラメーターとして渡します。

サーバーの応答: :

次に、サーバーは、サーバー上で生成した JSON で応答しますが、要求を行う Web ページで定義された JavaScript 関数内でラップまたはパディングされます。

// your response from your server
insertFormOnPage({"html":"<form action='#'><input name='name' /><input name='id' /></form>", "elem" : "#content"});

サードパーティのクライアント側コード:

この手法が機能するには、サーバーが返す関数と一致する関数がサードパーティのサイトに定義されている必要があります。

function insertFormOnPage( data ) {

    alert( data.html ); // prints the HTML for debugging
    alert( data.elem ); // prints the selector you want to insert into

    // inject the HTML into the #content DIV
    $( data.elem ).html( data.html );
}

サードパーティ サイトの HTML:

<!-- Let's just assume the third party site's DIV is empty for simplicity -->
<div id="#content"></div

説明：

  • サーバーは、純粋な JavaScript を JavaScript として、すぐに実行される関数としてクライアント側に返します。

  • この関数は、次の項目を JavaScript オブジェクトのプロパティとして受け取ります: HTML と div id。

  • この関数は、オブジェクトの html および elem プロパティにアクセスして、html 文字列とセレクターの両方にアクセスします。

  • jQuery を使用して、関数は DIV#content 要素内に HTML を挿入します。

この手法について最後に知っておくべきことは、JavaScript がサーバーから取得される方法であるため、GET メソッドのみがサポートされているということです。これは、POST 要求ではなく、このデータの GET 要求を受け入れるようにサーバーが構成されていることを確認する必要があることを意味します。

jQuery を使用した JSONP:

上記のソリューションは、内部で何が起こっているかの概念を説明するのに役立ちますが、jQuery getJSONも確認することをお勧めします。具体的には、JSONP の例を見てください。これは、ページをリロードせずにクロスドメイン リクエストを行う唯一の方法です。

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
  {
    tags: "cat",
    tagmode: "any",
    format: "json"
  },
  function(data) {
    $.each(data.items, function(i,item){
      $("<img/>").attr("src", item.media.m).appendTo("#images");
      if ( i == 3 ) return false;
    });
  });
于 2012-05-25T02:46:38.517 に答える