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>