专栏首页移动安全html页面动态创建form表单向后端发送请求
原创

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 条评论
登录 后参与评论

相关文章

  • 利用nginx快速制作接口用例

    whileideath
  • vue+axios跨域post请求json格式问题

    前端使用vue+axios开发向后端发起访问,会遇到发送方法为options问题,修改nginx的配置即可解决。

    whileideath
  • go框架中使用CGO,docker build image打包镜像注意事项

    whileideath
  • python3_RoboBrowser_test

    selenium库作为交互是非常方便的,但是却大大加长了加载的时间,例如需要渲染网址,加载js,造成在爬虫过程中时间变长。

    机器学习和大数据挖掘
  • Django 如何使用日期时间选择器规范用户的时间输入示例代码详解

    如果你的模型中含有 datetime 类型的字段,表单中需要用户输入日期和时间,那么你如何保证不同用户输入的时间都遵循一定的格式 (DD/MM/YYYY 或者 ...

    砸漏
  • python flask web开发实战 表单 form flask-wtf

    app = Flask(name) app.config['SECRET_KEY'] = 'hard to guess string' 1、

    用户5760343
  • 程序猿必备调试工具postman

    现在是资源共享的时代,同样也是知识分享的时代,如果你觉得本文能学到知识,请把知识与别人分享。

    互扯程序
  • 使用ABAP代码生成二维码(QR Code)

    Previously we have discussed how to generate QRcode with SAP standard functional...

    Jerry Wang
  • Django使用普通表单、Form、以及modelForm操作数据库方式总结

    Django使用普通表单、Form、以及modelForm操作数据库主要应用于增删该查的情景下,流程通用如下,只是实现方式不一样: 进入填写表单页...

    菲宇
  • jQuery获取操作Form 信息

    李郑

扫码关注云+社区

领取腾讯云代金券