网页前端第八次培训笔记-CSDN博客

本文链接：https://blog.csdn.net/qq_52940113/article/details/122890353

1.学习资料

【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili

2.表单的获取以及下拉框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form id="myform1" name="myform1" action=""></form>
		<form id="myform2" name="myform2" action=""></form>
		<form id="myform" name="myform" action="" method="get">
			姓名:<input type="text" id="uname" name="uname" value="zhangsan" />
			<br />
			密码:<input type="password" id="upwd" name="upwd" value="1234"/>
			<br />
			<input type="hidden" id="uno" name="uno" value="隐藏域" />
			<br />
			个人说明:<textarea name="utron"></textarea>
			<br />
			<button type="button" onclick="getTX();">获取元素内容</button>
		</form>
		<script type="text/javascript">
		console.log(document.getElementById("myform1"));//id属性
		console.log(document.myform2);//name属性
		console.log("-----------")
		console.log(document.forms);
		console.log(document.forms[1]);
		console.log(document.forms['myform2']);
		console.log("-----------")
		
		function getTX(){
			var name=document.getElementById("uname").value;
			console.log(name);
			var upwd=document.getElementById("myform").upwd.value;
			console.log(upwd);
			var uno=document.getElementsByName("uno")[0].value;
			console.log(uno);
			var utron=document.getElementsByTagName("textarea")[0].value;
			console.log(utron);

			
			
		}
		
		</script>
	</body>
</html>

2.1 获取表单，单选按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select id="uform" name="uform">
			<option value="">请选择</option>
			<option value="beijing" selected="selected">北京</option>
			<option value="shanghai">上海</option>
			<option>杭州</option>
		</select>
		<button type="button" onclick="gethh()">获取下拉选项</button>
		
		<script type="text/javascript">
		function gethh(){
			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);
			//设置上海被选中的项
			uform.options[2].selected=true;
			
			
			
			
		}
		</script>
	</body>
</html>

2.2 提交按钮（submit一定要设置返回值当为false是阻止事件发生）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form id="my" action="https://www.baidu.com/?tn=62095104_34_oem_dg" method="get">
			姓名<input name="uname" id="uname"/>&nbsp;<span id="msg" style="font-size: 12px; color: #00FFFF;"></span> <br/>
			<button type="button" onclick="getl()">提交</button>
		</form>
		<form id="my2" action="https://www.baidu.com/?tn=62095104_34_oem_dg" method="get">
			姓名<input name="uname2" id="uname2"/>&nbsp;<span id="msg2" style="font-size: 12px; color: #00FFFF;"></span> <br/>
			<button type="submit" onclick="return get2()">提交</button>
		</form>
		<script type="text/javascript">
		function getl(){
			var name=document.getElementById("uname").value;
			if(empty(name)){
				document.getElementById("msg").innerHTML="姓名不能为空！"
				return;
				
			}
		
		
		document.getElementById("my").submit();
		}
		function empty(str){
			if(str==null||str.trim()==""){
				return true;
			}
			
			return false
		}
		function get2(){
			var name1=document.getElementById("uname2").value;
			if(empty(name1)){
				document.getElementById("msg2").innerHTML="姓名不能为空！"
				return false;
			}
			return true;
		}
		
		
		
		
		</script>
	</body>
</html>

当有信息时，会进行页面的跳转，因为我的action是百度

3.原生Ajax实现流程

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--
		Ajax
		异步无刷新技术
		原生Ajax的实现流程
		1。得到XMLHttpRequest对象
		var xhr =new XMLHttpRequest();2。打开请求
		xhr.open(method , uri, async);
		method:请求方式，通常是GET | POSTuri:请求地址
		async:是否异步。如果是true表示异步，false表示同步
		3。发送请求
		xhr.send(params);
		params:请求时需要传递的参数
		如果是GET请求,设置null。(GEt请求的参数设置在url后面)
		如果是POST请求,无参数设置为null，有参数则设置参数
		4。接收
		xhci atus响应状态(200=响应成功，404=资源未找到，500=服务器异常)xhr.responseText·得到响应结果
		!-->
		
		<script type="text/javascript">
		
		
		//得到XMLHttpRequest对象
		var xhr = new XMLHttpRequest();//打开请求
		xhr.open( "get", "jp/data.json" ,false);  
		//·同步请求
		//发送请求
		xhr. send(null);//判断响应状态
		if (xhr. status == 200) {
		console.log(xhr.responseText) ;}
		 else {
		console.log("状态码: "+ xhr.status + "，原因:" + xhr.responseText)}
//同步请求


		/**
		*异步请求*/
		function text02(){
		//得到XMLHttpRequest对象
		var xhr = new XMLHttpRequest();//打开请求
		xhr.open("get", "jp/data.json" ,true);//异步请求//发送请求
		xhr. send(null);
		xhr.onreadystatechange=function(){
			//当值为4时，相应成功
			if(xhr.readyState==4){
				//判断响应状态
				if (xhr.status == 200) {
		//获取响应结果
		        console.log(xhr.responseText);
				} 
		         else {
		         console.log("状态码:"+ xhr.status + "，原因:"+ xhr.responseText);
		    }
		        console.log("异步请求... ");
		}
			}
			
		}
		//异步请求test02();
		text02();
		
		
		</script>
		
			
		
		
	</body>
</html>