第八次网页前端培训(JavaScript)

最新推荐文章于 2024-05-18 11:09:56 发布

轻大Klein

最新推荐文章于 2024-05-18 11:09:56 发布

阅读量496

点赞数

分类专栏： HTML 文章标签：前端 javascript jquery

本文链接：https://blog.csdn.net/m0_54055385/article/details/122878584

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.视频链接

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

2. 教程链接

JavaScript 表单 | 菜鸟教程 (runoob.com)

3. JS表单

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

3.1 获取表单

前两种常用

1、document .表单名称
2、 document.getElementById(表单id);

3.document.forms[表单名称]
4、 document.forms[索引];//从0开始

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

3.2 获取表单元素

3.2.1 获取input元素

如text password hidden textarea等，前两种常用。
1)、通过id 获取: document.getElementById(元素id);

2)、通过form .名称形式获取:myform .元素名称;name属性值
3)、通过name 获取:document.getElementsByName( name属性值)[索引] //从0开始

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

3.3 提交表单

(1)使用普通button按钮+onclick事件+事件中编写代码:

获取表单.submit();
(2）使用submit按钮+οnclick="return 函数()"+函数编写代码:

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

最后必须返回: return true|false;

3.4 获取下拉选项

(1）获取select 对象
var ufrom = document .getElementById( "ufrom" ) ;

(2）获取选中项的索引
var idx = ufrom.selectedIndex;

(3）获取选中项options的value 属性值

var val = ufrom. options[ idx ] .value;
注意:当通过options获取选中项的value属性值时，
若没有value属性，则取option标签的内容若存在value属性，则取value属性的值

(4）获取选中项options的text :
var txt = ufrom . options[ idx ].text;
选中状态设定: selected='selected"'、 selected=true、selected未选中状态设定:不设selected属性

<body>
		<select id="ufrom" name="ufrom">
			<option value="">请选择</option>
			<option value="beijing" selected="selected">北京</option>
			<option value="shanghai">上海</option>
			<option >杭州</option>
		</select><br />
		<button type="button" onclick="getSelect()">获取下拉选项</button>
		<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);
			}
		</script>
	</body>

4.jQuery Ajax

4.1.$.ajax

jquery调用ajax方法:
        格式: $.ajax(0);
                参数:
                        type:请求方式GET/POSTurl:请求地址url
                        async:是否异步，默认是true表示异步data:发送到服务器的数据
                        dataType:预期服务器返回的数据类型contentType:设置请求头
                        success:请求成功时调用此函数error:请求失败时调用此函数
                        get请求

<body>
		<script type="text/javascript">
			function test01(){
			var xhr=new XMLHttpRequest();
			xhr.open("get","js/data.json",false);
			xhr.send(null);
			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);
					xhr.onreadystatechange=function(){
						if(xhr.readyState==4){
							if(xhr.status==200)
							{
								console.log(xhr.responseText);
							}else{
								console.log("状态码:"+xhr.status+"，原因:"+xhr.responseText)
							}
						}
					}
					console.log("异步请求。。。");
			}
			test02();
		</script>
	</body>

轻大Klein

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第八次网页前端培训(JavaScript)

1.视频链接【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili2. 教程链接JavaScript 表单 | 菜鸟教程 (runoob.com)3. JS表单表单是我们页面向后台传输数据的一种非常常见的方式，在进行数据发送（请求发出)之前，我们应该现在页面进行一系列数据合法性的验证，节省不必要的错误数据的传输，以及提高用户的体验度。3.1 获取表单前两种常用1、document...
复制链接

扫一扫