ajax是什么？
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新，可以局部刷新而不必整个页面整体刷新。
url的简单认识：
进入服务器的三种方式：
1.localhost：端口号（进入本机创建的服务器）
http://localhost:8888/
2.127.0.0.1：端口号（进入本机创建的服务器）
http://127.0.0.1:8888/
3.ip：端口号
http://192.168.9.105:8888/
上传数据到服务器的两种方法：
第一种通过form表单：
get方式
<h1>通过get方式提交表单</h1> <form action="05.php" method="GET"> <input type="text" placeholder="请输入用户名" name="userName"> <br> <input type="text" placeholder="请输入技能" name="userSkill"> <br> <input type="submit"> <button>提交</button> <!-- <input type="image" src=""> --> </form>
<?php echo "这个为get提交的页面"; // $_GET[] get提交方式从前台传递过来的数据 echo "<br>"; echo $_GET['userName']; echo "<br>"; echo $_GET['userSkill']; echo "<br>"; echo '<h1>'.$_GET['userName'].'欢迎你</h1>'; //在php中字符串拼接使用的是. ?>
post方式：
<h1>通过post方式提交表单</h1> <form action="06.php" method="POST"> <input type="text" placeholder="请输入用户名" name="userName"> <br> <input type="text" placeholder="请输入技能" name="userSkill"> <br> <input type="submit"> <button>提交</button> <!-- <input type="image" src=""> --> </form>
<?php echo "这个为get提交的页面"; echo "<br>"; echo $_POST['userName']; echo "<br>"; echo $_POST['userSkill']; echo "<br>"; echo '<h1>'.$_POST['userName'].'欢迎你</h1>'; //在php中字符串拼接使用的是. ?>
第二种通过ajax提交到后台
原生ajax get版本
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax</title> </head> <body> <script> // 一般情况下只能在有服务的环境下发送请求 // ajax是局部刷新 // 1.创建ajax对象-xmlhttprequest对象 // XMLHttpRequest 对象 // variable=new XMLHttpRequest(); 新版本的浏览器 // variable=new ActiveXObject("Microsoft.XMLHTTP"); //老版本的IE ，IE5，IE6 var xhr; if(window.XMLHttpRequest){ //常规，如果有，直接使用 xhr = new XMLHttpRequest(); }else{ //如果没有，老版本IE xhr = new ActiveXObject("Microsoft.XMLHTTP"); } console.log(xhr) console.log("状态码:" + xhr.readyState); console.log('响应码：' + xhr.status); console.log('响应文本:' + xhr.responseText); console.log('步骤一完成') // 2.通过监听ajax的状态的改变来监听 xhr.onreadystatechange = function(){ console.log('xhr的状态码发生了改变'); console.log("状态码:" + xhr.readyState); console.log('响应码：' + xhr.status); console.log('响应文本:' + xhr.responseText); console.log(' '); } console.log('步骤二完成') // 3.创建请求的消息，连接服务器 状态码0=>1 xhr.open('GET','07.php',true); //最后一个参数是bool，表示同步||异步，true异步 console.log('步骤三完成') // 4.发送 xhr.send(null); //如果是post请求，就放post参数，如果是get请求，发送null就行了 // •0: 请求未初始化 // •1: 服务器连接已建立 // •2: 请求已接收 // •3: 请求处理中 // •4: 请求已完成，且响应已就绪 // 响应码： // 1xx 信息类 // 2xx 成功 200 // 3xx 重定向 304 // 4xx 客户端错误 404 // 5xx 服务端错误 // 参考 // https://blog.csdn.net/ddhsea/article/details/79405996 </script> </body> </html>
<?php for($i = 0;$i<5;$i++){ // echo "hello world".$i; echo "hello world $i"; //双引号直接可以写变量，但是单引号不行，就表示一个串 echo "<br>"; } ?>
jquery版本的ajax
$("#btn").click(function(){
$.ajax({
type : "POST",
url : "http://192.168.9.154:8888/0221ajax/01.php",
data : {
uname : $("#username").val()
},
success : function(data){ //就是原生的xhr.responseText
console.log(data);
if(data == 0){
$("#ts").html("该用户名可以使用").css("color","green");
}else if(data == 1){
$("#ts").html("该用户名已被占用").css("color","red");
}
},
error : function(err){ //错误的
console.log(err)
}
})
})
<?php header("ACCESS-CONTROL-ALLOW-ORIGIN:*"); header("ACCESS-CONTROL-ALLOW-Methods:POST,GET"); $db = ['jack','mack','mary']; //模拟数据库 $username = $_REQUEST['uname']; //表示可以接收post参数或者get参数 $flag = false; foreach($db as $n){ if($n === $username){ $flag = true; break; } } if($flag){ echo "1"; }else{ echo "0"; } ?>