1、表单
表单是一个包含表单元素的区域。
表单元素允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 来设置，如下列代码所示：
<form> * input元素等 * </form>
2、表单校验
表单校验是指：用户在html页面的form表单中填写的内容，在向服务器提交之前，需要在前端完成对表单内的数据完整性和正确的格式进行校验，校验不通过不予以提交并给出提示。以避免服务器收到错误数据（导致对服务器的多余访问）。
常用于表单的校验业务如下：非空（账号密码）、手机号格式、邮箱格式、密码复杂度。
3、表单提交
表单提交的常见操作方式：
1、表单中使用submit提交按钮
2、form表单使用onsubmit属性，值为true才会被提交（结合js使用）
3、不使用submit，改用button的onclick事件，使用js做表单提交操作（js主动操作表单对象执行提交，提交操作可控） 4、使用Ajax进行异步提交表
..........还有其他形式的表单提交方式，这里就不一一进行讲解了，感兴趣的小伙伴们可以自行去找资料进行了解哦。
下列代码将对前四种表单提交的方式一一进行讲解，具体代码展示如下。
3.1 html的form提交
直接通过html的form提交，代码如下：
<!--方式1：使用submit按钮--><formaction="indexform.do"method="post"><inputtype="text"name="username"placeholder="账号"/><br/><inputtype="password"name="password"placeholder="密码"/><br/><inputtype="radio"name="sex"value="男"checked="checked"/>男 <inputtype="radio"name="sex"value="女"/>女<br/><inputtype="radio"name="usertype"value="student"checked="checked"/>学生 <inputtype="radio"name="usertype"value="teacher"/>老师<br/><inputtype="submit"value="提交"></form>
但有时候我们会出于安全角度考虑，给用户输入的密码进行加密，方法一就没办法解决这个问题，这是个需要注意的点。
3.2 onsubmit属性
form表单根据onsubmit属性事件决定是否提交，并触发js表单校验。
<!--方式2：js表单校验后由form表单onsubmit属性决定是否提交--><!-- 由submit按钮触发 form表单新增onsubmit的事件，结果为true则提交 --><formaction="indexform.do"method="post"onsubmit="return sub1();"><inputid="t_username"type="text"name="username"placeholder="账号"/><br/><inputid="t_password"type="password"name="password"placeholder="密码"/><br/><inputtype="radio"name="sex"value="男"checked="checked"/>男 <inputtype="radio"name="sex"value="女"/>女<br/><inputtype="radio"name="usertype"value="student"checked="checked"/>学生 <inputtype="radio"name="usertype"value="teacher"/>老师<br/><inputtype="submit"value="提交"/></form><scripttype="text/javascript">functionsub1(){ if(checkname()&&checkpwd()){ returntrue; } //return false;//缺陷：万一方法体没有返回值，则表单也会自动提交，失去了校验的意义，不推荐 } //判断用户名是否为空functioncheckname(){ vart_username=$("#t_username").val(); if(t_username==""){ alert("请输入账号") returnfalse; } returntrue; } //判断密码是否为空functioncheckpwd(){ vart_password=$("#t_password").val(); if(t_password==""){ alert("请输入密码") returnfalse; } returntrue; } </script>
注意，sub1()方法中，return true时，表单才会正常提交，为false时，浏览器将不会提交，通常是用户的密码输入错误时，终止提交。这种方法有个缺点就是，打乱正常的表单提交程序。
3.3 使用onclick事件
不使用submit，将input中的type属性改为button，再使用其onclick事件，使用js做表单提交操作（js主动操作表单对象执行提交，提交操作可控）,使用onclick触发表单校验函数：由js主动提交。
<!-- 方式3：js表单校验后，由js触发表单提交 --><!-- 不在使用submit按钮，而是使用onclick事件调用js校验，完成后由js来操作表单提交--><formid="f_sub"action="indexform.do"method="post"><inputid="t_username"type="text"name="username"placeholder="账号"/><br/><inputid="t_password"type="password"name="password"placeholder="密码"/><br/><inputtype="radio"name="sex"value="男"checked="checked"/>男 <inputtype="radio"name="sex"value="女"/>女<br/><inputtype="radio"name="usertype"value="student"checked="checked"/>学生 <inputtype="radio"name="usertype"value="teacher"/>老师<br/><inputtype="button"onclick="sub2()"value="提交"/></form><scripttype="text/javascript"src="js/jquery.min.js"></script><scripttype="text/javascript">functionsub2(){ if(checkname()&&checkpwd()){ $("#f_sub").submit()//js主动操作表单对象提交，推荐，提交操作可控 } } //判断用户名是否为空functioncheckname(){ vart_username=$("#t_username").val(); if(t_username==""){ alert("请输入账号") returnfalse; } returntrue; } //判断密码是否为空functioncheckpwd(){ vart_password=$("#t_password").val(); if(t_password==""){ alert("请输入密码") returnfalse; } returntrue; } </script>
推荐使用第三种，操作起来比较安全，避免后期修改代码时的遗漏导致的提交数据BUG，或者在某些事件代码块失效，以至于代码无法进行使用。
3.4 使用Ajax进行异步请求
使用Ajax进行异步请求处理，整个页面只会局部的进行刷新，地址栏不会变动。
<body><!-- 方式4：使用Ajax异步提交数据--><inputid="t_username"type="text"name="username"placeholder="账号"/><br/><inputid="t_password"type="password"name="password"placeholder="密码"/><br/><inputtype="radio"name="sex"value="男"checked="checked"/>男 <inputtype="radio"name="sex"value="女"/>女<br/><inputtype="radio"name="usertype"value="student"checked="checked"/>学生 <inputtype="radio"name="usertype"value="teacher"/>老师<br/><inputtype="button"onclick="sub3()"value="提交"/><scripttype="text/javascript"src="js/jquery.min.js"></script><scripttype="text/javascript">//判断用户名是否为空functioncheckname(){ vart_username=$("#t_username").val(); if(t_username==""){ alert("请输入账号") returnfalse; } returntrue; } //判断密码是否为空functioncheckpwd(){ vart_password=$("#t_password").val(); if(t_password==""){ alert("请输入密码") returnfalse; } returntrue; } functionsub3(){ vart_username=$("#t_username").val(); if(t_username==""){ alert("请输入账号") return ; } vart_password=$("#t_password").val(); if(t_password==""){ alert("请输入密码") return; } vart_sex=$("input[type='radio'][name='sex']:checked").val(); vart_usertype=$("input[type='radio'][name='usertype']:checked").val();//jquery选择器$.ajax({ url:"indexform.do",//数据提交到哪里去的一个地址type:"post", //async:false,//默认true是异步提交 同步等待信息提交结束完 同时在相对应的servlet让线程sleep一段时间data:{username:t_username,password:t_password,sex:t_sex,usertype:t_usertype}, //数据 以键值对的形式写入dataType:"text", success:function (obj){ //obj：接收后台变量的一个响应alert("ajax获得响应："+obj); }, error:function (obj){ alert("ajax请求失败！"); } }); } </script></body>
有异步提交方式，那么是否会有同步提交方式呢？异步提交方式具体是怎么样的呢？下面我们就来一起再次探索一下叭
4、扩展：Ajax
在3.4中我们浅用了一下ajax的异步提交，接下来我们来进一步了解一下Ajax叭，看看是否会有同步提交方式，异步提交方式具体是怎么样的。
4.1 Ajax简介
Ajax ( Asynchronous JavaScript And XML)并非编程语言，Ajax是JQuery实现XMLHttpRequest的一种方式。
Ajax 仅仅组合了：
- 浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）
- JavaScript 和 HTML DOM（显示或使用数据）
Ajax 是一个令人误导的名称。Ajax 应用程序可能使用 XML 来传输数据，但将数据作为纯文本或 JSON 文本传输也同样常见。Ajax通过在后台与服务器进行少量数据交换，可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新，而不需要重新加载整个页面。
如上图所示，具体流程大概分为以下7步：
- 网页中发生一个事件（页面加载、按钮点击）
- 由 JavaScript 创建 XMLHttpRequest 对象
- XMLHttpRequest 对象向 web 服务器发送请求
- 服务器处理该请求
- 服务器将响应发送回网页
- 由 JavaScript 读取响应
- 由 JavaScript 执行正确的动作（比如更新页面）
注：关于同步提交方式和异步提交方式具体的知识点，都藏在后续的文章里啦！
今天的分享到此就结束啦！谢谢各位看完的小伙伴，有什么不足的地方欢迎指出，相互学习，共同进步。
