ajax小实践

最新推荐文章于 2024-06-10 20:04:31 发布

Jackson-p

最新推荐文章于 2024-06-10 20:04:31 发布

阅读量232

点赞数

本文链接：https://blog.csdn.net/jikexueyuan5555/article/details/79406655

版权

本文介绍了如何使用Ajax进行批量员工信息查询，通过给定的HTTP接口，传入员工ID获取详细信息，并探讨了CORS跨域问题。此外，还展示了如何在原生JS中实现文件上传并显示进度条的功能。

摘要由CSDN通过智能技术生成

一、传值取数据

给定一个http接口，传入一个员工id，返回员工的详细信息，接口形式为 http://localhost/query?id=。要求在前端实现一个根据一批员工id，通过 ajax 查询员工信息的功能。(阿里笔试题)

客户端：

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    <title>聊天</title>  
    <link rel="stylesheet" href="">
    <style type="text/css">  
		
	</style>
</head>  

  
<body>  
    <input id="gett" type="button" />
    <div id="data">here's the data</div>
    <script type="text/javascript">
		var btn=document.getElementById("gett");
		btn.οnclick=function(){
			var staff=[1,2,3,4,5,6,7,8],ul=document.createElement("ul");
			staff.forEach(function(index,element,array){
				if(XMLHttpRequest){
					var xhr=new XMLHttpRequest(),url="http://localhost:3000/query?id="+element;
					xhr.open("get",url,true);
					// xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
					xhr.onreadystatechange=function(){
						if(xh