使用带有jQuery的HTML Post来定位iframe

时间:2009-06-16 21:15:32

标签: javascript jquery ajax iframe

如果我使用jQuery或JavaScript来发布帖子,我该如何让它定位iframe而不是当前页?

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

这是jQuery帖子的格式,似乎没有任何地方像<form>标签那样指定目标。

有什么想法吗?

7 个答案:

答案 0 :(得分:30)

您可以通过常规表格执行此操作:

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

然后,您可以使用jQuery提交表单:

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

答案 1 :(得分:5)

也许您错过了AJAX请求的意思 - 为什么要尝试指定异步请求的“目标”?这没有任何意义,因为AJAX的重点是来自服务器的请求被发送回Javascript,没有页面重新加载或HTML目的地。

如果您想将请求的结果加载到iframe,可以执行以下操作:

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

答案 2 :(得分:4)

您可以通过动态创建表单并将其附加到正文来解决无形式允许的表单问题。所以你会做这样的事情:

$().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();

答案 3 :(得分:4)

这是我在javascript中使用普通html的方式:

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 :(得分:3)

我知道这个问题已经过时了,但是我是如何使用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后从DOM中删除该表单,因此如果多次发布到iFrame,则不会使用表单元素填充DOM。

您可以进行的一个小改动是创建表单元素(如果它不存在),然后仅通过ID引用它(如果它已经存在并重用它)。

答案 5 :(得分:0)

当我需要通过理想情况下使用AJAX / jQuery的表单向远程页面提交数据时,我采取的措施是解决在asp.net页面上的表单中存在表单的问题。

  1. 我创建了变量来捕获asp.net表单名称target, 行动,方法等

  2. 我从表格中获取了这些信息 那些变量然后用jQuery改变了表单本身 我需要它做什么。

  3. 然后我通过AJAX发布了表单(因为我需要一个表单动态地发布到一个单独的页面,所以另一个 页面可以获取信息)。

  4. 最后,我更改了asp.net表单 它的方式使页面的其余部分可以正常工作。

  5. 这似乎解决了我对类似解决方案的需求。

答案 6 :(得分:-1)

你错过了AJAX的观点。如果你想将某些内容发布到iframe,你可以通过一个简单的表单,通过JavaScript或通常的方式发布:提交按钮。