常见的表单提交如下
<form
id="form_id"
name="thisForm"
action="/regInfo"
enctype="application/x-www-form-urlencoded"
method="post"
target="iframe1"
onsubmit="return toValid();">
姓名:<input type="text" name="username"><br>
密码:<input type="password" name="userpwd"><br>
<input type="submit" value="提交"><input type="reset" value="重置">
</form>
<!--iframe 用于存放后台返回的数据-->
<iframe width="800" height="200" name="iframe1" frameborder="0"></iframe>
action: 后台提供的接口uri
enctype: form通过http传送消息时的编码格式
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
上述三种编码格式属于MIME的子集,表单传送消息时使用HTTP协议,这是三种HTTP content-type使用的媒体类型。传送不同的格式,后台解析也不一样,需要提前约定好。
method:确定http的提交方式,get/post
target:后台会将处理的结果反馈到这个target指定的页面里,如果没有设置target,则会刷新该页面。target参数类似标签<a>
的target
属性,可以通过name值指定页面中多个iframe的其中一个。可以为改iframe添加load事件,获取到后台返回的数据。模拟ajax的success方法。
onsubmit:属于提交前触发的函数,通过添加检测方法,提前判断一些格式错误,返回正确后才提交数据。
可以下载这个demo,开启一个http服务,模拟请求,修改method或者enctype来看一下效果。
https://github.com/woden0415/demo/tree/master/form
感觉有点大,不好写。