JavaScript-XMLHttpRequest实例

最新推荐文章于 2019-12-05 16:09:04 发布

原创最新推荐文章于 2019-12-05 16:09:04 发布 · 625 阅读

0 ·

CC 4.0 BY-SA版权

Ajax 专栏收录该内容

5 篇文章

订阅专栏

这段代码展示了如何使用JavaScript的XMLHttpRequest对象进行GET和POST请求。点击搜索按钮时，发送GET请求到service.php，携带关键词参数。当请求成功且状态为200时，更新搜索结果区域的内容。同样，点击保存按钮时，发送POST请求，包含姓名、编号、性别和职位等参数，成功后更新创建结果区域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script>
document.getElementById("search").onclick=function(){
	//发送查询请求并处理
	var request = new XMLHttpRequest();
	request.open("GET","service.php?number="+document.getElementById("keyword").value);//第三个参数默认为true
	request.send();
	request.onreadystatechange=function(){
		if (request.readyState===4){
			if(request.status===200){
				//请求成功
				//刷新局部信息
				document.getElementById("searchResult").innerHTML=request.responseText;
			}else{
				//请求失败
				//打印错误信息
				alert("发生错误："+request.status);
			}
		}
	}
}


document.getElementById("save").onclick=function(){
	//发送查询请求并处理
	var request = new XMLHttpRequest();
	request.open("POST","service.php");//第三个参数默认为true
	var data="name="+document.getElementById('staffName').value
	+"&number="+document.getElementById('staffNumber').value
	+"&sex="+document.getElementById('staffSex').value
	+"&job="+document.getElementById('staffJob').value;
	request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	request.send(data);
	request.onreadystatechange=function(){
		if (request.readyState===4){
			if(request.status===200){
				//请求成功
				//刷新局部信息
				document.getElementById("createResult").innerHTML=request.responseText;
			}else{
				//请求失败
				//打印错误信息
				alert("发生错误："+request.status);
			}
		}
	}
}
</script>