梅科尔工作室-第八次网页前端培训（JS）

星如雪_梭如月

已于 2022-07-13 16:53:32 修改

阅读量374

点赞数

文章标签：前端 javascript html

于 2022-02-11 18:46:28 首次发布

本文链接：https://blog.csdn.net/qq_59744114/article/details/122878792

版权

1、表单

用前端js验证表单，可以减少很多不必要的麻烦，提高用户满意度，否则，你一提交数据就直接到后端服务器经过一系列验证才发现没填名字，这会浪费很多时间。

1.1、获取表单

（1）document.表单名称

（2）document.getElementById(表单id）

（3）document.forms（表单名称，HTML文档所有表单）

（4）document.forms【索引从0开始】

<body><form id="id1" name="myname1" action=""></form><form id="id2" name="myname2" action=""></form> <script type="text/javascript">console.log(document.getElementById("id1"))console.log(document.myname2)console.log("--------------")console.log(document.forms)console.log("-------------")console.log(document.forms[0])console.log(document.forms['myname2']) </script> </body>

1.2、获取表单元素

1.2.1、获取input元素

（1）通过id：document.getElementById

（2）通过form.名称获取：myform.元素名称；name属性值

（3）通过name获取：document.getElementByName（name属性值）【索引】

（4）通过tagName数组：document.getElementBytagName（‘input）【索引】

<body><form action="#" id="myform" name="myform"><input type="hidden" id = "uno" name = "uno" value="隐藏域"/>姓名：<input type="text" id="name" name="username" value="请输入姓名" /><br />密码：<input type="password" name="userpassword" value="123" maxlength="14"/><br />简介：<textarea name="remark" cols="60" rows="10"></textarea><br /><button type="button" onclick="getTxt()">获取元素</button></form><script>function getTxt(){var uname  = document.getElementById("name").valueconsole.log(uname)var pwd = document.getElementById("myform").userpassword.valueconsole.log(pwd)var uno = document.getElementsByName("uno")[0].valueconsole.log(uno)var intro = document.getElementsByTagName("textarea")[0].valueconsole.log(intro)}</script></body>

1.2.2、获取单选、多选按钮

通过id，name，form.name，标签获取与input同理

唱歌<input type="radio" id = "hobby1" name = "hobby" value="唱歌"/><br />跳舞<input type="radio" id = "hobby2" name = "hobby" /><br />

var h1 = document.getElementsByName("hobby")console.log(h1[0].value)

唱歌<input type="checkbox" id = "hobby1" name = "hobby" value="唱歌" multiple="multiple"/><br />跳舞<input type="checkbox" id = "hobby2" name = "hobby" value="跳舞" multiple="multiple"/><br />

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pif5aaC6ZuqX-aireWmguaciA==,size_20,color_FFFFFF,t_70,g_se,x_16

1.2.3、获取下拉选项

（1）获取selet对象（id，name......)

（2）获取选中项索引: 对象.selectedIndex

（3）获取选中项options的value属性值：对象(.option【idx】（可以不写）).value（value有值选value，没有选标签内容）

（4）获取选中项options的text：对象(.option【idx】（可以不写）).text

<select name="uform" id = "uform"><option value="city">请选择城市</option><option value="beijing" selected="selected">北京</option><option value="chengdu">成都</option><option>上海</option></select><br /><button type="button" onclick="getSelect();">获取选项</button>

function getSelect(){var uform = document.getElementById("uform")console.log(uform)var opts = uform.optionsconsole.log(opts)var index = uform.selectedIndexconsole.log("选中项下标"+index)var val  = uform.valueconsole.log("被选中项的值"+val)// var val2 = uform.options[index].value// console.log("被选中项的值"+val2)var txt  = uform.options[index].textconsole.log("被选中项的文本"+txt)}

1.3、提交表单

（1）普通按钮：为按钮绑定事件，绑定函数，在函数中对数据进行校验，通过则手动提交（表单对象.submit())

<body><form id="myform" name="myform" action="#" method="get">姓名：<input name="uname" id="uname" />&nbsp;<span id="msg" style="font-size: 12px;color: red;"></span><br /><button type="button" onclick="submitForm1()">提交表单</button></form><script>function submitForm1(){var uname = document.getElementById("uname").valueif(isEmpty(uname)){document.getElementById("msg").innerHTML = "请输入名字!"return}document.getElementById("myform").submit()}// trim()去除字符串前后空格function isEmpty(str){if(str == null||str.trim() == ""){return true}return false}</script></body>

如果输入为空

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pif5aaC6ZuqX-aireWmguaciA==,size_12,color_FFFFFF,t_70,g_se,x_16

（2）提交按钮（给按钮绑定）（return false时会阻止提交，判断方式参考上面）

<button type="submit" onclick=" return submitForm2()">提交表单</button>

function submitForm2(){var uname2 = document.getElementById("uname2").valueif(isEmpty(uname2)){document.getElementById("msg2").innerHTML = "请输入名字!"return false}return ture}// trim()去除字符串前后空格function isEmpty(str){if(str == null||str.trim() == ""){return true}return false}

（3）提交按钮（给表单绑定submit）

<form id="myform3" action="#" onsubmit=" return submitForm3()">

判断是否提交与第二个一样

2、Ajax（异步无刷新）

异步：不需要等上一步响应（运行好）即可运行下一步

2.1、原生ajax

（1）得到XMLHttprequest对象

var xhr = new XMLHttprequest（）；

（2）打开请求

xhr.open（method，uri，async）

method：请求方式（get，post）

uri：请求地址

async：是否异步（true，false）

（3）发送请求

xhr.send(params);

params:请求时需要传递的参数，如果get，设置null。如果post，无参数null，有参数是参数

（4）接收响应（异步会出问题，在第三步请求时，已经开始第四步了）

xhr.status 响应状态（200成功，404资源未找到，500服务器异常）

xhr.responseText 得到响应文本

同步请求

<script>var xhr = new XMLHttpRequest()xhr.open("get","11.json",false)xhr.send(null)if(xhr.status == 200){console.log(xhr.responseText)}else{console.log("状态码："+xhr.status+"原因是："+xhr.responseText)}

由于异步，需要知道后台已经将请求处理完毕，才获取响应结果，通过监听readyState的变化得知后面的处理状态，4等于完全处理

xhr.onreadystatechange = function(){
//只要readyState变化就执行

}

异步请求

function t2(){var xhr = new XMLHttpRequest()xhr.open("get","11.json",true)xhr.send(null)xhr.onreadystatechange = function(){if(xhr.readyState == 4){if(xhr.status == 200){console.log(xhr.responseText)}else{console.log("状态码："+xhr.status+"原因是："+xhr.responseText)}}}}t2()

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pif5aaC6ZuqX-aireWmguaciA==,size_8,color_FFFFFF,t_70,g_se,x_16

实际要比这复杂的多

星如雪_梭如月

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
梅科尔工作室-第八次网页前端培训（JS）

1、表单用前端js验证表单，可以减少很多不必要的麻烦，提高用户满意度，否则，你一提交数据就直接到后端服务器经过一系列验证才发现没填名字，这会浪费很多时间。1.1、获取表单（1）document.表单名称（2）document.getElementById(表单id）（3）document.forms（表单名称，HTML文档所有表单）（4）document.forms【索引从0开始】 <body......
复制链接

扫一扫