第八次前端培训_下拉选项中( )可以获取请求页面中一组名称为 uname 的 checkbox 复选框的值。-CSDN博客

本文链接：https://blog.csdn.net/qq_52056451/article/details/122897150

1 JS表单

1.1 获取表单

前两种常用：

document.表单名称
document.getElementById(表单id)
document.forms[表单名称]
document.forms[索引] //从0开始

1.2 获取表单元素

1.2.1 获取input元素

通过id获取：document.getElementById(元素id)
通过form.名称形式获取：document.getElementById(表单id).元素名称 name属性值
通过name获取：document.getElementsByName(name属性值)[索引] 从0开始
通过tagName数组：document.getElementsByTagName('input')[索引] 从0开始

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例2</title>
	</head>
	<body>
		<form id="myform" name="myform" action="" method="get">
			姓名：<input type="text" name="uname" id="uname" value="zs" /><br>
			密码：<input type="password" name="upwd" id="upwd" value="1234" /><br>
			<input type="hidden" name="uno" id="uno" value="隐藏域" /><br>
			个人说明：<textarea name="intro"></textarea><br>
			<button type="button" onclick="getText();">获取元素内容</button>
		</form>
		<script type="text/javascript">
			function getText() {
                //通过id获取：document.getElementById(元素id)
				var uname = document.getElementById("uname").value;
				console.log(uname);
                //通过form.名称形式获取：document.getElementById(表单id).元素名称
				var pwd = document.getElementById("myform").upwd.value;
				console.log(pwd);
                //通过name获取：document.getElementsByName(name属性值)[索引] 
				var uno = document.getElementsByName("uno")[0].value;
				console.log(uno);
                //通过tagName数组：document.getElementsByTagName('input')[索引] 
				var intro = document.getElementsByTagName("textarea")[0].value;
				console.log(intro);
			}
		</script>
	</body>
</html>

1.2.2 获取单选按钮

前提：将一组单选按钮设置相同的name属性值

（1）获取单选按钮组

document.getElementsByName("name属性值");

（2）遍历按钮，并判断

例：

function getRadio() {
				//通过name属性获取单选按钮
				var radios = document.getElementsByName("rad");
				if (radios != null) {
					for (var i = 0; i < radios.length; i++) {
						console.log("值：" + radios[i].value + ",是否选中：" + radios[i].checked);
					}
				}
				
				//通过class属性获取单选按钮
				var cla = document.getElementsByClassName("test");
				console.log(cla);
				if (cla != null && cla.length > 0) {
					for (var i = 0; i < cla.length; i++) {
						if (cla[i].type == "text") {
							console.log("文本框的值" + cla[i].value);
						} else if (cla[i].type == "radio") {
							console.log("值：" + cla[i].value + ",是否选中：" + cla[i].checked);
						}
					}
				}
			}

注：

判断单选按钮是否选中：

        checked 选中状态

在JS代码中

                checked = true 表示选中

checked = false 表示不选中

在HTML标签中

check = check 或 check 表示选中

不设置check属性表示不选中

1.2.3 获取多选按钮

逻辑和获取单选按钮基本类似，推荐通过name属性获取。

通过选中单选按钮可以实现一键选中或取消选中全部的多选按钮：

HTML：

			控制器：<input type="checkbox" id="control" onclick="checkAllOrNot()" /><br>
			<input type="checkbox" name="hobby" value="sing" /> 唱歌
			<input type="checkbox" name="hobby" value="dance" /> 跳舞
			<input type="checkbox" name="hobby" value="rap" /> 说唱
			<button type="button" onclick="getCheckBox()">获取多选按钮</button>

JS：

function checkAllOrNot() {
				//得到控制器
				var control = document.getElementById("control");
				//判断控制器是否被选中
				var flag = control.checked;
				console.log(flag);
				
				//通过复选框的name属性获取
				var checkboxes = document.getElementsByName("hobby");
				//判断
				if (checkboxes != null && checkboxes.length > 0) {
					//遍历
					for (var i = 0; i < checkboxes.length; i++) {
						//设置选中状态（控制器的选中状态）
						checkboxes[i].checked = flag;
					}
				}
			}

若想实现反选，只需在设置各个复选框的状态时，取与控制器选中状态相反的布尔值即可。

1.2.4 获取下拉选项

（1）获取select对象

var ufrom = document.getElementById("ufrom");

（2）获取选项中的索引

var idx = ufrom.selectedIndex;

（3）获取选中项的option的value属性值

var val = ufrom.option[idx].vaule;

（4）获取选中项option的text

var text = ufrom.options[idx].text;

注：

1.获取下拉框选中项的值时：（value）

如果option标签设置了value属性值，则获取value属性对应的值；

如果option标签未设置属性值，则获取的是option双标签的中的文本值

2.下拉框的选中状态：

选中状态：selected = "selected"、selected (HTML)

select = true (JS)

未选中状态：不设置select属性、select = false

function getSelect() {
				//获取下拉框对象
				var ufrom = document.getElementById("ufrom");
				console.log(ufrom);
				//获取下拉框的下拉选项列表
				var opts = ufrom.options;
				console.log(opts);
				//获取下拉框被选中项的索引
				var index = ufrom.selectedIndex;
				console.log("选中项的下标："+index);
				//获取下拉框被选中项的值
				var val = ufrom.value;
				console.log("被选中项的值" + val);
				//通过选中项的下标获取下拉框被选中项的值
				var val2 = ufrom.options[index].value;
				console.log("被选中项的值" + val2);
				//获取下拉框被选中项的文本
				var text = ufrom.options[index].text;
				console.log("被选中项的文本" + text);
			}

2 Ajax

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

原生Ajax的实现流程

1.得到XMLHttpRequst对象

var xhr = new XMLHttpRequst();

2.打开请求

xhr.open(method,url,async);

method:请求方式，通常是get或post

uri:请求地址

async:是否异步，如果是true表示异步，false表示同步

3.发送请求

xhr.send(params);

params:请求时需要传递的参数

如果是get请求，设置为null。（get请求的参数设置在url后面）

如果是post请求，无参数设置为null，有参数设置则设置参数

4.接收相应

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

xhr.responseText 得到响应结果

异步和同步代码写法如下：

//同步请求
			function test01() {
				var xhr = new XMLHttpRequest();
				console.log(xhr.readyState);
				xhr.open("get", "js/data.json", false);
				console.log(xhr.readyState);
				xhr.send(null);
				console.log(xhr.readyState);
				if (xhr.status == 200) {
					console.log(xhr.responseText);
				} else {
					console.log("状态码" + xhr.status + ",原因" + xhr.responseText);
				}
			}
			test01();
			console.log("------------");
			//异步请求
			function test02() {
				var xhr = new XMLHttpRequest();
				// console.log(xhr.readyState);
				xhr.open("get", "js/data.json", true);
				// console.log(xhr.readyState);
				xhr.send(null);
				// console.log(xhr.readyState);
				
				
				/**
				 * 由于是异步请求，所以需要知道自己后台已经将请求处理完毕，才能获取响应结果
				 * 通过监听readyState的变化得知后面的处理状态 4=完全处理
				 * xhr.onreadystatechange = function() {}
				 */
				xhr.onreadystatechange = function() {
					// console.log(xhr.readyState);
					if (xhr.status == 4) {
						if (xhr.status == 200) {
							console.log(xhr.responseText);
						} else {
							console.log("状态码" + xhr.status + ",原因" + xhr.responseText);
						}
					}
				}
				console.log("异步请求");
			}
			test02();