HTMLNo.8

bioioid_song

已于 2022-02-16 09:23:49 修改

阅读量219

点赞数

文章标签： javascript 前端 html

于 2022-02-14 10:59:22 首次发布

本文链接：https://blog.csdn.net/m0_49786709/article/details/122900317

版权

表单验证 AJAX XMLHttpRequest 前端开发数据交互

关键词由CSDN通过智能技术生成

表单

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

获取表单

前两种常用

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

例如：

<body>
    <!--
        获取表单
            1.ducument.getElementById("id属性值")
                通过form标签的id属性值获取表单对象
            2.document.表单的name属性值
                通过表单的name属性值获取表单对象
            3.document.form[下标];
            4.document.forms[表单的name属性值];    
    -->
    <from id = 'myform1' name="myform1" action=""></from>
    <from id = 'myform2' name="myform2" action=""></from>
    <script>
        console.log(document.getElementById("myform1"));
        console.log(document.myform2);
        console.log(document.forms);
        console.log(document.forms[0]);
        console.log(document.forms['myform2']);
        console.log("--------------");
        //获取所有的表单对象
        
    </script>
</body>

获取input元素

如 text password hidden textarea，前两种常用

1)、通过 id 获取：docunment.getElementById(元素 id)
2）、通过form 名称形式获取：myform.元素名称; name属性值
3)、通过name获取：document.getElementsByName("name属性值")[索引] //从0开始
4)、通过 tagName 数组:document.getElementByTagName("标签名/元素名")[索引] //从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>
	function getTxt(){
        //1.document.getElemntById("id属性值")
	    var uname = document.getElementById("uname").value;//隐藏域
        console.log(uname);
        //2.表单对象.表单元素的name属性值
	    var pwd = document.getElementById("myform").upwd.value;
        console.log(pwd);

        //3.document.getElementById("myform").upwd.value;
	    var upwd = document.getElementsByName("uno")[0].value;
        console.log(uno);

        //4.document.getElementsByTagName("标签名/元素名称");
	    var intro = document.getElementsByTagName("textarea")[0].value;
	    console.log(intro);
}
</script>

获取单选按钮

前提：将一组单选按钮设置相同的name属性值
(1)获取单选按钮组

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

(2)遍历每个单选按钮，并查看单选按钮元素的checked属性
在JS代码中
checked=true表示选中
checked=false表示不选中
在HTML标签中
checked=checked或checked表示选中
不设置checked属性，表示不选中
若属性值为true表示被选中，否则未被选中
选中状态设定：checked=‘checked’ 或 check=‘true’ 或 checked
未选中状态：没有checked属性或 checked=‘false’
获取单选按钮的值元素.value

获取多选按钮

与单选按钮相同

获取下拉选项

（1）获取 select 对象

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

(2) 获取选中的索引

var idx = ufrom.selectedIndex;

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

var val = ufrom.options[idx].value;

注意：当通过options获取选中项的value属性值时，
若没有value属性，则取options标签的内容（文本值）
若存在value属性，则取value属性的值
(4) 获取选中项 options 的 text：

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

选中状态设定：selected = ‘selected’、selected=true、selected
未选中状态设定：不设selected属性

使用时顺序
1.获取下拉框对象
	 var 对象 = document.getElementById("属性值");
2.获取下拉框的下拉选项列表
	var options = 下拉框对象.options;
3.获取下拉框被选中项的索引
	var index = 下拉框对象.selectedIndex;
4.获取下拉框被选中项的值
	var 值 = 下拉框对象.value;
	注：
5.通过选中项的索引获取被选中项的值
	var 值 = 下拉框对象.options[index].value;
6.获取被选中项的文本
	var 文本值 = 下拉对象.options[index].text;

提交表单

提交表单如果直接只使用submit，那么输入的值不会对其有任何影响，不管你填没填值都无所谓。
所以提交表单前会先进行校验。

(1) 使用普通 button 按钮 + onclick事件 +事件中编写代码“（最常用）
    在事件中判断参数有没有值，如果没有问题，手动提交表单。
    ->获取表单对象.submit()
(2) 使用submit按钮 + onclick = “return 函数()” + 函数编写代码
    最后必须返回：return true | false;
submit按钮一点就会跑，
(3) 使用submit按钮/图片提交按钮 + 表单onsubmit = “return函数”; + 函数编写代码;
    最后必须返回：return true | false;

6.1

AJAX = Asynchronous JavaScript and XML.

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
AJAX 是一种用于创建快速动态网页的技术。

AJAX 通过在后台与服务器进行少量数据交换，使网页实现异步更新。这意味着可以在不重载整个页面的情况下，对网页的某些部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个页面。

AJAX如何工作

在这里插入图片描述
AJAX是基于现有的Internet标准，并且联合使用它们：

XMLHttpRequest 对象 (异步的与服务器交换数据)
JavaScript/DOM (信息显示/交互)
CSS (给数据定义样式)
XML (作为转换数据的格式)

XMLHttpRequest 是AJAX的基础
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

<body>
    <!--
        原生Ajax的实现流程：
            1.得到XMLHttpRequest对象
                var xhr = new XMLHttpRequest();
            2. 打开一个请求
                xhr.open();
                //形参method表示的是请求方式，通常是get或post
                //第二个参数url是访问的地址，
                //async为是否是异步。true表示为异步，false表示同步。
            3.发送请求
            xhr.send(params);
                params：需要传递给后台的参数。POST请求的时候用
                    如果是GET请求，设置为null。(GET请求的参数设置在url后面)
                    如果是POST请求，无参数设置为null，有参数则设置参数
            4. 接收响应
            xhr.status 响应状态  200为响应成功，404资源未找到，500服务器异常
            xhr.reponseText 对应响应结果
        post请求需要服务器      

        xhr.readState值。0表示还没打开请求，1表示打开请求了但还没有发送，当去发送的时候，后台会接受2 3 4 ，2是接受请求但还没有处理，3是接受请求但没有处理完，4是接受请求并且已经处理完了。
        由于是异步请求，所以需要知道后台已经将请求处理完毕，才能获取响应结果。
        监听状态 xhr.onreadystatechange = function(){

        }
        只要有值的变化，就会调用这个函数
    -->
    <script>
         //得到XMLHttpReques对象
        function test01(){
            var xhr = new XMLHttpRequest();
            /*xhr.onreadystatechange = function(){
                console.log(xhr.readyState);
            }*/
            //打开请求
            xhr.open("get","./data.json",false);//同步请求
            //写成data.json会报错
            //发送请求
            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.onreadystatechange = function(){
                console.log(xhr.readyState);
            }
            //打开请求
            xhr.open("get","./data.json",true);//异步请求
			//异步的话信息是读不出来的
            //写成"data.json"会报错
            //发送请求
            xhr.send(null);

            if (xhr.status == 200){
                console.log(xhr.responseText);
            }else{
                console.log("状态码：" + xhr.status + "，原因：" + xhr.responseText);
            }
            console.log("异步请求。。");
        }
        test02();
    </script>
</body>