JQuery 以iframe方式提交表单

最新推荐文章于 2022-08-22 11:56:51 发布

原创最新推荐文章于 2022-08-22 11:56:51 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JQuery

JQuery 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何利用JQuery通过iframe技术实现表单的异步提交，避免页面刷新，保持用户体验流畅。主要内容包括设置iframe，绑定事件，处理提交过程及返回结果等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function iframeForm(url, parameters){
//新增form
    this.form = $('<form action="'+url+'"method="post" style="display:none;"></form>');
//新增提交的参数
    $(Object.keys(parameters)).each(function(idx,e){
    	$("<input type='hidden' />").attr("name", e).attr("value", parameters[e]).appendTo(this.form);
    });
//提交表单
    this.submit = function(){
        var iframe = $('<iframe style="display:none;"></iframe>');
        $( "body" ).append(iframe); 
        $( "body" ).append(this.form);
        this.form.submit();
    }
}

实例

var url = "getXXX";
var parameters = {
	"key1": "value1",
	"key2": "value2",
	"key3": "value3",
}
var form = new iframeForm(url, parameters);
form.submit();