web-dev-qa-db-ja.com

jQueryを使用してHTMLポストでiframeをターゲットにする

JQueryまたはJavaScriptを使用して投稿を行う場合、現在のページではなくiframeをターゲットにするにはどうすればよいですか？

jQuery.post( 
    url, 
    [data], 
    [callback], 
    [type] 
)

それがjQuery投稿のフォーマットです。<form>タグにあるようなターゲットを指定する場所があるようには見えません。

何か案は？

javascriptjqueryajaxiframe
27
Matt

これは、通常のフォームを介して実行できます。

<form action="targetpage.php" method="post" target="iframename" id="formid">
   <input type="hidden" name="foo" value="bar" />
</form>

その後、jQueryを使用してフォームを送信できます。

$("#formid").submit();
30
Josh

AJAXリクエストのポイントが欠落している可能性があります-非同期リクエストの「ターゲット」を指定しようとしているのはなぜですか？AJAXは、サーバーからのリクエストがJavascriptに送り返され、ページの再読み込みやHTMLの送信先がないことです。

リクエストの結果をiframeにロードする場合は、次を実行できます。

$.post('myurl', function(data) {
    $('#myframe').html(data);
}, 'html');
5
Paolo Bergantino

フォームを動的に作成し、本文に追加することで、フォーム内で許可されないフォームの問題を解決できます。だからあなたはこのようなことをするでしょう：

_$().ready(function() {
    $('body').append('<form 
       action="url" 
       method="post" 
       target="iframename" 
       id="myspecialform">
         <input type="hidden" name="parameter" value="value" />
       </form>');
});
_

これにより、ページ上の他のすべてを包含するメインフォームの外側にiframe更新フォームが作成されます。次に、Joshが推奨する$('#myspecialform').submit();のように呼び出します。

4
Alexander Garden

これは私がプレーンHTMLでjavascriptでどのようにしたかです：

var form=$("<form/>").attr({
    method: "post",
    action: "iframe.php",
    target: "list_frame"
});
form.append($("<input/>").attr({name:"field1",value:0}));
form.append($("<input/>").attr({name:"field2",value:1}));
form.append($("<input/>").attr({name:"field3",value:2}));
form.append($("<input/>").attr({name:"field4",value:3}));
form.append($("<input/>").attr({name:"field5",value:4}));
$("body").append(form);
form.submit();
4
Christopher Thomas

私はこの質問が古いことを知っていますが、jQueryを使用してASP.Net（C＃）でどのように行ったかを示します。

//Create the form in a jQuery object
$("<form action='/FormPostTo.aspx' method='post' target='nameofframe'></form>")
    //Get the value from the asp textbox with the ID txtBox1 and POST it as b1
    .append($("<input type='hidden' name='b1' />").attr('value',$('#<%= txtBox1.ClientID %>').val()))
    //Get the value from the asp textbox with the ID txtBox2 and POST it as b2
    .append($("<input type='hidden' name='b2' />").attr('value',$('#<%= txtBox2.ClientID %>').val()))
    //Add the form to the body tag
    .appendTo('body')
    //Submit the form which posts the variables into the iframe
    .submit()
    //Remove the form from the DOM (so subsequent requests won't keep expanding the DOM)
    .remove();

簡単なメモ：テキストボックスの値に引用符（'） 初期化。連結すると、HTMLが台無しになり、正しく解析されません。

また、使用後にDOMからフォームが削除されるため、iFrameに複数回投稿する場合にDOMをフォーム要素で埋めることはありません。

行うことができるわずかな変更の1つは、フォーム要素が存在しない場合は作成し、既に存在する場合はIDで参照して再利用することです。

3
Richard Marskell - Drackir

理想的にAJAX/jQuery。

  1. Asp.netフォーム名、ターゲット、アクション、メソッドなどをキャプチャする変数を作成しました。

  2. フォームからの情報をこれらの変数に保持し、jQueryを使用してフォーム自体を変更し、必要な処理を実行しました。

  3. 次に、AJAXを使用してフォームを投稿しました（他のページが情報を取得できるように、別のページに動的に投稿するフォームが必要だったため）。

  4. 最後に、asp.netフォームを元の状態に戻し、ページの残りの部分が正しく機能するようにしました。

これは、同様のソリューションに対する私のニーズを解決したようです。

0
Adam