怎样用js创建Form表单并提交

JavaScript027

怎样用js创建Form表单并提交,第1张

可以手动构建一个FormData进行表单提交，代码如下：

var form = new FormData()

//添加参数

form.append('name', 'jack')

form.append('age', 20)

//使用xmlhttprequest发起请求

var xhr = new XMLHttpRequest()

xhr.open('post', '这里添上请求的url', true)

xhr.onreadystatechange = function() {

    if(xhr.readyState == 4) {

        //成功

    }

}

//执行请求

xhr.send(form)

这边写了个，请保存为 表格.html测试

<html>

<body>

<h1>JavaScript 生成表格</h1>

<h2>行：<input id=mrow type=number/>

列：<input id=mcolumn type=number/>

<input type="button" value="生成表格" onclick="gettable()" /></h2>

<hr/>

<p id="demo"></p>

<script type="text/javascript">

function gettable()

{

mrow=document.getElementById("mrow").value

mcolumn=document.getElementById("mcolumn").value

mytable="<table border=1>"

for (i = 0i <mrowi++) {

mytable += "<tr>"

for(j=0j<mcolumnj++){

mytable+="<td>"+"第"+(i+1)+"行 第"+(j+1)+"列"+"</td>"

}

mytable += "</tr>"

}

mytable+="</table>"

document.getElementById("demo").innerHTML=mytable

}

</script>

</body>

</html>

1、将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。

2、异步上传文件

1、创建一个空对象：

2、通过表单对formData进行初始化

创建表单：

通过表单元素作为参数，实现对formData的初始化：

1、通过get(key)与getAll(key)来获取相对应的值

2、通过append(key,value)在数据末尾追加数据

3、通过set(key, value)来设置修改数据

key的值不存在，会添加一条数据

key的值存在，会修改对应的value值

4、通过has(key)来判断是否存在对应的key值

5、通过delete(key)可以删除数据

创建表单：

发送数据：