前端获取到form后调起支付宝支付

前端获取到form后调起支付宝支付

后端返回的数据中,会有一串form表单字符串,前端需要做的就是把这串form 表单字符串通过appendchild 方法添加到当前页面上,并且执行这个表单的submit() 方法,表单提交后,将会自动跳转到支付宝支付页面

获取到的form数据:
获取到的form
加入到页面后的form:
处理后的form

实例代码:

//支付宝支付
Alipay:function () {
    let _this = this;
    axios.post('/index/shop/*****', {
        data : _this.data,          // 参数
    }).then(function (response) {	
        let datas = response.data;
        console.log(response.data);
        /* 此处form就是后台返回接收到的数据 */
        var form = datas.data.pay_conf;
        console.log(form);
        const div = document.createElement('div');
        div.innerHTML = form;
        document.getElementById('car_content').appendChild(div);
        document.getElementById('alipaysubmit').submit();
    }).catch(function (error) {
        console.log(error);
        layer.msg('调用支付宝支付失败');
    });
}
  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论
前端展示后端返回的支付宝支付form表单可以通过以下步骤: 1. 在Vue组件中使用axios等工具向后端发送请求,获取后端返回的支付宝支付form表单数据。 2. 在Vue组件的模板中使用v-html指令将获取到的form表单数据渲染到页面上。 3. 需要注意的是,由于支付宝支付form表单中包含了敏感信息,为了避免安全问题,应该将form表单的提交动作设置为空,即不提交到任何地址,而是在前端通过JavaScript代码来触发提交操作。 例如,假设后端返回的支付宝支付form表单数据如下: ```html <form name="alipayment" method="post" action="https://openapi.alipay.com/gateway.do?charset=utf-8"> <input type="hidden" name="app_id" value="your_app_id"> <input type="hidden" name="biz_content" value="your_biz_content"> <input type="hidden" name="charset" value="UTF-8"> <input type="hidden" name="format" value="JSON"> <input type="hidden" name="method" value="alipay.trade.wap.pay"> <input type="hidden" name="sign_type" value="RSA2"> <input type="hidden" name="timestamp" value="your_timestamp"> <input type="hidden" name="version" value="1.0"> <input type="hidden" name="sign" value="your_sign"> </form> ``` 在Vue组件的模板中,可以使用以下代码展示这个form表单: ```html <template> <div v-html="alipayForm"></div> </template> <script> import axios from 'axios' export default { data() { return { alipayForm: '' } }, mounted() { axios.get('/api/alipay-form').then(response => { this.alipayForm = response.data this.submitAlipayForm() }) }, methods: { submitAlipayForm() { // 触发form表单的提交操作 document.forms['alipayment'].submit() } } } </script> ``` 在上面的代码中,mounted方法中通过axios发送请求获取后端返回的支付宝支付form表单数据,并将其赋值给alipayForm属性,然后在模板中使用v-html指令将alipayForm属性的值渲染到页面上。同时,为了避免安全问题,submitAlipayForm方法中通过JavaScript代码手动触发form表单的提交操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

钟小民

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值