• B043-JavascriptDOM&Ajax

    目录

    JavascriptDOM

    01_事件绑定方式
    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<script type="text/javascript">
			
			// 点击事件 绑定方式一:
			function btn1(){
				alert("我出来了。。。。")
			}
			
			// 方式二：
			// 先获取元素： 通过id获取元素			
			// 页面加载事件：  页面加载完成之后再去执行，可以不管上下顺序
			window.onload=function(){
				var btn = document.getElementById("b1");	//需要添加页面加载事件，因为代码自上往下执行，先到这里时按钮二还没有加载到内存中
				// 在这个按钮上绑定一个单机事件
				btn.onclick=function(){
					alert("我又出来了。。。。")
				}
			}
						
		script>
	head>
	<body>
		<button onclick="btn1()">按钮一button>
		<button id="b1">按钮二button>
	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    02_文本操作
    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<script type="text/javascript">
			// 页面加载事件
			window.onload=function(){
				var sp = document.getElementById("sp");
				
				// 添加文本
				// innerHTML   会解析标签
//				sp.innerHTML="
    啊哈哈哈哈
    ";    
				// innerText:不会解析文本中的内容
//				sp.innerText="
    啊哈哈哈哈
    ";    
				
				// 获取文本   没有给值就是获取
				// 获取的是所有内容，包括子标签
				var sph = sp.innerHTML;
				alert(sph)
				// 获取的是纯文本
				var spt = sp.innerText;
				alert(spt);
			}
			
		    script>
	head>
	<body>
		<span id="sp"><h1>javah1>span>
	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    03_移入移出事件+文本操作
    DOCTYPE html>
<html>
	<head>
		
		<meta charset="UTF-8">
		<title>title>
		<style>
			#dv{
				border: 1px solid red;
				height: 200px;
				width: 200px;
				background: green;
			}			
		style>	
		<script type="text/javascript">
			//onmouseover	鼠标指针移动到对象上。
			//onmouseout	鼠标指针移出对象。
			// 绑定事件  div
			// 页面加载完成
			window.onload=function(){
				// 获取div元素
				var dv = document.getElementById("dv");
				// 绑定移入事件
				dv.onmouseover=function(){
					// 敌人来了
					dv.innerHTML="敌人来了。。。。。"
				}				
				// 绑定移出事件
				dv.onmouseout=function(){
					dv.innerHTML="敌人走了";
				}
			}			
		script>
	head>
	<body>
		<div id="dv" >div>
	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    04_属性和样式操作
    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style>
			.aa{
				color: red;
			}
		style>		
		<script type="text/javascript">
			// 页面加载事件
			window.onload=function(){
				// 获取a标签
				var arr = document.getElementsByTagName("a");				
				console.debug(arr);				
				// 遍历
				for(var i=0;i<arr.length;i++){

					// 绑定鼠标移入事件
					arr[i].onmouseover=function(){
					   this.style.backgroundColor="yellow";
					}				
					// 绑定移出事件
					arr[i].onmouseout=function(){
					   this.style.backgroundColor="white";
					}					
					// 绑定点击事件
					arr[i].onclick=function(){
					   // 动态的添加class属性 ，并且class的是aa
					   this.className="aa";
					}
				}
			}			
		script>
	head>
	<body>		
		<a href="javascript:;"><file>file>a>
		<a href="javascript:;">Edita>
		<a href="javascript:;">Edita>
		<a href="javascript:;">Edita>
		<a href="javascript:;">Edita>
	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    05_元素操作-打老虎
    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<body>
		<button id="btn">武松button>
		
		<script type="text/javascript">
			
			var tiger;
			setTimeout(function(){

				tiger = document.createElement("input");
				tiger.type="button";
				tiger.value="大老虎";  // 
				
				// 把input添加到body中
				document.body.appendChild(tiger);	
			},3000);
			
			// 打老虎
			document.getElementById("btn").onclick=function(){
				// 把新添加的input移出
				document.body.removeChild(tiger);
			}
			
		script>
	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    Ajax

    发送ajax get请求

    用户名验证：
    1.用户名元素直接绑定鼠标移出事件。
    2.发送请求到后台校验，根据检验结果分别在用户名输入标签旁边的元素里写“用户名已存在”或者“用户名可用”

    DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
head>
<body>
	<form action="/user/register" method="get">
		用户名:<input type="text" name="username" id="username" /><span id="sp">span><br/>
		密码: <input type="password" name="password" id="password" /><br/> 
			  <input type="submit" value="注册">
	form>
	<script type="text/javascript">	
		// 定义一个函数  返回一个ajax对象
		function getXhr(){
			var xhr = null;
			if(window.XMLHttpRequest){//针对非低版本ie浏览器
				xhr = new XMLHttpRequest();
			}else{//针对低版本的ie浏览器
				xhr = new ActiveXObject('Microsoft.XMLHTTP');
			}
			return xhr;
		}
		
        // get请求
		// 绑定失去焦点事件
		document.getElementById("username").onblur=function(){
			// 获取当前输入的用户名   为了给后台判断的
			var username = this.value;					
			// 1.获取ajax对象；
			var xhr = getXhr();
			// 2.准备发送请求
			xhr.open("get","/user/checkName?name="+username);
			// 3.设置回调函数（主要是获取服务器返回的正确数据）：
			xhr.onreadystatechange = function(){
				// 正确的结果
				if(xhr.readyState==4 && xhr.status==200){
					// 接受后台数据
					var msg = xhr.responseText;
					// alert(msg);
                    if(msg.indexOf("ok")!=-1){
						// 用户名可用  
						// 获取span标签
						document.getElementById("sp").innerHTML="用户名可用";
					}else{
						// 用户名不可用
						document.getElementById("sp").innerHTML="用户名已存在";					
					}	
				}				
			}
			// 4.发送请求
			xhr.send();
		}
	script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56

    UserController

    @Controller
public class UserController {

	@RequestMapping("/user/checkName")
	@ResponseBody // 不走视图解析器了
	public String checkName(String name){

		if("tom".equals(name)){
			return "no";
		}
		return "ok";	
	}
	
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    发送ajax post请求
    DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
head>
<body>
	<form action="/user/register" method="post">
		用户名:<input type="text" name="username" id="username" /><span id="sp">span><br/>
		密码: <input type="password" name="password" id="password" /><br/> 
			  <input type="submit" value="注册">
	form>
    
	<script type="text/javascript">	
		// 定义一个函数  返回一个ajax对象
		function getXhr(){
			var xhr = null;
			if(window.XMLHttpRequest){//针对非低版本ie浏览器
				xhr = new XMLHttpRequest();
			}else{//针对低版本的ie浏览器
				xhr = new ActiveXObject('Microsoft.XMLHTTP');
			}
			return xhr;
		}
		
        var flag;
		// 绑定失去焦点事件
		document.getElementById("username").onblur=function(){
			// 获取当前输入的用户名   为了给后台判断的
			var username = this.value;					
			// 1.获取ajax对象（已经获取）；
			var xhr = getXhr();
			
			// 2.准备发送请求
			xhr.open("post","/user/checkName");
			
			//3.设置回调函数（主要是获取服务器返回的正确数据）：
			xhr.onreadystatechange = function(){
				// 正确的结果
				if(xhr.readyState==4 && xhr.status==200){
					// 接受后台数据
					var msg = xhr.responseText;
					if(msg.indexOf("ok")!=-1){
						// 用户名可用
                        flag = true;
						// 获取span标签
						document.getElementById("sp").innerHTML="用户名可用";
					}else{
						// 用户名不可用
                        flag = false;
						document.getElementById("sp").innerHTML="用户名已存在";	
					}	
				}				
			}
			// 4.设置一个头信息
			xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
			// 5.发送请求
			xhr.send("name="+username);			
		}
        
        function subFun(){
			return flag;
		}
			
	script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67

    UserController

    @Controller
public class UserController {

	@RequestMapping("/user/checkName")
	@ResponseBody // 不走视图解析器了
	public String checkName(String name){

		if("tom".equals(name)){
			return "no";
		}
		return "ok";	
	}
	
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
  • 相关阅读:
    SQLAlchemy 连接池
    监听抖音直播间的评论并实现存储
    Qt篇——QTableWidget保存表格数据到Excel文件中，读Excel内容到QTableWidget
    php获取农历日期节日
    机器学习知识经验分享之一：卷积神经网络介绍
    剑指 Offer 10- II. 青蛙跳台阶问题
    springboot+canal+mysql+redis缓存双写一致性
    使用 Apache Camel 和 Quarkus 的微服务（五）
    linux安装mysql8
    04_SpringBoot整合Mybatis
  • 原文地址：https://blog.csdn.net/ffhgjgj6576567/article/details/131144675