第八次网页前端学习笔记（数据请求和Ajax）

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

一.JS 表单

获取表单(前两种常用)
        1.document.getElementById("id属性值");
        通过from标签的id属性值获取表单对象
        2. document.表单的name属性值;
        通过表单的name属性值获取表单对象
        3. document . forms[下标];
        通过指定下标获取表单元素
        4. document . forms [表单的name属性值];
        通过表单的name属性值获取表单对象
        document . forms:获取HTML文档中所有的表单对象 

实例：

<form id=" myform1" name= "myform1" action=""></form>
<form id="myform2" name= "myform2" action=""></form>

<script type="text/javascript">

//1.document.getElementById("id属性值");
console.log(document.getElementById("myform1" ));
// 2. document .表单的name属性值;
console.log(document.myform2);
console.log("---------")
//获取所有表单对象
console.log(document.forms);
//3. document.forms[下标];
console.log(document.forms[0]);
// 4. document . forms [表单的name属性值];
console.log(document.forms['myform2']);

</script>

获取表单元素：
        1.获取input元素
            1.document . getElementById("id属性值");
            通过元素的id属性值获取表单元素对象
            2.表单对象.表单元素的name属性值;
            通过表单对象中对应的元素的name属性值获取
            3. document. getELementsByName("name属性值");
            通过表单元素的name属性值获取
            4. document . getEL ementsByTagName("标签名/元素名");
            通过标签名获取表单元素对象 

实例：

<form id='myform' name= " myform" action="" method=" get">
		<!--文本框-->
		姓名:<input type="text" id= "uname" name= "uname" value="zs"/><br/>
		<!--密码框-->
		密码: <input type="password" id= "upwd" name= "upwd" value= "1234"/><br/>
		<!--隐藏域-->
		<input type="hidden" id= "uno" name="uno" value="隐藏域"/>
		<!--文本域-->
		个人说明:<textarea name="intro"></textarea>
		<br>
		<button type="button" onclick="getTxt();">获取元素内容</button>
		</form>
		<script type= "text/javascript">
		
		function getTxt() {
			//1.document . getElementById("id属性值");
			var uname = document.getElementById("uname").value;
			console.log(uname);
			//2.表单对象.表单元素的name属性值;
			var pwd = document.getElementById("myform").upwd.value;
			console.log(pwd);
			//3. document . getELementsByName("name属性值");
			var uno = document.getElementsByName("uno")[0].value;
			console.log(uno);
			//4. document . getELementsByTagName("标签名/元素名");
			var intro = document.getElementsByTagName("textarea")[0].value;
			console.log(intro);
			}
				
			</script>

2.获取单选按钮
            注:相同的一-组单选按钮，需要设置相同的name属性值
            1. document . getElementByName("name属性值");通过name属性值获取
            2.判断单选按钮是否选中
            checked选中状态
            在JS代码中
            checked=true表示选中
            checked=false表示不选中
            在HTML标签中
            checked=checked或checked表示选中不设置checked属性表示不选中
            3.获取单选按钮的值
            元素.value;
            3.获取多选按钮与单选按钮相同
            4.获取下拉选项
            1.获取下拉框对象
            var对象= document . getElementById("id属性值");
            2.获取下拉框的下拉选项列表
            var options =下拉框对象 . options ;
            3.获取下拉框被选中项的索引
            var index =下拉框对象. selectedIndex;
            4.获取下拉框被选中项的值
            var值=下拉框对象.value;
            5.通过选中项的下标获取下拉框被选中项的值
            var值=下拉框对象. options[ index] .value;6.获取下拉框被选中项的文本
            var文本值=下拉框对象. options[ index]. text;
            注: 1.获取下拉框选中项的值时: (value)
                如果option标签设置了value属性值，则获取value属性对应的值;
                如果option标签未设置value属性值，则获取的是option双标签中的文本值2.下拉框的选中状态:
                选中状态: selected=selected、 selected、 selected = true
                未选中状态:不设置selected属性、selected=false
 

提交表单：
        一，使用普通按钮type=" button"
        1.给按钮绑定click点击事件，绑定函数
        2.在函数中，进行表单校验 (非空校验、合法性校验等)
        3.如果校验通过，则手动提交表单
        表单对象. submit();
        二，使用提交按钮type= ”submit"
        1.给按钮绑定click点击事件，绑定函数
        2.函数需要有返回值，返回true或false (如果return false，则表单不会提交;如果return trueοnclick="return函数名( )"
        3.在函数中，进行表单校验 (非空校验、合法性校验等)
        4.如果校验通过，返回true; 如果校验不通过，则返回false
        三，使用提交按钮 type=”submit"
        1.给表单form元素绑定submit提交事件，绑定函数
        2.函数需要有返回值，返回true或false (如果return false，则表单不会提交;
        如果return trueοnsubmit="return函数名()"
        3.在函数中，进行表单校验 (非空校验、合法性校验等)
        4.如果校验通过，返回true;如果校验不通过，则返回false

实例： 

<form id=' myform' name="myform" action= "http:/ /www. baidu. com' 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 type="text/javascript">
		/**
		*表单校验
		*提交表单
		*/
		function submitForm1() {
		//得到文本框的值
		var uname = document. getElementById("uname") . value ;
		//判断是否为空
		if (isEmpty(uname)) { //为空
		//设置提示信息 (设置span元素的值)
		document.getElementById("msg").innerHTML = "*姓名不能为空! ";
		//阻止表单提交
		return;
		}
		}
		function isEmpty(str) {
		//判断是否为空
		if (str == null || str.trim() =="") {
		return true;
		}
		return false;
	}

Ajax
        异步无刷新技术
        原生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 (GEt清求的参数设置在ur1后面)
        如果是POST请求,无参数设置为null,有参数则设置参数
        4.接收响应
        xhr . status的应状本店(200=响应成功，404=资源未找到，500服务器异第)
        xhr.responseText得到响应结果
 

实例：

<script type= "text/javascript">
		//得到XMLHttpRequest对象
		var xhr = new XMLHttpRequest();
		// 打开请求
		xhr.open("get","js/datal.json" ,false); // 同步请求
		//发送请求
		xhr.send(null);
		//判断响应状态
		if (xhr.status == 200) {
		
		console.log( xhr . responseText);
		
		} else {
		
		console.log("状态码: " + xhr.status + "，原因: " + xhr.responseText)
		}
		
		</script>