form 表单提交到 iframe 遇到的问题

最新推荐文章于 2020-06-17 13:36:40 发布

chipi6009

最新推荐文章于 2020-06-17 13:36:40 发布

阅读量1k

点赞数

原文链接：https://my.oschina.net/igeeker/blog/378847

版权

不知道有多少人这么写代码的。。

<form id="form" action="/view" method="post" target="test">
<input type="test" name="t" value="t"/>
<input type="button" value="submit"/>
</form>
<iframe id="test" name="test"></iframe>

<script> $('input[type="button"]').on('click', function(){
    $('#form').submit();
    $('#test').load(function(){
         var res = $(this).contents().find('body').text();
         console.log(res);
    });
}); </script>

这段代码目的就是将form表单里的数据提交到后台，后台返回内容到iframe里，这样可以不用跳转页面，实现当前页面不刷新的效果(之所以不用 ajax，是不想为 ajax 写过多的请求参数)。

但是我的js代码有问题。。

就是$('#test').load(function(){}) 写在了 button 的 'click' 事件里面，

后果就是每次 button.click 的时候，$('#test') 都会绑定一次 load 事件，在页面不刷新的情况下，会造成$('#test') 绑了多次 load 事件，

也就会造成，每次 button.click ， $('#test').load(function(){会执行多次...});(这应该是个低级ERROR);

解决办法方案就是

<script> 
$('input[type="button"]').on('click', function(){
    $('#form').submit();
}); 
$('#test').load(function(){
    var res = $(this).contents().find('body').text();
    console.log(res);
});

</script>

将 load 事件放在外面。。

最后，再也不犯这种错误了！！

转载于:https://my.oschina.net/igeeker/blog/378847