ajax之post请求

来源：爱站旅游

导读ajax之post请求

html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>post请求</title>
</head>
<body>
	<form>
		<input type="text" name="username" id="username"/>
		<input type="text" name="age" id="age"/>
		<input type="button" value="按钮" id="btn"/>
	</form>
	<h1></h1>
	<script type="text/javascript">
		var btn = document.getElementById("btn");
		btn.onclick = function(){
			var ajaxObj = new XMLHttpRequest();
			ajaxObj.open("post","first.php");
			// 如果使用post发送数据，必须使用如下内容：
			// 修改了发送给服务器，请求报文的内容
			// 如果需要像HTML表单那样POST的数据，请使用setRequestHeader()来添加HTTP头，然后在send方法中规定您希望发送的数据
			ajaxObj.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			// POST请求发送的数据，写在send方法里面，格式：name=jack&&age=12字符串格式；
			// 在实际开发中，get  post的选取，后台程序员会以文档或者口头的形式告诉您
			// 如果不考虑提交文件，get post的基本一样，
			
			ajaxObj.send("username="+ document.getElementById("username").value + "&&age=" + document.getElementById("age").value);
			ajaxObj.onreadystatechange = function(){
				if(ajaxObj.readyState == 4 && ajaxObj.status == 200){
					console.log(ajaxObj.responseText);
					document.querySelector("h1").innerHTML = ajaxObj.responseText;	
				};
			};
		};
	</script>
</body>
</html>

php代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<?php
		echo '我叫'.$_POST['username'].'我今年'.$_POST['age'].'岁了';
	?>
</body>
</html>

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文

Top