ajax登录，get和post相关知识点_用户登录ajax中post-CSDN博客

本文链接：https://blog.csdn.net/weixin_47612165/article/details/109743147

ajax

1，ajax介绍

ajax也是技术名词的缩写：
Asynchronous：异步的；
JavaScript：JavaScript语言
And：和、与
XNL：数据传输格式

客户端通过HTTP向服务器发送请求
2，ajax使用
ajax是为了实现在不刷新整个页面的情况下，局部的更新页面的数据
为了实现ajax，W3C组织要求所有浏览器都内置一个XMLHttpReauest对象，这个对象负责实现ajax功能
3.登录
在这里插入图片描述

01from_client.php

<?php 
if($_GET['msg']=='ok'){

}else{

}
?>

<!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>
    <form action="01form.php" method="post">
    <div>
        <label for="">用户名</label>
        <input type="text" name="username">
    </div>
    <div>
        <label for="">密码</label>
        <input type="text" name="password">
    </div>
    <div>
        <input type="submit" value="登录">
    </div>
    </form>
    
</body>
</html>

01form.php

<?php
$username=$_POST['username'];
$password=$_POST['password'];
if($username=='admin' && $password=='admin'){
    header('location:01form_client.php?msg=ok');
}else{
    header('location:01form_client.php?msg=no');
}

4.ajax请求
1）ajax发送get请求
基本语法如下：
html代码

document.querySelector('button').addEventLustener('click',function() {
	// 创建对象
	var xhr=new XMLHttpRequest()
	// 配置要请求的地址和请求方式
	xhr.open('get','03get.php')
	// 发送请求
	xhr.send()
})

php代码

<?php
echo 'hello';

总结：
send方法不调用，是不会发送网络请求的
php端使用echo方法向客户端返回数据
传递参数
ajax通过get方法发送请求的时候，参数需要写到请求地址的后面，以问好分隔，如果由多个参数，中间使用&分隔

xhr.open('get','03get.php?id=5&title=明天就要放假了')

5.php端通过$_GET的方式获取

<?php
echo $_GET['title'];

ajax获取服务端返回值

xhr.onreadystatechange = function(){
/*
readyState 属性的值等于4，表名一次完整的ajax交互完成。
xmlhttprequest 对象会自动的将服务器端返回的信息放到
responseText 属性中
*/
if(xhr.readyState==4) {
		console.log(xhr.responseText);
	}
}

总结：
onreadystatechange时间一定要写到send方法前面
readyState属性的值为4的时候才可以从responseText属性中拿到服务器的返回值
php通过echo方法向客户端返回数据，返回的数据只能是字符串类型

完整代码

<!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>
<button>ajax 请求</button>
<script>
document.querySelector('button').addEventListener('click', function () {
// 创建对象
var xhr = new XMLHttpRequest()
// 配置要请求的地址和请求方式
xhr.open('get', '03get.php?id=5&title=明天就要放假了')
xhr.onreadystatechange = function () {
/*
readyState 属性的值等于4，表明依次完整的ajax交互完成，
xmlhttprequest 对象会自动的将服务器端返回的信息放到
responseText 属性中
*/
if(xhr.readyState==4){
console.log(xhr.responseText);
}
}
// 发送请求
xhr.send()
})
</script>
</body>

</html>

ajax发送post请求

6.ajax发送post请求，需要注意：

将open方法的第一个参数改为post
传递的参数不能放到地址的后面，而是放到send方法的参数中，格式与get请求一样
以post方法传递参数，一定要使用setRequestHeader方法设置请求
php端使用$_POST获取数据

<!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>
<button>ajax 请求</button>
<script>
document.querySelector('button').addEventListener('click', function () {
// 创建对象
var xhr = new XMLHttpRequest()
// 配置要请求的地址和请求方式
xhr.open('post', '04post.php')
xhr.onreadystatechange = function () {
/*
readyState 属性的值等于4，表明依次完整的ajax交互完成，
xmlhttprequest 对象会自动的将服务器端返回的信息放到
responseText 属性中
*/
if (xhr.readyState == 4) {
console.log(xhr.responseText);
}
}
//发送合适的请求头信息
xhr.setRequestHeader("Content-type", "application/x-www-formurlencoded");
// 发送请求
xhr.send('id=5&title=冬日光临，又过了一个秋天')
})
</script>
</body>
</html>

php

<?php
ajax $_POST['id'];