VUE处理支付宝支付返回的form表单

最新推荐文章于 2024-05-28 17:25:17 发布

原创最新推荐文章于 2024-05-28 17:25:17 发布 · 9.9k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#支付宝支付 #form表单 #vue

vue 专栏收录该内容

2 篇文章

订阅专栏

本文阐述了前端如何处理从后端获取的支付表单信息，通过解析返回的数据并在新页面中自动提交表单，实现无缝支付体验。关键步骤包括响应后端接口返回的数据、在目标页面动态插入HTML数据并自动触发表单提交。

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

大部分的配置都是后端来处理，所以我这里只说前端拿到后台返回的form表单信息该如何处理。

调用后台接口返回结果处处理：

if (res.code == 200) {
     let routerData = this.$router.resolve({path:'/payGateWay',query:{ htmlData: res.data.html}})
     // 打开新页面
      window.open(routerData.href, '_ blank')
}

然后payGateWay.vue这个页面：

<template>
     <div v-html = "payGateWay">{{payGateWay}}</div>
</template>

<script>
    export default {
        name: 'payGateWay',
        data(){
            return {
                payGateWay:''
            }
        } ,
        mounted () {
            let form = this.$route.query.htmlData
            this.payGateWay = form
            this.$nextTick(()=> {
                document.getElementById('paymentSubmit').submit()
            })
        }
    }
</script>

到此就可以了。