ajax php
php安装，背景处置惩罚脚本语言。后端开发语言不能直接允许，必须放在服务器对对应的文件夹下运行。
如：wamp的对应服务器的文件夹是www
https://i-blog.csdnimg.cn/blog_migrate/d0071a193276936d6038d0b6b88574d1.png
https://i-blog.csdnimg.cn/blog_migrate/3ea9b803633a85ca16e33a3f5dd278e6.png
https://i-blog.csdnimg.cn/blog_migrate/b947231f11a9e9a5a487c0a09ee4a06a.png
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"];
?>
https://i-blog.csdnimg.cn/blog_migrate/b30537510b5932d0b90202d8d445a92f.png
https://i-blog.csdnimg.cn/blog_migrate/aaa4bd4c701b6ef94ad3908a3824dfa5.png
https://i-blog.csdnimg.cn/blog_migrate/1f7d2a2d121b8f7410281e78e119d843.png
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"];
?>
https://i-blog.csdnimg.cn/blog_migrate/6263f91af845dcced2afb0c7ca2cf218.png
get和post的异同点
https://i-blog.csdnimg.cn/blog_migrate/ec4d6960014b24679df3cb14daddc789.png
https://i-blog.csdnimg.cn/blog_migrate/8bc2d751e4a5bf140d916cb89f0053fd.png
https://i-blog.csdnimg.cn/blog_migrate/ee313d901d76f819f7cc4470f66906a9.png
ajax
https://i-blog.csdnimg.cn/blog_migrate/584080058e74061b3e8fe9d3a88bb662.png
原生步调
https://i-blog.csdnimg.cn/blog_migrate/ab1248362faec9443d6383cc51963b0f.png
[*]创建异步对象
https://i-blog.csdnimg.cn/blog_migrate/d2690c3b96cafa4aa31d630f9a9f9e7e.png
[*]设置请求方式和请求地址
https://i-blog.csdnimg.cn/blog_migrate/f8dfc2fd511bee3b017a55a95799d393.png
[*]发送请求
https://i-blog.csdnimg.cn/blog_migrate/1a2867e9ad543955c6ab3a0a071c8fee.png
[*]监听状态变革
https://i-blog.csdnimg.cn/blog_migrate/34cabedd272b81cb740b3bfd4d86aeec.png
https://i-blog.csdnimg.cn/blog_migrate/ef3275bfd08d2a2fc626169f178c821a.png
[*]处置惩罚返回的效果
代码及征象：
//4.监听状态的变化,状态变化都会执行
xmlhttp.onreadystatechange = function () {
}
https://i-blog.csdnimg.cn/blog_migrate/685579a32ca8db153bbc8f2c0fbe16a6.png
<!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"
?>
https://i-blog.csdnimg.cn/blog_migrate/76a1dd26ac545148031105772d30f01f.png
完整步调代码及效果：
<!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>
<?php
echo "ajax get test"
?>
https://i-blog.csdnimg.cn/blog_migrate/9d14776ce73a7b9a42c6a43337f34440.png
jquery步调
https://i-blog.csdnimg.cn/blog_migrate/87169d34461f7b42998cd2ee5529b472.png
https://i-blog.csdnimg.cn/blog_migrate/58a6e05e2232ec17028bc09187711ca2.png
优点
小写也可正常发送
https://i-blog.csdnimg.cn/blog_migrate/33191a3f33c002fa5768064566505eb2.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]