0
点赞
收藏
分享

微信扫一扫

第八次网页前端培训笔记

SPEIKE 2022-02-12 阅读 53
前端javascripthtml

1.js表单

1.获取表单（前两种常用）

1、document.表单名称
2、document.getElementById(表单 id);
3、document.forms[表单名称]
4、document.forms[索引]; //从 0 开始

<body>
<form id='myform' name= "myform" action="" method= "post"></form>
<form id="myform2”name="myform2" actione"" method= "post"></form>
</body>
<script>
//四种方式
var form =document .getElementById("myform" );
form =document.myform ;
form =document.forms["myform"];
form =document.forms[0]; 
console.log(form) ;
</script>

2.获取表单元素

获取input元素：

通过 id 获取：document.getElementById(元素 id);

通过 form.名称形式获取: myform.元素名称; name属性值

通过 name 获取 :document.getElementsByName(name属性值)[索引] // 从0开始

通过 tagName 数组 :document.getElementsByTagName('input')[索引] // 从0开始 

<body>
		<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>
			<button type="button" onclick="getTxt();" >获取元素内容</button>
		</form>
	</body>
	 <script type="text/javascript">
	 	function getTxt(){
			// 1)、通过 id 获取：document.getElementById(元素 id);
			var uname = document.getElementById("uname").value;
			console.log(uname);
			// 2)、通过 form.名称形式获取: myform.元素名称;    name属性值
			var myform = document.getElementById("myform");
			var upwd = myform.upwd.value;
			console.log(upwd);
			// 3)、通过 name 获取 :document.getElementsByName(name属性值)[索引] // 从0开始
			var uno = document.getElementsByName("uno")[0].value;
			console.log(uno);
			// 4)、通过 tagName 数组 :document.getElementsByTagName('input')[索引] // 从0开始
			var intro = document.getElementsByTagName("textarea")[0].value;
			console.log(intro);
		}
	 </script>

3.获取下拉选项

1.获取下拉框对象

var对象=document.getElementById("id属性值")

2.获取下拉框的下拉选项列表

var options=下拉框对象.options;

3.获取下拉框被选中项的索引

var index = 下拉框对象.selectedIndox;

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<from id="myform1" name="myform1" action=""></from>
		<from id="myform2" name="myform2" action=""></from>
 
		<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="隐藏域" /><br />
			个人说明：<textarea name="intro"></textarea>
			<br />
			<button type="button" onclick="getTxt();">获取元素内容</button>
 
			<select id="ufrom" name="ufrom">
				<option value="">请选择</option>
				<option value="Beijing" selected="selected">北京</option>
				<option value="Shanghai">上海</option>
				<option>杭州</option>
			</select>
			<button type="button" onclick="getSelect()">获取下拉选项</button>
		</form>
 
		<script type="text/javascript">
			console.log(document.getElementById("myform1"));
			console.log(document, myform2);
			console.log("-----------");
			console.log(document.forms);
			console.log(document.forms[0]);
			console.log(document.forms['myform2']);
 
			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);
 
			}
 
			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 txt = ufrom.options[index].text;
				console.log("选中项的下标 " + txt);
			}
		</script>
 
	</body>
</html>

4.提交表单

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<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>
		<hr />
		<form id="myform2" action="http://www.baidu.com" method="get">
			姓名：<input name="uname2" id="uname2" />&nbsp;
			<span id="msg2" style="font-size: 12px;color: red;"></span><br />
			<button type="submit" onclick="return SubmitForm2()">提交</button>
		</form>
		<hr />
		<form id="myform3" action="http://www.baidu.com" method="get" onsubmit="return SubmitForm3()">
			姓名：<input name="uname3" id="uname3" />&nbsp;
			<span id="msg3" style="font-size: 12px;color: red;"></span><br />
			<button type="submit">提交</button>
		</form>
		<script type="text/javascript">
			function SubmitForm1(){
				var uname=document.getElementById("uname").value;
				if (isEmpty(uname)){
					document.getElementById("msg").innerHTML="*姓名不能为空";
				}
				
				document.getElementById("myform").submit();
			}
			function isEmpty(str){
				if(str == null||str.trim() ==""){
					return true;
				}
				return false;
			}
			function SubmitForm2(){
				var uname=document.getElementById("uname2").value;
				if (isEmpty(uname)){
					document.getElementById("msg2").innerHTML="*姓名不能为空";
					return false;
				}
				return true;
			}
			function SubmitForm3(){
				var uname=document.getElementById("uname3").value;
				if (isEmpty(uname)){
					document.getElementById("msg3").innerHTML="*姓名不能为空";
					return false;
				}
				return true;
			}
		</script>
		
		
	</body>
</html>

2.Ajax：异步无刷新技术

原生Ajax的实现流程

1、得到XMLHttpRequest对象：

var xhr = new XMLHttpRequest();

2、打开请求：

xhr.open(method,url,async);

method 请求方式，通常是get|post

url 请求地址

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

3、发送请求：

xhr.send(params);

params 请求时需要传递的参数

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

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

4、接收响应：

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

xhr.responseText 得到响应文本
 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			function text01() {
				var xhr = new XMLHttpRequest();
				xhr.open("get", "js/date.json", false);
				xhr.send(null);
				if (xhr.status == 200) {
					console.log(xhr.responseText);
				} else {
					console.log("状态码：" + xhr.status + "，原因：" + xhr.responseText)
				}
				console.log("同步请求...");
			}
 
			function text02() {
				var xhr = new XMLHttpRequest();
				xhr.open("get", "js/date.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)
						}
					}
				}
				
				console.log("异步请求...");
			}
			text02();
		</script>
	</body>
</html>

举报

相关推荐

网页前端第八次培训笔记

前端javascriptjquery

网页前端第八次培训

前端htmljavascript

第八次网页前端培训笔记(HTML)

前端htmljavascript

第八次网页前端培训（JS）

前端javascripthtml

第八次网页前端笔记

前端javascriptjquery

网页开端第八次培训笔记

linqhtmlsafari

第八次网页前端培训笔记（javascript表单）

javascript前端html

第八次前端培训

前端javascripthtml5

网页前端第八次

javascripthtml前端

网页前端第八次培训（JS表单）

javascript前端html
0 条评论