通过JS组装表单

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了通过JS组装表单相关的知识,希望对你有一定的参考价值。

场景:例如我们做一个支付功能,肯定需要与第三方支付公司进行对接,比如【网关支付】是需要跳转到第三方的充值页面的,但是第三方只提供了后台接口,我们可以通过调用第三方的接口获取到我们需要的数据,然后通过在前端通过JS组装一个Form表单跳转到第三方的充值页面去。


//业务处理跳转网关支付页面

function businessprocessToPay(data) {

   //这里的Data是后台接口返回的数据

    if (data.status == 200) {

        var form = $(‘<form></form>‘);

        var messagehtml = $(‘<input type="hidden" name="message" value="" />‘);

        messageHTML.attr(‘value‘, data.data.PostMessage);

        var signatureHTML = $(‘<input type="hidden" name="signature" value="" />‘);

        signatureHTML.attr(‘value‘, data.data.PostSiginature);


        form.append(messageHTML);

        form.append(signatureHTML);

        form.attr(‘action‘, data.data.PayUrl);

        form.attr(‘method‘, ‘post‘);

        form.attr(‘target‘, ‘_blank‘);

        form.attr(‘style‘, ‘display:none‘);

        //HTML标准规定如果form表单没有被添加到document里,那么form表单提交将会被终止

        $(document.body).append(form);

        form.submit();

        //删除关联

        $(document.body).remove(form);

    }else {

        alertmsg(data.msg, ‘error‘);

    }

}



本文出自 “Flyfish” 博客,请务必保留此出处http://9381188.blog.51cto.com/9371188/1923831

以上是关于通过JS组装表单的主要内容,如果未能解决你的问题,请参考以下文章

通过FormData对象可以组装一组用 [XMLHttpRequest]发送请求的键/值对,它可以更灵活方便的发送表单数据。

使用 node.js 重新组装 udp 消息

正则表达过滤表单隐藏元素,组装post数据

组装者模式在React Native项目中的一个实战案例

华为OD机试 - 组装新的数组(Java & JS & Python)

js遍历table中的数据,并组装成json