phpajaxpost表单,Ajax的请求流程与GETPOST实现步
骤，FormData
⼀、AJAX基础知识：
1-基本概念：
-AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
-AJAX 不是新的编程语⾔，⽽是⼀种使⽤现有标准的新⽅法。
-AJAX 是与服务器交换数据并更新部分⽹页的艺术，在不重新加载整个页⾯的情况下。
-AJAX 代表异步 JavaScript 和 XML。
2- 同步与异步：以前端请求，后端响应为例。
- 同步: 前端发请求, 必须等到后端响应完成，才允许发送另⼀个请求。
- 异步: 前端发请求后不等待后端响应结果继续执⾏，后端响应完成通过事件通知前端处理。
异步最常⽤的处理形式就是回调函数
3-⽤AJAX有什么好处？
--传统的⽹页(不使⽤ AJAX)如果需要更新内容，必需重载整个⽹页⾯。
通过在后台与服务器进⾏少量数据交换，AJAX 可以使⽹页实现异步更新。这意味着可以在不重新加载整个⽹页的情况下，对⽹页的某部分进⾏更新。
4-AJAX 请求流程
1)创建 XMLHttpRequest 对象:
- XMLHttpRequest是浏览器提供的，处理异步请求的宿主对象,⽽⾮ JS 内置对象.
- 基本流程:
a. 创建请求对象: new XMLHttpRequest()variable = new XMLHttpRequest();
b. 监听请求回调: adystatechange = function () {
if (adyState === 4 && xhr.status === 200) {
console.sponseText);
}
c. 初始化请求参数: open(请求类型，请求地址，是否异步)xhr.open("GET", "test1.php", true);
d. 发送请求: send()xhr.send(null);
⼆、AJAX请求⽅式
1-GET⽅式请求
html代码： 前端: `JSON.parse()`解析 JSON 字符串
// 1. 创建Ajax对象
var xhr = new XMLHttpRequest();
// 2. 监听请求
if (adyState === 4 && xhr.status === 200) {
console.sponseText);
}
};
// 3. 初始化请求参数
xhr.open("GET", "test1.php", true);
// 4. 发送请求
xhr.send(null);
PHP代码(test1.php)：服务器: 返回 `JSON`<?php
$user['name'] = 'emy';
$user['age'] = '18';
/
/ 将数组转为json字符串, 不能⽤retrun, 必须⽤打印语句，如echo
echo  json_encode($user);
2-POST⽅式请求
html代码：前端: 发送 `JSON`
// 1. 创建Ajax对象
var xhr = new XMLHttpRequest();
// 2. 监听请求
if (adyState === 4 && xhr.status === 200) {
console.sponseText);
}
};
// 3. 初始化请求参数
xhr.open("POST", "test2.php", true);
// 4. 设置请求头，模拟表单类型的数组进⾏发送,application/x-www-form-urlencoded默认xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
var user = {
email: "emy@qq",
password: "123456",
};
// 将js对象转为json
var data = JSON.stringify(user);
// 5. 发送请求
xhr.send(data);
PHP代码(test2.php)：后端:
- json 数据以表单数据类型发送，可`$_POST` 接收.
- json 数组就是以 JSON 发送, `php://input` 流⽂件⽅式接收.<?php
// print_r($_POST);
$data = key($_POST);
// echo $data;
// 将$data将为php可以处理的数据
$user = json_decode($data);
print_r($user);
$user = json_decode($data, true);
print_r($user);
三、FormData：FormData是⼀种容器，⽤于模拟表单，向服务器提交数据. - 可直接序列化表单数据
- 可直接被 Ajax 识别，所以可以不设置请求头
- 除了表单数据外，也可⽤于普通数据
实例演⽰：
// 1. 创建Ajax对象
var xhr = new XMLHttpRequest();
// 2. 监听请求
if (adyState === 4 && xhr.status === 200) {
console.sponseText);
}
};
// 3. 初始化请求参数
xhr.open("POST", "test4.php", true);
// FormData
var data = new FormData();
data.append("username", "emy");
data.append("password", "123456");
// 5. 发送请求
xhr.send(data);
PHP代码(test4.php)：<?php
$pdo = new PDO('mysql:host=localhost;dbname=aaa', 'aaa', '123456');
$stmt = $pdo->prepare("SELECT COUNT(`id`) FROM `users` WHERE `email`=? AND `password`=? LIMIT 1"); $stmt->execute([$_POST['email'], sha1($_POST['password'])]);
$user = $stmt->fetch(PDO::FETCH_NUM);
四、FormData实现⽤户登录验证
html代码：html>
Ajax-POST-FormData
请登录
action=""
method="POST"
οnsubmit="return false"
>
type="email"
name="email"
placeholder="exam@email"
required
autofocus
/>
提交
// 1. 获取表单和按钮
var form = document.querySelector("form");
var btn = document.querySelector("form button"); // 2. 给按钮绑定点击事件，进⾏Ajax请求
// 1. 创建Ajax对象
var xhr = new XMLHttpRequest();
/
/ 2. 监听请求
if (adyState === 4 && xhr.status === 200) { console.sponseText);
// 将jsonl转js对象
var res = JSON.sponseText); console.log(res);
switch (res.status) {
case 0:
case 1:
error = ssage;
break;
default:
error = "未知错误";
}
// 将提⽰显⽰到表单中
var span = ateElement("span"); span.innerHTML = error;
lor = "red";
form.appendChild(span);
ajax是同步还是异步}
};
// 3. 初始化请求参数
xhr.open("POST", "test4.php", true);
// FormData
var data = new FormData(form);
data.append("login_time", new Date().getTime());
// 5. 发送请求

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。