Target an iframe with a HTML Post with jQuery

问题:

If I'm using jQuery or JavaScript to do a post, how can I make it target an iframe rather than the current page?

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

That is the format of the jQuery post, it doesn't seem as though there is anywhere to specify the target like there is in the <form> tag.

Any ideas?

回答1:

You can do this via a regular form:

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

You can then use jQuery to submit the form:

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

回答2:

Maybe you are missing the point of an AJAX request - why are you trying to specify the "target" of an asynchronous request? This makes no sense as the whole point of AJAX is that the request from the server gets sent back to the Javascript, free of page reloads or HTML destinations.

If you wanted to load the result of the request onto an iframe, you might do:

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

回答3:

You can solve the no-form-allowed-within-a-form problem by dynamically creating the form and appending it to the body. So you'd do something like this:

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

That creates your iframe-updating form outside of the main form that encompasses everything else on the page. Then just call it as Josh recommended: $('#myspecialform').submit();.

回答4:

here is how I did it in javascript with plain 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();

回答5:

I know this question is old, but here's how I did it on ASP.Net (C#) using jQuery.

//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();

Just a quick note: I did the input tags like that rather than concatenating them, in case the value of the textbox had a quote (') in it. If you concatenated it in, it would mess up the HTML and it wouldn't parse correctly.

Also, this removes the form from the DOM after it's been used so you don't fill up the DOM with form elements if you post to the iFrame multiple times.

One slight change that you could make, would be to create the form element if it doesn't exist and then just reference it by ID if it already exists and reuse it.

回答6:

Here's what I did to get around the issue of having a form within a form on a asp.net page when I needed to submit data to a remote page via a form ideally using AJAX / jQuery.

1. I created variables to capture the asp.net form name, target, action, method, etc.

2. I held that information from the form in those variables and then changed the form itself using jQuery to do what I needed it to do.

3. Then I posted the form via AJAX (because I needed a form to post to a seperate page dynamically so the other page could GET the info).

4. Finally, I changed the asp.net form back to the way it was so the rest of the page could work correctly.

This seems to have resolved my need for a similar solution.

回答7:

You're missing the point of AJAX. If you want to post something to an iframe, you could do this by a simple form, posted by JavaScript or by the usual way: a submit button.