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

场景一:

前端向后端(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>

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券