概述
发送 Ajax 请求的五个步骤
1.创建异步对象。即 XMLHttpRequest 对象。
2.注册事件。 onreadystatechange事件，状态改变时就会调用。
如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
3.设置请求的参数。包括：请求的方法、请求的url。
4.发送请求。
5.获取返回的数据。
使用ajax GET方式发送请求：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
用户名：<input type="text" name="username" id="uname"><br>
密码：<input type="password" name="password" id="pwd"><br>
<input type="button" value="发送请求" id="btn">
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
// 获取用户名
var name = document.getElementById("uname").value;
// 获取密码
var pwd = document.getElementById("pwd").value;
// 创建xhr对象
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
request(xhr);
}
}
// 发送请求消息，连接服务器
xhr.open("GET",`01-get.php?username=${name} & pwd=${pwd}`,true);
// 发送请求消息
xhr.send(null);
}
function request(xhr){
console.log(xhr.responseText);
}
</script>
</body>
</html>
需要写 请求的方式 如 get 或 post , 以get 方式提交，需要写对应的参数。post 则不需要。true为请求方式是否异步发送。
xhr.open("GET",`01-get.php?username=${name} & pwd=${pwd}`,true);
php中的代码：
<?php
// 接收用户输入的用户名
$uname = $_GET['username'];
// 接收用户输入的密码
$upwd = $_GET['pwd'];
echo "姓名：".$uname,"密码：".$upwd;
?>
注意：接收的值应该是用户名，也就是用户输入的数据。$_GET[‘username’]。密码也一样，可以通过后端传入进来的数据进行比较，然后返回对应的结果。
点击按钮时，会发送Ajax 请求，服务端接收用户输入的数据进行判断返回。
function request(xhr){
console.log(xhr.responseText);//返回的数据结果。
}
最后
以上就是舒服热狗为你收集整理的ajax ----get请求的全部内容，希望文章能够帮你解决ajax ----get请求所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复