利用iframe标签解决form的action执行网络接口时获取不到返回数据的问题

文章讲述了在利用HTML表单input自动检测功能时遇到的问题,即form的action提交网络接口无法接收返回值。解决方案是使用iframe绑定表单,并通过setTimeout处理异步获取iframe返回内容,以便在Vue中处理服务端响应。

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

问题说明: 若要利用input的自动检测功能(例如required=“required”、type=“email”),则必须利用form的action执行网络接口,且提交方式为type=“submit”,但是action执行网络接口无法接受返回值, 导致无法接收如登录注册功能服务端响应的结果。若舍弃input的自动表单验证,手写每个表单的验证很麻烦,因此要解决利用form提交表单数据无法接收返回数据的问题

解决方法: 利用iframe标签将form绑定,返回值将返回位在iframe上的页面,再获取页面中body的内容,即返回数据。

步骤与代码

  1. 利用iframe标签将form绑定,iframe标签的id要与form标签的target的值相同
<form class="input-form" method="post" action="user/userSignIn" target="signInIframe">
<iframe name="signInIframe" id="signInIframe" style="display: none"></iframe>
  1. 若不想利用iframe直接显示返回结果,则利用js获取iframe的body的内容,将获取的内容赋值给一个vue创建的变量,则可对返回值进行其他处理
setSignInMsg()  //获取iframe中body的内容
{
    var iframe = document.getElementById("signInIframe")
    var iframeDocument = iframe.contentDocument
    var iframeBody = iframeDocument.body
    this.otherMsg = iframeBody.innerHTML;  //otherMsg 为自己定义的其他变量
}

强调: 这个过程很有可能发生由于异步导致第一次获取不到iframe的内容,因此可以setTimeout处理。

setTimeout(() => {
    // 对变量进行其他处理
}, 1200);
setTimeout(() => {
    // 获取iframe的body的内容,并赋值给vue创建的变量
}, 500);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值