ajax php

文章目录

get请求
post
get和post的异同点
ajax
- 原生步骤
- jquery步骤
- - 优点

php安装，后台处理脚本语言。

后端开发语言不能直接允许，必须放在服务器对对应的文件夹下运行。
如：wamp的对应服务器的文件夹是www
在这里插入图片描述

get请求

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>02-get</title>
</head>
<body><form action="02-get.php" method="get"><input type="text" name="userName"><br><input type="password" name="userPwd"><br><input type="submit" value="提交"><br></form></body>
</html>

<?php
//print_r($_GET);//查看可以知道这回得到一个Array的数据
echo $_GET["userName"];
echo $_GET["userPwd"];?>

在这里插入图片描述

post

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>02-post</title>
</head>
<body><form action="02-post.php" method="post"><input type="text" name="userName"><br><input type="password" name="userPwd"><br><input type="submit" value="提交"><br></form></body>
</html>

<?php//print_r($_GET);//查看可以知道这回得到一个Array的数据
echo $_POST["userName"];
echo $_POST["userPwd"];?>

在这里插入图片描述

get和post的异同点

在这里插入图片描述

ajax

在这里插入图片描述

原生步骤

在这里插入图片描述

创建异步对象
设置请求方式和请求地址
发送请求
监听状态变化
处理返回的结果

代码及现象：

 //4.监听状态的变化,状态变化都会执行xmlhttp.onreadystatechange = function () {}

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>04-ajax-get</title><!--1.什么是Ajax--><script >window.onload = function () {var oBtn= document.querySelector("button");oBtn.onclick = function (evl) {//1.需要创建异步对象var xmlhttp = new XMLHttpRequest();//2.设置请求方式和请求地址xmlhttp.open("GET","04-ajax-get.php",true);//3.发生请求xmlhttp.send();//4.监听状态的变化,状态变化都会执行xmlhttp.onreadystatechange = function () {if(xmlhttp.readyState === 4){//判断是否请求成功if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||xmlhttp.status === 304){//5.处理返回的结果console.log("接收到服务器返回的数据");}else {//5.处理返回的结果console.log("没有接收到服务器返回的数据");}}}}}</script>
</head>
<body><button>发生请求</button>
</body>
</html>

<?php
echo "ajax get test"
?>

在这里插入图片描述
完整步骤代码及结果：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>04-ajax-get</title><!--1.什么是Ajax--><script >window.onload = function () {var oBtn= document.querySelector("button");oBtn.onclick = function (evl) {//1.需要创建异步对象var xmlhttp = new XMLHttpRequest();//2.设置请求方式和请求地址xmlhttp.open("GET","04-ajax-get.php",true);//3.发生请求xmlhttp.send();//4.监听状态的变化,状态变化都会执行xmlhttp.onreadystatechange = function () {if(xmlhttp.readyState === 4){//判断是否请求成功if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||xmlhttp.status === 304){//5.处理返回的结果//console.log("接收到服务器返回的数据");alert(xmlhttp.responseText);}else {//5.处理返回的结果//console.log("没有接收到服务器返回的数据");}}}}}</script>
</head>
<body><button>发生请求</button>
</body>
</html>