梅科尔工作室-第八次网页前端培训笔记（JS表单与Ajax）

C_yyy89

已于 2022-07-13 19:10:19 修改

阅读量157

点赞数

文章标签：前端 ajax

于 2022-02-12 17:51:12 首次发布

本文链接：https://blog.csdn.net/ayaxx1314/article/details/122894759

版权

本文详细介绍了JavaScript中表单的操作，包括通过不同方式获取表单及元素，表单元素的验证与提交。同时，讲解了JqueryAjax的基础用法，包括同步和异步请求。内容涵盖表单验证、Ajax交互核心步骤等关键知识点。

摘要由CSDN通过智能技术生成

前言

本文记录我学习JS表单和Jquery Ajax的笔记

1、JS表单

表单是我们页面向后台传输数据的一种非常常见的方式，在进行数据发送（请求发出）之前，我们应该现在页面进行一系列数据合法性的验证，节省不必要的错误数据的传输，以及提高用户的体验度。

1.1.获取表单

<!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>
		<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);
		</script>
	</body>
</html>

前两种常用

例如：

1. document.getElementById( "id属性值");
通过from标签的id属性值获取表单对象

2. document.表单的name属性值;
通过表单的name属性值获取表单对象

3. document.forms[下标];
通过指定下标获取表单元素

4.document .forms[表单的name属性值];
通过表单的name属性值获取表单对象

document.forms:获取HTML文档中所有的表单对象

1.2.获取表单元素

1.2.1.获取input元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第八次培训</title>
	</head>
	<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>
		<script type="text/javascript">
		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);
		}
		</script>
	</body>
</html>

1. document.getElementById( "id属性值");
通过元素的id属性值获取表单元素对象

2．表单对象.表单元素的name属性值;
通过表单对象中对应的元素的name属性值获取

3. document.getELementsByName ( "name属性值"); 通过表单元素的name属性值获取

4. document.getELementsByTagName("标签名/元素名"); 通过标签名获取表单元素对象

1.2.2.获取下拉选项

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第八次培训</title>
	</head>
	<body>
		<form id="myform" name="myform" action="" method="get">
			来自：
			<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">
		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);
			ufrom.options[2].selected=true;
		}
		</script>
	</body>

</html>

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

1.3.提交表单

<!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 style="font-size: 12px; color: red;" id="msg"></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 style="font-size: 12px; color: red;"
				id="msg2"></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 style="font-size: 12px; color: red;"
				id="msg3"></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 = "* 姓名不能为空！";
					return;
				}
				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>

(1）使用普通button按钮+onclick 事件+事件中编写代码:获取表单.submit();

1．给按钮绑定click点击事件,绑定函数

2．在函数中,进行表单校验(非空校验、合法性校验等)

3．如果校验通过,则手动提交表单
表单对象.submit();

(2）使用submit按钮+οnclick="return函数()"+函数编写代码:最后必须返回: return true|false;

1．给按钮绑定click点击事件，绑定函数

2．函数需要有返回值，返回true或false(如果return false，则表单不会提交;如果return true则提交 οnclick="return 函数名（）"

3．在函数中,进行表单校验(非空校验、合法性校验等)

4.如果校验通过，返回true;如果校验不通过则返回false

(3）使用submit按钮/图片提交按钮＋表单οnsubmit="return 函数();"+函数编写代码:最后必须返回: return true/false;

1.给表单form元素绑定submit提交事件，绑定函数

2．函数需要有返回值，返回true或false(如果return false，则表单不会提交;如果return true则提交 οnclick="return 函数名（）"

3．在函数中,进行表单校验(非空校验、合法性校验等)

4.如果校验通过，返回true;如果校验不通过则返回false

注：trim（）为字符串方法，去除字符串前后空格

2.Jquery Ajax

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第八次培训</title>
	</head>
	<body>
		<script type="text/javascript">
		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)
			}
			console.log("同步请求....")
		}
		test01();
		function test02(){
			var xhr=new XMLHttpRequest();
			xhr.open("GET","js/data.json",true);
			xhr.send(null);
			if(xhr.status==200){
				console.log(xhr.responseText);
			}else{
				console.log("状态码："+xhr.status+",原因："+xhr.responseText)
			}
			console.log("异步请求....")
		}
		test02();
		</script>
	</body>
</html>