标签：支付宝 微信 表单 forms divForm blob 支付 div document

支付宝

后端返回的是表单字符串，需要将表单插入到dom树

拿到的表单字符串简化如下

    <form id="alipaysubmit" name="alipaysubmit" action="https://openapi.alipay.com/gateway.do?charset=UTF-8" method="POST">
      <input type="hidden" name="biz_content" value="{&quot;product_code&quot;:&quot;FAST_INSTANT_TRADE_PAY&quot;xxx}">
      <input type="hidden" name="app_id" value="xxx">
      <input type="hidden" name="version" value="1.0">
      <input type="hidden" name="format" value="json">
      <input type="hidden" name="sign_type" value="RSA2">
      <input type="hidden" name="method" value="alipay.trade.page.pay">
      <input type="hidden" name="timestamp" value="xxx">
      <input type="hidden" name="alipay_sdk" value="alipay-sdk-php-20161101">
      <input type="hidden" name="notify_url" value="xxx">
      <input type="hidden" name="return_url" value="xxx">
      <input type="hidden" name="charset" value="UTF-8">
      <input type="hidden" name="sign" value="xxx">
      <input type="submit" value="ok" style="display:none;">
    </form>
    <script>document.forms['alipaysubmit'].submit();</script>

获取到表单字符串之后的处理

方式一

const divForm = document.getElementsByTagName('divform') // HTMLCollection []
if (divForm.length) { // 已有就移除
  document.body.removeChild(divForm[0])
}
const div = document.createElement('divform')
div.innerHTML = response  // response是后端返回的表单字符串
document.body.appendChild(div)
document.forms[document.forms.length - 1].setAttribute('target', '_blank') // 新开页面，需要在当前页唤起支付宝可去掉这一行
document.forms[document.forms.length - 1].submit()

需要注意的是线上大多数获取表单都是document.forms[0] 去获取，这样获取到的是当前页面第一个表单元素，如果当前页不止一个表单可能导致失败，appendChild会将节点插入到父节点的最后，因此去获取最后一个表单较为保险--->document.forms[document.forms.length - 1],或者使用下面的方式

 方式二

  const divForm = document.getElementById('divForm')
  if(divForm){
    document.body.removeChild(divForm)
  }
  const div = document.createElement('div')
  div.id = 'divForm' // 设置id
  div.innerHTML = response
  document.body.appendChild(div)
  // 利用id去获取表单
  document.getElementById('divForm').children[0].setAttribute('target','_blank')
  document.getElementById('divForm').children[0].submit()

微信

设置响应类型为blob，利用URL.createObjectURL(object)获取到url，将其赋值给image标签src属性即可将支付二维码显示出来

  <el-dialog
    title="扫描支付"
    :visible.sync="wechatPay"
    width="600px"
    :before-close="handleClose"
  >
    <div v-loading="!codeimg">
      <div class="leftimg">
        <img src="@/assets/images/wechatPay.png" alt="">
        <img class="codeimg" :src="codeimg" alt="">
        <div class="info">
          <img src="@/assets/images/sao.png" alt="">
          <p>
            {{ '使用微信二维码扫一扫' }}<br>{{ '扫描二维码支付' }}
          </p>
        </div>
      </div>
      <div class="rightimg">
        <img src="@/assets/images/phone.png" alt="">
      </div>
    </div>
  </el-dialog>

一开始是去新建Blob对象，但是图片还是显示不出来

const blob = new Blob([response],{ type:'image/png' })
this.wechatPay = true
this.codeimg = window.URL.createObjectURL(blob)

后续考虑直接设置响应类型为blob,最终显示成功

// 微信支付
export async function wxbuy (data) {
  return await request({
    url: 'xxxx',
    method: 'post',
    responseType: 'blob', // 设置响应类型为blob
    data: {
      ...data
    }
  })
}

this.wechatPay = true // 显示二维码的弹窗
this.codeimg = window.URL.createObjectURL(response) // response是后端返回的二维码

标签：支付宝,微信,表单,forms,divForm,blob,支付,div,document
来源： https://blog.csdn.net/weixin_45669156/article/details/123571674

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。