js动态创建表单完成数据交互的方式

Landers

用文字记录生活

主页 关于 使用JS实现表单传输

日期: 2019-08-27

不在html创建表单，使用js动态创建传输post数据

html结构

<button type="button" onclick="delete_img()">删除</button>

javascript创建空表单

function delete_img(PARAMTERS) {
        var temp_form = document.createElement("form");
            temp_form.action = '/url/';
            //如需打开新窗口，form的target属性要设置为'_blank'
            temp_form.target = "_self";
            temp_form.method = "post";
            temp_form.style.display = "none";
            //添加参数
         for (var item in PARAMTERS) { //建立表单
               var opt = document.createElement("textarea");
               opt.name = PARAMTERS[item].name;
               opt.value = PARAMTERS[item].value;
               temp_form.appendChild(opt);
            }
            document.body.appendChild(temp_form);
            //提交数据
            temp_form.submit();
    }

最终将函数delete_img()绑定到button上，点击后就会发送post数据

js创建有效表单

function input() {
    var form = document.createElement('form');
    form.action = '/index/';
    form.method = 'post';      
    var input = document.createElement('input');
    input.type = 'hidden';
    input.name = 'key'; //input的name属性
    input.value = "test"; //input默认值
    form.appendChild(input);   
    $(document.body).append(form);
    form.submit();
}

如果文章中部分代码无法运行，可能因为版本迭代，环境差异。如果代码中有错误的地方欢迎批评指正。
我的Github地址:Landers1037欢迎关注！

版权所有©Landers1037

基于Bootstrap4.3.0，使用Flask开发