ajax之使用get方式向服务器发送请求

最新推荐文章于 2024-04-14 21:09:52 发布

背着吉他的蝙蝠女侠

最新推荐文章于 2024-04-14 21:09:52 发布

阅读量879

点赞数

分类专栏： javascript

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

版权

javascript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<form>
		<input type="text" name="username" id="username"/> <br>
		<input type="text" name="address" id="address"/> <br>
		<input type="button" value="提交" id="btn"/>
	</form>
	<h1></h1>
	<script type="text/javascript">
		var username = document.getElementById("username");
		var address = document.getElementById("address");
		var btn = document.getElementById("btn");
		console.log(btn)
		btn.onclick = function(){
			// 发送ajax请求需要五步
			// 第一步：创建一步对象
			var ajaxObj = new XMLHttpRequest();

			// 第二步：设置请求的url等参数
			// 参数1：请求的方法；参数2：请求的url
			// get提交的数据时直接追加在url后面，格式是xxx.php?pass=123
			// 如何使用get向服务器发送数据，在url后面直接追加？username=xxx,然后提交到的文件，使用$_GET获取提交的数据
			// 动态的传递传参数：xxx.php?username=+'document.querySelector("input").value'; 使用&连接
			ajaxObj.open("get", "first.php?username=" + username.value + "&address=" + address.value);
			console.log()

			// 第三步：发送请求
			ajaxObj.send();
			
			// 第四步：注册事件
			ajaxObj.onreadystatechange = function(){
				// 为了保证数据完整回来，我们一般会判断两个值
				if(ajaxObj.readyState == 4 && ajaxObj.status == 200){
					// 第五步：在注册的事件中获取返回的内容，并修改页面内容
					console.log("调用了");
					// 数据是保存在异步对象的属性中
					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 '<div style="width: 100px;height: 100px;background: red"></div>';
		echo $_GET['username'].'tyu';
	?>
</body>
</html>

背着吉他的蝙蝠女侠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax之使用get方式向服务器发送请求

html代码如下： Document var username = document.getElementById("username"); var address = document.getElementById("address"); var btn = document.getElementById("btn"); c
复制链接

扫一扫