前后端分离实现沙箱支付后，前端渲染后端传过来的form表单

一只笨菜鸟

已于 2022-09-13 23:35:24 修改

阅读量565

点赞数 2

分类专栏：有趣的前端文章标签： vue.js

于 2022-09-13 23:34:44 首次发布

本文链接：https://blog.csdn.net/m0_48660016/article/details/126843789

版权

有趣的前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

后端返回的form表单如下

<form name="punchout_form" method="post" action="...">

<input type="hidden" name="biz_content" value="{&quot;out_trade_no&quot;:&quot;123450679&quot;,&quot;total_amount&quot;:&quot;16&quot;,&quot;subject&quot;:&quot;苹果&quot;,&quot;body&quot;:&quot;好吃&quot;,&quot;product_code&quot;:&quot;FAST_INSTANT_TRADE_PAY&quot;}">
<input type="submit" value="立即支付" style="display:none" >
</form>
<script>document.forms[0].submit();</script>

前端接收数据后，

axios.get('/ali/pay')
	.then(function(response) {
		console.log(response);
		const div = document.createElement('divform');
		div.innerHTML = response.data;
		document.body.appendChild(div);  
		document.forms['punchout_form'].setAttribute('target', '_blank')
		document.forms['punchout_form'].submit()
}).catch(function(error) {
		// 处理错误情况
		console.log(error);
}).then(function() {
		// 总是会执行
});

punchout_form 是返回的form表单的name