ajax之post请求

最新推荐文章于 2023-06-25 21:57:14 发布

背着吉他的蝙蝠女侠

最新推荐文章于 2023-06-25 21:57:14 发布

阅读量387

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/echokkk/article/details/78997891

版权

javascript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

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>

背着吉他的蝙蝠女侠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax之post请求

html代码如下： post请求 var btn = document.getElementById("btn"); btn.onclick = function(){ var ajaxObj = new XMLHttpRequest(); ajaxObj.open("post","first.php"); // 如果使
复制链接

扫一扫

专栏目录