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 获取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="uname" name="uname" value="请输入姓名" /><br />
密码：<input type="password" name="upwd" value="1234" maxlength="14"/><br />
个人说明：<textarea name="intro" cols="60" rows="10"></textarea><br />
<button type="button" onclick="getTxt()">获取元素</button>
</form>
<script type="text/javascript">
function getTxt(){
var uname = document.getElementById("uname").value;
console.log(uname);
var pwd = document.getElementById("myform").upwd.value;
console.log(pwd);
var uno = document.getElementsByName("uno")[0].value;
console.log(uno);
var intro = document.getElementsByTagName("textarea")[0].value;
console.log(intro);
}
</script>
</body>
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 /> 
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.options
console.log(opts)
var index = uform.selectedIndex
console.log("选中项下标"+index)
var val = uform.value
console.log("被选中项的值"+val)
// var val2 = uform.options[index].value
// console.log("被选中项的值"+val2)
var txt = uform.options[index].text
console.log("被选中项的文本"+txt)
}
1.3 提交表单
1 普通按钮：为按钮绑定事件，绑定函数，在函数中对数据进行校验，通过则手动提交（表单对象.submit())
<body>
<form id="myform" name="myform" action="#" method="get">
姓名：<input name="uname" id="uname" />
<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").value
if(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>未填写提交时：
2 提交按钮（给按钮绑定）（return false时会阻止提交，判断方式参考上面）
<button type="submit" onclick=" return submitForm2()">提交表单</button> function submitForm2(){
var uname2 = document.getElementById("uname2").value
if(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 得到响应文本
同步请求：
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()
214
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
