前端小白之每天学习记录----php（4）ajax
ajax技术( 异步请求 )
局部无刷新技术: ajax技术不需要刷新页面就能得到服务器的结果,
所以增强了体验。
请求: 发送一次网络连接
目的: 是为了获取服务器的数据
步骤：
第一步：要使用ajax技术， 必须要获取浏览器的ajax对象
通过浏览器内置的XMLHttpRequest 就可以得到ajax对象
第二步: 打开请求
open( 打开请求的方式, 请求的地址, true )
第三步: 发送请求
send使用发送数据的，GET方式一般发送null, 因为get方式的数据是通过url地址传递的
eg：用ajax输出一个hello world
1.在WWW目录下新建data.txt文件并在里面添加内容hello world。
2.在相同目录下新建ajax.php如下代码：
3.启动phpStudy
4.打开浏览器输入localhpst/ajax.html
5.点击按钮查看效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = function(){
var oBtn = document.querySelector("input");
oBtn.onclick = function(){
//第一步：要使用ajax技术， 必须要判断，获取浏览器的xjax对象
//通过浏览器内置的XMLHttpRequest 就可以得到ajax对象
var xhr = new XMLHttpRequest();
//onreadystatechange: 监听服务器数据变化
xhr.onreadystatechange = function(){
//通过xhr对象的属性 readyState的值 就可以判断出来数据接收成功
/*
1：相当于 xhr.open
2: 相当于 xhr.send
3: 接收到服务器的部分数据
4: 接受到服务端的完整数据
*/
// alert( xhr.readyState );
if( xhr.readyState == 4 ){
// alert( xhr.responseText );
document.querySelector("div").innerHTML = xhr.responseText;
}
}
//第二步: 打开请求
//open( 打开请求的方式, 请求的地址, true )
xhr.open( 'GET', 'data.txt', true );
//第三步: 发送请求
//send使用发送数据的，GET方式一般发送null, 因为get方式的数据是通过url地址传递的
xhr.send( null );
}
}
</script>
</head>
<body>
<input type="button" value="读取数据">
<div></div>
</body>
</html>
eg：用ajax+php输出一个当前时间
1.在WWW目录下新建一个php文件server.php
server.php
<?php
// echo date("Y-m-d H:i:s");
// if( isset( $_GET['name']) ){ //isset 判断请求是否存在
// echo $_GET['name'] . '--->' . $_GET['age'] . '--->' . date("Y-m-d H:i:s");
// }else if( isset( $_POST['name'] ) ){
// echo $_POST['name'] . '--->' . $_POST['age'] . '--->' . date("Y-m-d H:i:s");
// // echo 'post request: ' . date('Y-m-d H:i:s');
// }
echo $_REQUEST['name'] . '--->' . $_REQUEST['age'] . '--->' . date("Y-m-d H:i:s");
?>
2.在WWW目录下新建一个php文件time.php<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = function(){
var oBtn = document.querySelector("input");
var oDiv = document.querySelector("div");
oBtn.onclick = function(){
var xhr = new XMLHttpRequest();
var url = 'server.php?name=lxb&age=22&t=' + Math.random();//GET方法
// var url = 'server.php';//post方法
xhr.onreadystatechange = function(){
if( xhr.readyState == 4 ){
oDiv.innerHTML += xhr.responseText + '<br/>';
}
}
//GET方法
xhr.open( 'GET', url, true );
xhr.send( null );
/* //POST方法
xhr.open( 'POST', url, true );
//如果是用post发送的数据， 需要加一个请求头
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
//post的数据 放在send函数里面发过去
xhr.send( "name=lxb&age=22" );*/
}
}
</script>
</head>
<body>
<input type="button" value="获取时间">
<div></div>
</body>
</html>
3.打开浏览器输入localhpst/time.html
4.点击按钮查看效果
jQuery的ajax
$.get $.post $.ajax 三种函数形式
$.get( "1", { 2 }, 3);
1, 请求的url 2,发送的数据(json格式) 3,成功之后的回调函数（参数为接收到的结果-->res）
eg:$.get( "sever.php", { 'province_id', }, function( res ){ });
经典的ajxa----》三级联动
1.省市区表格
2.三种复制表数据方法
一.在安装PHPstudy目录下的mySQL目录下的data记录了数据库的数据信息
二.用数据库管理软件导入sql文件
三.用数据库管理软件复制表
3.数据库返回的数据一般是字符串或者xml形式
所以在php得到数组结果后要用 json_encode 把数组转成类似格式的字符串
<?php
echo json_encode( $arr);
?>
3.有时候ajax得到的数据是字符串，要转成json形式才能用
<script>
/*
JSON对象
parse: 字符串->json对象
stringify: json对象->字符串
*/
// var obj = {
// "a" : 10,
// "b" : 20
// };
// alert( typeof obj );
// var res = JSON.stringify( obj );
// alert( res );
// alert( typeof res );
var str = '{"a" : 10, "b" : 20}';
// alert( typeof obj );
var obj = JSON.parse( str );
alert( obj.a + ',' + obj.b );
</script>
浙公网安备 33010602011771号