ajax的get和post(需修改)

最新推荐文章于 2022-10-13 23:19:32 发布

hjy170314

最新推荐文章于 2022-10-13 23:19:32 发布

阅读量303

点赞数

分类专栏：前端知识文章标签：前端 ajax

本文链接：https://blog.csdn.net/hjy170314/article/details/83281298

版权

前端知识专栏收录该内容

104 篇文章 2 订阅

订阅专栏

1：首先创建XMLHttpRequest对象:

2：向服务器发送请求

xhr.open(a,b,c)

a:请求方式（get或者post）

b:请求地址（接口地址）

c:是否异步（TRUE || FALSE）

xhr.send() 向服务器发送的数据，post方式需要有发送的数据

xhr.onreadystatechange()监听状态码改变，当状态码为4且页面响应状态status为200时触发

get和post的ajax请求区别：

post设置请求头

send()应该有传递给服务器的数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>post</title>
	</head>
	<body>
    <input type="text" value="" />
		<input type="password" value="" />
		<input type="button" value="登录" />		
		<script type="text/javascript">
			window.onload = function(){
				var aInput = document.getElementsByTagName("input");				
				aInput[2].onclick = function(){
					var username = aInput[0].value;
					var pwd = aInput[1].value;
					var xhr = new XMLHttpRequest();
					xhr.open("POST","http://192.168.2.67:3000/api/user",true);
					xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
					xhr.send("name="+username+"&password="+pwd);
					xhr.onreadystatechange = function(){
						if(xhr.readyState == 4 && xhr.status == 200){
							console.log(xhr.responseText);	
						}
					}
				}
			}
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
    <script type="text/javascript">
			var xhr = new XMLHttpRequest();
			xhr.open("GET","http://192.168.2.67:3000/api/nowPlaying",true);
			xhr.send();
			xhr.onreadystatechange = function(){				
				console.log(xhr.readyState);			
				if(xhr.readyState == 4 && xhr.status == 200){			
					var data = xhr.responseText;				
					document.write(data);		
				}			
			}
		</script>
	</body>
</html>

hjy170314

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax的get和post(需修改)

1：首先创建XMLHttpRequest对象:2：向服务器发送请求 xhr.open(a,b,c)a:请求方式（get或者post）b:请求地址（接口地址）c:是否异步（TRUE || FALSE） xhr.send() 向服务器发送的数据，post方式需要有发送的数据 xhr.onreadystatechange()监听状态码改变...
复制链接

扫一扫

专栏目录