jQ案例+AJAX

最新推荐文章于 2023-06-26 21:51:24 发布
最新推荐文章于 2023-06-26 21:51:24 发布
阅读量240 收藏
点赞数
分类专栏： 前端技术
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/herogxw4/article/details/88781683
版权

一、jQuery案例

1.属性
1.1overflow

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			div{
				background-color: cyan;
				width: 150px;
				height: 150px;
				overflow: visible;
			}
		</style>
	</head>
	<body>
		<!--
			overflow:溢出元素内容区域的内容会做出如何的处理
			
			
			visible:默认值，内容不会被修剪，会呈现在元素之外
			hidden:内容会被修剪，并且多余的内容是不可见的
			scroll:内容会被修剪，但是，浏览器会显示滚动条显示多余的内容
			auto:如果内容会被修剪，浏览器会显示滚动条显示多余的内容
			inherit:从父标签 继承overflow的属性	
		-->
		
		<div>
			visible:默认值，内容不会被修剪，会呈现在元素之外
			hidden:内容会被修剪，并且多余的内容是不可见的
			scroll:内容会被修剪，但是，浏览器会显示滚动条显示多余的内容
			auto:如果内容会被修剪，浏览器会显示滚动条显示多余的内容
			inherit:从父标签 继承overflow的属性	
		</div>
	</body>
</html>
1.2cursor

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			cursor:定义了鼠标指针放在一个元素的边界范围内呈现出来的光标形状
			
		-->
		<span style="cursor: auto;">定义了鼠标指针放在一个元素的边界范围内呈现出来的光标形状</span><br />
		<span style="cursor: crosshair;">定义了鼠标指针放在一个元素的边界范围内呈现出来的光标形状</span><br />
		<span style="cursor: default;">定义了鼠标指针放在一个元素的边界范围内呈现出来的光标形状</span><br />
		<span style="cursor: pointer;">定义了鼠标指针放在一个元素的边界范围内呈现出来的光标形状</span><br />
		<span style="cursor: move;">定义了鼠标指针放在一个元素的边界范围内呈现出来的光标形状</span><br />
		<span style="cursor: e-resize;">定义了鼠标指针放在一个元素的边界范围内呈现出来的光标形状</span><br />
		<span style="cursor: ne-resize;">定义了鼠标指针放在一个元素的边界范围内呈现出来的光标形状</span><br />
		<span style="cursor: nw-resize;">定义了鼠标指针放在一个元素的边界范围内呈现出来的光标形状</span><br />
		<span style="cursor: n-resize;">定义了鼠标指针放在一个元素的边界范围内呈现出来的光标形状</span><br />
		<span style="cursor: se-resize;">定义了鼠标指针放在一个元素的边界范围内呈现出来的光标形状</span><br />
		<span style="cursor: sw-resize;">定义了鼠标指针放在一个元素的边界范围内呈现出来的光标形状</span><br />
		<span style="cursor: s-resize;">定义了鼠标指针放在一个元素的边界范围内呈现出来的光标形状</span><br />
		<span style="cursor: w-resize;">定义了鼠标指针放在一个元素的边界范围内呈现出来的光标形状</span><br />
		<span style="cursor: text;">定义了鼠标指针放在一个元素的边界范围内呈现出来的光标形状</span><br />
		<span style="cursor: wait;">定义了鼠标指针放在一个元素的边界范围内呈现出来的光标形状</span><br />
		<span style="cursor: help;">定义了鼠标指针放在一个元素的边界范围内呈现出来的光标形状</span><br />
	</body>
</html>
2.选项卡

html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--引入外部文件-->
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		
		<!--整体-->
		<div id="box">
			<!--active:表示哪个块被选中-->
			<!--导航-->
			<ul id="menu">
				<li class="active">手机通讯</li>
				<li>手机通讯</li>
				<li>手机通讯</li>
				<li>手机通讯</li>
				<li>手机通讯</li>
				<li>手机通讯</li>
			</ul>
			
			<!--详细内容-->
			<div id="panel">
				<div class="panel active">
					<img src="img/images/1.jpg" />
					<div class="title">京东家电</div>
					<ul class="list">
						<li>买电视立即省1800元</li>
						<li>买电视立即省1800元</li>
						<li>买电视立即省1800元</li>
						<li>买电视立即省1800元</li>
					</ul>
				</div>
				
				<div class="panel">
					<img src="img/images/2.jpg" />
					<div class="title">京东家电</div>
					<ul class="list">
						<li>买电视立即省1800元</li>
						<li>买电视立即省1800元</li>
						<li>买电视立即省1800元</li>
						<li>买电视立即省1800元</li>
					</ul>
				</div>
				
				<div class="panel">
					<img src="img/images/3.jpg" />
					<div class="title">京东家电</div>
					<ul class="list">
						<li>买电视立即省1800元</li>
						<li>买电视立即省1800元</li>
						<li>买电视立即省1800元</li>
						<li>买电视立即省1800元</li>
					</ul>
				</div>
				
				<div class="panel">
					<img src="img/images/4.jpg" />
					<div class="title">京东家电</div>
					<ul class="list">
						<li>买电视立即省1800元</li>
						<li>买电视立即省1800元</li>
						<li>买电视立即省1800元</li>
						<li>买电视立即省1800元</li>
					</ul>
				</div>
				
				<div class="panel">
					<img src="img/images/5.jpg" />
					<div class="title">京东家电</div>
					<ul class="list">
						<li>买电视立即省1800元</li>
						<li>买电视立即省1800元</li>
						<li>买电视立即省1800元</li>
						<li>买电视立即省1800元</li>
					</ul>
				</div>
				
				<div class="panel">
					<img src="img/images/6.jpg" />
					<div class="title">京东家电</div>
					<ul class="list">
						<li>买电视立即省1800元</li>
						<li>买电视立即省1800元</li>
						<li>买电视立即省1800元</li>
						<li>买电视立即省1800元</li>
					</ul>
				</div>
			</div>
			
		</div>
		
		<script type="text/javascript" src="js/choice.js"></script>
	</body>
</html>

css文件

/*全局设置*/
*{
	padding: 0px;
	margin: 0px;
	font-size: 12px;
}


/*设置所有的无序列表*/
ul{
	list-style: none;
}

/*整体设置*/
#box{
	margin: 50px auto;
	width: 550px;
}

/*设置导航*/
#menu{
	/*单词，rgb() ,#ffffff------>#fff*/
	background: #eee;
	/*处理溢出的部分*/
	overflow: hidden;
}

/*设置导航中的li*/
#menu li{
	float: left;
	width: 85px;
	line-height: 30px;
	text-align: center;
	border: 1px solid #eee;
	border-bottom-color: #ccc;
	border-top-width: 2px;
	cursor: pointer;	
}

/*设置导航被选中的样式*/
#menu .active{
	border-left-color: #ccc;
	border-right-color: #ccc;
	border-top-color: blue;
	border-bottom-color: #fff;
	background: #fff;
}

/*设置每一块的内容*/
#panel .panel{
	/*将每一块都隐藏*/
	display: none;
	margin: 10px 0px;
	overflow: hidden;
}

/*单独设置第一块,将其显示*/
#panel .active{
	/*block或者inline-block都可以*/
	display: block;
}

#panel .panel img{
	float: left;
}

#panel .panel .title{
	margin-left: 280px;
	padding-bottom: 10px;
	border-bottom:1px solid #ccc;
}

#panel .panel .list{
	margin-left: 280px;
}

#panel .panel .list li{
	float: left;
	line-height: 25px;
	margin-top: 10px;
	text-decoration: underline;
}

js文件


//页面加载响应函数
$(function(){
	//给导航中的li添加单击事件
	$("#menu li").bind("click",function(){
		
		//一、导航的切换
		//1.清空所有li的class
		//$("#menu li").removeClass("active");
		
		
		//2.给选中的li添加新的class
		//eq():获取第几个子标签   
		//index()：获取当前被操作的标签的下标
		//$("#menu li").eq($(this).index()).addClass("active");
		
		
		//将上面的两部合并为一步：
		$("#menu li").removeClass("active").eq($(this).index()).addClass("active");
		
		//二、内容的切换
		$("#panel .panel").removeClass("active").eq($(this).index()).addClass("active");
	})
})
3.微信场景页

Swiper：是js封装的滑动特效插件

html文件

<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<!--引入css文件-->
	<link rel="stylesheet" type="text/css" href="css/wechat.css"/>
	<!--引入jQuery文件-->
	<script src="js/jquery-3.3.1.js"></script>
	<!--引入swipe文件-->
	<script src="js/jquery.touchSwipe.min.js" type="text/javascript" charset="utf-8"></script>
	
</head>
<body>
	<div id="container">
		<!--第一页-->
		<div class="page page1">
			<!--背景图-->
			<img src="img/indexBuilding.png" class="page1_building" />
			<!--转角遇到爱的文字-->
			<img src="img/indexTxt.png" class="page1_title"/>
			<!--设置云-->
			<img src="img/indexCloud.png" class="page1_cloud" />
			<!--其他元素-->
			<img src="img/indexElements.png" class="page1_elements" />
			<!--两朵太阳花-->
			<img src="img/indexFlowers01.png" class="page1_leftflower" />
			<img src="img/indexFlowers02.png" class="page1_rightflower" />
			<!--人-->
			<img src="img/indexFlight.png" class="page1_person"/>
		</div>
		
		<!--第二页-->
		<div class="page page2">
			<img src="img/wasBg.jpg" class="page2_back"/>
			<img src="img/wasFarm.png" class="page2_title1" />
			<img src="img/wasIT.png" class="page2_title2"/>
		</div>
		
		<!--第三页-->
		<div class="page page3">
			<img src="img/lastBusStation.png" class="page3_back"/>
			<img src="img/earlyTitle.png" class="page3_early" />
			<img src="img/lastBusTitle.png" class="page3_last" />
			<img src="img/bus.png" class="page3_bus" />
			<img src="img/lastBusAvatar.png" class="page3_person" />
		</div>
		
		<!--第四页-->
		<div class="page page4">
			<!--场景1-->
			<img src="img/lightOffBg.jpg" class="page4_back1" />
			<img src="img/cornerTitle.png" class="page4_title1" />
			<img src="img/clickGuide.png" class="page4_guide"/>
			
			<!--场景2-->
			<img src="img/lightOnBg.jpg" class="page4_back2" />
			<img src="img/weKnowYou.png" class="page4_title2" />
			
			<!--场景1 和 场景2 共同的灯  点击事件 切换图片-->
			<img src="img/lightOff.png" class="page4_light" onclick="onlight(this)"/>
		</div>
	</div>
	
	
	<!--引入js文件-->
	<script src="js/wechat.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

css文件

*{
	margin: 0;
	padding: 0;
}
/*设置容器有效的定位属性 --- 设置容器的移动*/
#container{
	position: absolute;
}

/*设置第一页*/
.page1{
	background-color: red;
	/*设置定位属性当做参照物*/
	position: relative;
}
/*设置背景图*/
.page1_building{
	position: absolute;
	bottom: 0px;
	width: 100%;
	/*默认是隐藏的 -- 便于之后设计淡入的效果*/
	display: none;
}
/*设置第一页的标题*/
.page1_title{
	position: absolute;
	height: 60%;
	top: 20%;
	left: 20%;
}
/*设置云和其他元素*/
.page1_cloud, .page1_elements{
	position: absolute;
	width: 70%;
	height: 70%;
	left: 15%;
	top: 15%;
	animation: zoomAnimate 2s infinite linear;
}
/*设定一个动画: 云和其他元素一直运动*/
@keyframes zoomAnimate{
	0%{
		transform: scale(1);
	}
	50%{
		transform: scale(1.2);
	}
	100%{
		transform: scale(1);
	}
}
/* 设置小花*/
.page1_leftflower{
	position: absolute;
	left: 15%;
	top: 10%;
	animation: flowerAnimate 2s infinite linear;
}

.page1_rightflower{
	position: absolute;
	top: 10%;
	right: 15%;
	animation: flowerAnimate 2s infinite linear;
}
/*设置花的动画*/
@keyframes flowerAnimate{
	0%{transform: rotate(-20deg);}
	25%{transform: rotate(0deg);}
	50%{transform: rotate(20deg);}
	75%{transform: rotate(0deg);}
	100%{transform: rotate(-20deg);}
}

/* 设置人*/
.page1_person{
	position: absolute;
	bottom: 30%;
	left: -100%;
	/*人进来之后是慢慢变大的*/
	width: 0;
	animation: zoomAnimate 2s infinite linear;
}

/*第二页*/
.page2{
	background-color: blue;
	/*将其设置为参照物*/
	position: relative;
}

/*设置第二页的背景图*/
.page2_back{
	width: 100%;
	height: 100%;
	/*为了设置淡入的效果*/
	display: none;
}
.page2_title1, .page2_title2{
	position: absolute;
	right: -100%;
	width: 0px;
}

.page2_title1{
	top: 30%;
}
.page2_title2{
	top: 60%;
}

/*第三页*/
.page3{
	background-color: orange;
	/*设置为参照物*/
	position: relative;
}
.page3_back{
	width: 100%;
	height: 100%;
}

/*凌晨 最后一班车*/
.page3_early, .page3_last{
	position: absolute;
	left: 0px;
	height: 5%;
}
.page3_early{
	top: 10%;
}
.page3_last{
	top: 17%;
}
/*设置车*/
.page3_bus{
	position: absolute;
	left: 0px;
	bottom: 10%;
	width: 50%;
}

/*
 * 设置人
 */
.page3_person{
	position: absolute;
	right: 0;
	bottom: 10%;
}

/*第四页*/
.page4{
	background-color: yellow;
	/*设置为参照物*/
	position: relative;
}

/*场景1*/
.page4_back1{
	width: 100%;
	height: 100%;
}
/*标题*/
.page4_title1{
	position: absolute;
	right: 0px;
	top: 15%;
	width: 50%;
}
/*设置灯*/
.page4_light{
	position: absolute;
	bottom: 0px;
	left: 6%;
	height: 70%;
}
/*开灯引语*/
.page4_guide{
	width: 50%;
	position: absolute;
	left: 18%;
	top: 40%;
	animation: zoomAnimate 2s infinite linear;
}

/*场景二的样式*/
.page4_back2{
	width: 100%;
	height: 100%;
	display: none;
}
.page4_title2{
	position: absolute;
	width: 50%;
	left: 25%;
	top: 40%;
	display: none;
}

js文件

//定义一个变量，用于记录当前的页码
var currentPage = 0;

$(function(){
	
	//1.获取窗口的大小
	var w_width = window.innerWidth;
	var h_height = window.innerHeight;
	
	
	//2.设置整个容器的大小
	var container = $("#container");
	container.width(w_width);
	container.height(h_height * 4);
	
	
	//设置每一页的大小
	var page = $(".page");
	page.width(w_width);
	page.height(h_height);
	

	//3.设置第一页
	//背景有一个淡入的效果，人有一个飞入的效果
	$(".page1_building").fadeIn(1000,function(){
		
		//人飞进来
		$(".page1_person").animate({"left":"15%","width":"70%"},1500);
		
	});
	
	//向上滑动翻页
	//Swipe插件的使用，swipe()，参数为字典，只有一对键值对，键是固定的，就是swipe，对应的值为一个函数
	container.swipe({
		/*
		 * event：事件对象
		 * direction：滑动的方向
		 * distance：滑动的距离
		 * duration：滑动过程持续的时间
		 * fingerCount：使用几根手指头
		 */
		swipe:function(event,direction,distance,duration,fingerCount){
			//up:向上    down:向下   left、right
			if(direction == "up"){
				//第一页切换到第二页
				currentPage++;
			}else if(direction == "down"){
				currentPage--;
			}
			
			//currentpage的取值范围：0~3
			//判断临界值
			if(currentPage > 3){
				currentPage = 3;
			}
			if(currentPage < 0){
				currentPage = 0;
			}
			
			//操作一个事件：容器向上滑动一页的时候，距离窗口的上边沿的间距为-(一个屏幕的高度)
			//top---->设置容器的有效定位
			container.animate({"top":currentPage * (-h_height) + "px"},400,function(){
				//第二页
				if(currentPage == 1){
					
					//背景图淡入
					$(".page2_back").fadeIn(1000,function(){
						//文本1动画进入
						$(".page2_title1").animate({"right":"0px","width":"70%"},1000,function(){
							//文本2动画进入
							$(".page2_title2").animate({"right":"0px","width":"70%"},1000);
							
						});
					});
						
				}
				
				
				//第三页
				if(currentPage == 2){
					$(".page3_bus").animate({"left":"-100%"},2000);
					$(".page3_person").animate({"right":"50%"},2000);
				}
				
			});
		}
	})
	
})


function onlight(img){
	//修改灯的图片
	img.src = "img/lightOn.png";
	
	
	//场景1淡出，淡出成功之后，场景2淡入
	$(".page4_back1").fadeOut("slow");
	$(".page4_title1").fadeOut("slow");
	$(".page4_guide").fadeOut("slow",function(){
		$(".page4_back2").fadeIn(500,function(){
			$(".page4_title2").fadeIn(500);
		})
	})
}

三、AJAX

1.ajax简介
1.1什么是ajax

AJAX,Asynchronous Javascript And XML,异步的javascript和xml

AJAX并不是一门新的编程语言，而是一种用于快速创建动态网页的技术

使用js与服务器之间进行交互，传输的数据可以是XML

交互方式：

​ 同步交互：客户端发出一个请求之后，需要等待服务端的响应，只有响应结束之后，才可以发送第二次请求

​ 异步交互：客户端发出一个请求之后，无需等待服务端的响应，就可以直接发送第二次请求

ajax除了异步的特点之外，还有一个使用：在浏览器中实现局部刷新【给用户的感受是在不知不觉中完成了一个请求和响应的过程】

1.2js实现局部刷新

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#usernamespan{
				display: none;
			}
		</style>
	</head>
	<body>
		<form id="form1">
			<input type="text" name="username" id="input1"/>
			<span id="usernamespan">*用户名不能为空</span>
			<input type="submit" />
		</form>
		<script>
			window.onload = function(){
				var form = document.getElementById("form1");
				
				//绑定表单事件
				form.onsubmit = function(){  //给表单对象添加了一个监听
					//获取用户名input的value值
					var usernameValue = form.username.value;
					if(!usernameValue){
						
						//获取span对象
						var span = document.getElementById("usernamespan");
						span.style.display = "block";
						
						//阻止表单提交
						return false;
					}
					
					//内容是合法的，允许表单提交
					return true;
				}
			}
		</script>
	</body>
</html>
1.3ajax的使用场景

a.关键字搜索

b.页面局部刷新

1.4ajax的优缺点

优点：

​ a.ajax向服务器发出异步请求

​ b.无需刷新整个页面

​ c.性能较高，效率较高

缺点：

​ a.并不适用于所有的场景，在某些操作中还的使用同步交互

​ b.虽然提高了用户体验，但是无形中向服务器发送请求的次数增多，会增大服务器压力

​ c.还需要考虑浏览器的兼容问题

2.ajax的技术

四步操作

​ a.创建核心对象

​ b.使用核心对象打开和服务器之间的连接

​ c.发送请求

​ d.注册监听，监听服务器的响应

涉及到的类，属性和方法

​ a.XMLHTTPRequest类

​ b.open(请求方式，服务器地址，是否异步)

​ c.send(请求体)

​ d.onreadystatechange,指定监听函数，当核心对象的状态发生改变的时候会被触发

​ e.readyState:当前核心对象的状态，如果取值为4说明服务器响应结束

​ f.status:服务器响应的状态码，如果为200表示请求成功

​ g.reponseText:获取服务器的响应体

2.1表单get请求

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			url
			http://主机名：端口号/资源路径?key1=value1&key2=value2&.....
			
			
			http://10.20.152.27/formget.php?username=aaa&age=27&password=hello
			
			
			什么是表单：
				向服务器提交数据，
				action：提交到哪里
				method：提交的方式
				
				
			get请求：
				把数据名称和数据使用=连接起来，如果有多个键值对，则使用&连接，将连接好的数据拼接到url的？后面
				缺点：所有的信息会出现在地址栏中，不安全，最大为2kb，不适合上传大的数据
				优点：简洁，效率
		
		
			使用ip地址测试，可以是127.0.0.1【localhost】
		-->
		<form action="http://10.20.152.27/formget.php" method="get">
			<input type="text" name="username" />
			<input type="text" name="age" />
			<input type="text" name="password" />
			<input type="submit" />
		</form>
	</body>
</html>
2.2表单post请求

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			post：
			优点：安全，上传数据的大小在理论上没有限制，适合上传比较大的数据
			缺点：麻烦
		-->
		<form action="http://10.20.152.27/formpost.php" method="post">
			<input type="text" name="username" />
			<input type="text" name="age" />
			<input type="text" name="password" />
			<input type="submit" />
		</form>
	</body>
</html>
2.3AJAX get请求

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button id="btn">获取密码和用户名</button>
		<script>
			window.onload = function(){
				//给按钮绑定点击事件，
				var btn = document.getElementById("btn");
				btn.onclick = function(){
					
					//向服务器发起请求
					//1.创建请求对象
					var xhr = null;
					
					//涉及到浏览器的兼容性问题
					//Python:try-except    js:try-catch
					try{
						xhr = new XMLHttpRequest();
					}catch(e){
						//IE5  IE6
						xhr = new ActiveXObject("Microsoft.XMLHTTP");
					}
					
					//2.与服务器建立连接
					/*
					 * open(请求方式，服务器的地址，是否需要异步)
					 * get：将上传的数据拼接在地址的后面
					 */
					//对参数中出现的中文需要进行编码，js：encodeURI(“中文”)，将编码之后的结果传输
					xhr.open("get","http://10.20.152.27/ajaxget.php?username=" +  encodeURI("杨阳")  + "&age=16&password=abc123",true);
					
					//3.发起请求
					xhr.send();
					
					
					//4.建立监听，监听服务器的响应
					xhr.onreadystatechange = function(){
						//服务器响应的信息
						/*
						 * 有两个字段可以捕捉
						 * readystate:表示当前对象的状态
						 * 		1 2 3 4，取值为4则表示响应结束
						 * 
						 * status:服务器返回的响应码
						 * 		200：数据请求成功
						 * 		404：资源找不到
						 * 		400：加载错误
						 * 		500：数据库问题
						 * 
						 * responseText:保存的是服务器返回的响应信息
						 */
						if(xhr.readyState == 4){
							if(xhr.status == 200){
								alert("数据请求成功");
								alert(xhr.responseText);
							}else{
								alert("数据请求失败");
							}
						}
					}
					
				}
			}
		</script>
	</body>
</html>
2.4AJAX post请求

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button id="btn">获取密码和用户名</button>
		<script>
			window.onload = function(){
				//给按钮绑定点击事件，
				var btn = document.getElementById("btn");
				btn.onclick = function(){
					
					//向服务器发起请求
					//1.创建请求对象
					var xhr = null;
					
					//涉及到浏览器的兼容性问题
					//Python:try-except    js:try-catch
					try{
						xhr = new XMLHttpRequest();
					}catch(e){
						//IE5  IE6
						xhr = new ActiveXObject("Microsoft.XMLHTTP");
					}
					
					//2.与服务器建立连接
					/*
					 * open(请求方式，服务器的地址，是否需要异步)
					 * post：将上传的数据拼接在地址的后面
					 */
					//对参数中出现的中文需要进行编码，js：encodeURI(“中文”)，将编码之后的结果传输
					//username=" +  encodeURI("杨阳")  + "&age=16&password=abc123"
					xhr.open("post","http://10.20.152.27/ajaxpost.php?",true);
					
					//注意：使用post的方式请求服务器的时候，需要指定数据的编码格式
					//请求头：设置数据的编码格式，固定写法
					xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
					
					
					//3.发起请求
					//请求体
					var str = "username=" +  encodeURI("杨阳")  + "&age=16&password=abc123";
					xhr.send(str);
					
					
					//4.建立监听，监听服务器的响应
					xhr.onreadystatechange = function(){
						//服务器响应的信息
						/*
						 * 有两个字段可以捕捉
						 * readystate:表示当前对象的状态
						 * 		1 2 3 4，取值为4则表示响应结束
						 * 
						 * status:服务器返回的响应码
						 * 		200：数据请求成功
						 * 		404：资源找不到
						 * 		400：加载错误
						 * 		500：数据库问题
						 * 
						 * responseText:保存的是服务器返回的响应信息
						 */
						if(xhr.readyState == 4){
							if(xhr.status == 200){
								alert("数据请求成功");
								alert(xhr.responseText);
							}else{
								alert("数据请求失败");
							}
						}
					}
					
					/*
					 http://127.0.0.1:8020/Day10Code/8.ajax%E7%9A%84get%E8%AF%B7%E6%B1%82.html?__hbt=1544774103455
					 * */
				}
			}
		</script>
	</body>
</html>
2.5ajax应用

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button id="btn">下载</button>
		<ul id="ul">
			
		</ul>
		
	
		<script>
			//需求1：封装函数，既可以进行get请求，也可以进行post请求
			//请求方式，请求服务器地址，需要发送的数据，请求成功之后的回调函数
			function ajax(method,url,data,successFn){
				//1.创建对象
				var xhr = null;
					
				try{
					xhr = new XMLHttpRequest();
				}catch(e){
					//IE5  IE6
					xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
				
				
				//2.与服务器之间建立连接
				//判断请求的方式,如果是get的话则需要进行更改url的形式
				if((method == "get" || method == "GET") && data){
					url += "?" + data;
				}
				
				xhr.open(method,url,true);
				
				
				//3.发送请求
				if(method == "get" || method == "GET"){
					xhr.send();
				}else{
					xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
					xhr.send(data);
				}
				
				//4.监听服务器的响应
				xhr.onreadystatechange = function(){
						
					if(xhr.readyState == 4){
						if(xhr.status == 200){
							//注意：ajax请求服务器之后，获取到的数据格式可能会不一样，我们自定义对数据的处理
							
							//调用回调函数，将请求成功之后得到的结果传参
							successFn(xhr.responseText);
							
						}else{
							alert("数据请求失败");
						}
					}
				}	
			}
			
			
			//需求2：请求服务器的新闻列表，使用无序列表显示出来
			window.onload = function(){
				//获取标签对象
				var btn = document.getElementById("btn");
				var ul = document.getElementById("ul");
				
				
				//绑定事件，点击按钮的时候向服务器发起请求
				btn.onclick = function(){
					
					ajax("get","http://10.20.152.27/news.php","",function(reponseData){
						
						//解析数据
						//返回的结果是一个数组
						var arr = JSON.parse(reponseData);
						
						//title和date被当做属性处理
						for(var i = 0;i < arr.length;i++){
							//arr[i]
							//创建标签的对象
							var li = document.createElement("li");
							var a = document.createElement("a");
							var span = document.createElement("span");
							
							//获取文本，并且设置为标签的文本
							a.innerHTML = arr[i].title;
							a.href = "#";
							
							span.innerHTML = "【" + arr[i].date + "】";
							
							//整合
							li.appendChild(a);
							li.appendChild(span);
							
							ul.appendChild(li);
								
						}
					})
				}
			}
		</script>
	</body>
</html>
爱讲笑话的霸王龙
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery 完整 ajax示例
12-23 2795
var param={ "rtspaddr":document.getElementById("rtsp").value } $.ajax({ type:"post", url:"/ConvertRtsp", contentType: "application/json;charset=UTF-8",//请求的媒体类型 data:JSON.stringify(param),//很重要，但是不知道为啥一定要强行转一下 dataType:"json",//返回对象 success: f
jQuery的Ajax实例（附完整代码）
Yuan_mingyu的博客
02-02 8万+
目录写在前边什么是AjaxAjax基本结构实例实例1实例2小结 写在前边 作为一个前端刚入门没多久的小白，想在这里分享一下我的学习内容，就算是学习笔记了。因为前端的大部分学习都是通过网站上的教程，所以遇到不懂得问题，也只有求助于网络，通过度娘，了解到了一些论坛、博客。在发现了众多技术大牛的同时，我也发现，一些像我这样的小白，由于能力有限，在查找相关资料的时候，对于大佬的一些操作理解困难，虽说能照猫...
3个jq案例
m0_66711291的博客
02-18 196
1.下拉菜单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
js / jq 发送 ajax 请求完整例子
ITLISHUANG的博客
09-25 375
写在前：出现跨域问题，后台也可以解决。 js 发送ajax请求五个步骤详解： 第一步： var xhr = new XMLHttpRequest(); //全局定义 创建 XMLHttpRequest() 异步对象 第二步： xhr.onreadystatechange = calback1 //在事件内 设置回调函数 第三步： xhr.open("GET","http://s.plcloud.music.qq.com/fcgi-bin/fcg_yqq_song_detail_info
jquery案例13——jq简易购物车、加减计算、删除
努力、拼搏、奋进
05-17 1499
一、案例效果演示 二、案例整体代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
jq+ajax简单实例
06-06
在IT行业中，jQuery和AJAX是两个非常关键的技术，它们为网页开发提供了高效的数据交互和动态更新内容的能力。本文将深入探讨如何结合jQuery与AJAX创建一个简单的实例，以帮助初学者更好地理解这两个技术的使用。 ...
微博案例看利用jq对ajax的使用
09-23
后台 wamp=Apache+Mysql+**PHP5** 前端 - jquery-1.12.4.js - jq-ajax - jquery.cookie. https://blog.csdn.net/qq_16546829/article/details/82814403
jquery+ajax例子
09-12
在IT行业中，jQuery和Ajax是两个非常重要的技术，它们在构建动态、交互性强的Web应用程序时发挥着关键作用。jQuery是一个高效、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。Ajax...
jQuery幸运中奖大转盘网页特效+ASP+jQuery+ajax读取数据库奖项数据
12-30
在本案例中，AJAX被用来异步地从服务器获取奖项数据，避免了页面刷新，提升了用户体验。通过jQuery的$.ajax()方法，前端可以向ASP服务器发送请求，接收响应，然后更新转盘上的奖项。 数据库管理是整个系统的关键...
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
10-15
主要介绍了jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作,结合实例形式分析了jQuery+Ajax请求json格式数据并渲染到html页面相关步骤与操作技巧,需要的朋友可以参考下
jq&&ajax;实例
01-28
通过ajax可以实现异步发送请求到达sevlet，进行一些处理，同时jq代码可以省略很多js
一个完整的jquery+ajax传送请求的实例
08-18
一个完整的jquery+ajax传送请求的实例
jQuery - Ajax的使用详解(主要简单试做了两个案例)
最新发布
m0_52336378的博客
06-26 1014
首先学习前提出几个问题进行对Ajax的了解什么是Ajax？Ajax怎样进行使用Ajax的功能？同步与异步的区别？前端向后端发起请求的方式有哪些？Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指⼀种创建交互式⽹⻚应⽤的⽹⻚开发技术。Ajax 是⼀种⽤于创建快速动态⽹⻚的技术。Ajax 是⼀种在⽆需重新加载整个⽹⻚的情况下，能够更新部分⽹⻚的技术。
JavaWeb_21_JQuery高级
weixin_45640009的博客
09-21 236
今日内容： 1. JQuery 高级 1. 动画 2. 遍历 3. 事件绑定 4. 案例 5. 插件 JQuery 高级 1. 动画 1. 三种方式显示和隐藏元素 1. 默认显示和隐藏方式 1. show([speed,[easing],[fn]]) 1. 参数： 1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000) 2. easing：用来指定切换效果，默认是"swing"
jQuery案例
WangZhang_521的博客
05-06 2622
01-精品展示案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
jquery案例6—— jq聚焦失焦、普通元素获取文本、表单获取元素
努力、拼搏、奋进
05-16 1444
一、案例描述 聚焦失焦事件，当input聚焦时，添加阴影聚焦效果。输入内容，当失焦后，会将输入的内容进行显示。 二、案例效果演示 三、案例局部代码 css代码： <style> input { width: 250px; border: none; outline: none; border: 1px solid green; border-radius: 5px; height: 40p
jQuery设计思想
weixin_34309543的博客
09-23 340
译文出自：阮一峰的网络日志 jQuery设计思想 一、选择网页元素jQuery的基本设计和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他函数库的根本特点。 使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()(简写为$)，然后得到被选中的元素。 选择表达式可以是CSS选择器： $(document)//选择整个文档对象 $...
jQuery AJAX简介和简单实例
Borny鼎鼎的博客
06-14 1168
语法：$(selector).load(URL,data,callback);可选的callback参数是load()方法完成后所执行的函数名称。$.post()方法通过HTTP POST请求从服务器上请求数据。$.get()方法通过HTTP GET请求从服务器上请求数据。可选的callback参数是请求成功后所执行的函数名。可选的callback参数是请求成功后所执行的函数名。必需的URL参数规定您希望加载的URL。必需的URL参数规定您希望请求的URL。必需的URL参数规定您希望请求的URL。
JQuery中Ajax的操作完整例子
热门推荐
小小小的博客
01-20 9万+
Java软件开发中，后台中我们可以通过各种框架，像SSH等进行对代码的封装，方便我们对Java代码的编写，例如，Struts,SpringMVC对从前台到action的流程进行封装控制，使我们只需要进行一些简单配置就可以实现；而spring进行了对各种对象的管理进行封装，提供了AOP编程的方式，大大方便了我们；而hibernate和IBatis则是对JDBC代码进行封装，不需要我们每次都写那些重复
JQ+AJAX刷新数据库
06-01
您可以使用jQuery和AJAX来刷新数据库。以下是一个简单的例子： 1. HTML文件中包含一个按钮，当用户点击按钮时，将触发AJAX请求并刷新数据库。 ``` 刷新数据库 ``` 2. 在JavaScript文件中，使用jQuery的ajax()方法...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值