html页面动态创建form表单向后端发送请求

原创

whileideath

发布于 2019-08-13 16:53:28

2.4K0

发布于 2019-08-13 16:53:28

场景一：

前端向后端（api）请求一个文件下载，请求成功后后端（api）直接返回文件的内容，而不是返回文件的url，如果返回了文件的url，前端直接window.open即可完成下载。但是如果是文件内容，一种更好的方法是通过动态创建表单的方式去请求下载，请求的参数可以动态创建input框的方式去完成。

场景二：

a网站需要跳转到b网站进行操作，同时a需要向b携带数据。

完整代码如下：

这里使用了underscore这个库来辅助完成，当然也可以不需要，按需使用。

如果使用underscore这个库需要安装：

npm install underscore -s

完整代码如下，可以保存为jsFormSender.js

var _ = require('underscore');

function createHiddenForm(action, method, target) {
    let form = document.createElement('form');
    form.setAttribute('action', action);
    form.setAttribute('method', method || 'post');
    form.setAttribute('target', target || '_self');
    // 这个enctype可以动态传入，这里偷懒直接写死
    form.setAttribute('enctype', 'application/x-www-form-urlencoded');
    form.style.display = 'none';
    return form;
}

function appendHiddenField(form, name, value) {
    let field = document.createElement('input');
    field.setAttribute('type', 'hidden');
    field.setAttribute('name', name);
    field.setAttribute('value', value);
    form.appendChild(field);
}
export function jsFormSender(action, params, method, target) {
    let form = createHiddenForm(action, method, target);
    _.each(params, function (value, key) {
        if (_.isArray(value)) {
            _.each(value, function (item) {
                appendHiddenField(form, key, item);
            });
        } else {
          console.log(key);
          console.log(value);
          appendHiddenField(form, key, value);
        }
    });
    document.body.appendChild(form);
    console.log(form);
    form.submit();
    _.delay(function () {
        document.body.removeChild(form);
    }, 2000);
}

使用如下如下：

// 按需引入，看你的js路径，切莫照搬
import { jsFormSender } from "../../utils/formSender";

jsFormSender('http://example.com', { 'key1': 'value1', 'key2': 'value2' }, 'post', '_blank');

// 如上创建的form表单如下：
<form action="http://example.com" method="post" target="_blank" enctype="application/x-www-form-urlencoded">
    <input type="hidden" name="key1" value="value1">
    <input type="hidden" name="key2" value="value2">
</form>

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

underscore