0
点赞
收藏
分享

微信扫一扫

第八次网页前端培训(JS)

時小白 2022-02-11 阅读 55

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").value
				console.log(uname)
				var pwd = document.getElementById("myform").userpassword.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>

 

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 />
			

 

 

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.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" />&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").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 得到响应文本

同步请求

	<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()

 实际要比这复杂的多

举报

相关推荐

0 条评论