封装Ajax
封装get方法
<!--* @Author: RealRoad1083425287@qq.com* @Date: 2023-04-06 09:40:41* @LastEditors: Mei* @LastEditTime: 2023-04-06 09:57:40* @FilePath: \\vscode\\ajax_get.html* @Description: * * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button onclick="sendMsg()">发送请求</button><script>function sendMsg(){get('./data.php',{id:2,title:"mez"},function(resp){console.log(resp)},true)}//封装get//url：string，请求的地址//query：object ,请求懈怠的参数//callback 成功之后的回调//isJson：boolean，是否需要解析JSONfunction get(url,query,callback,isJson){//如果有参数，先把参数拼接在url后面if(query){url+='?'for (var key in query){url+=`${key}=${query[key]}&`}//去除最后多于的&url=url.slice(0,-1)}var xhr=new XMLHttpRequest()xhr.open('get',url)xhr.send()xhr.onreadystatechange=function(){if(xhr.readyState===4){if(xhr.status===200){var res=isJson? JSON.parse(xhr.responseText):xhr.responseTextcallback(res)}}}}</script>
</body>
</html>测试用的PHP文件
<?php
/** @Author: RealRoad1083425287@qq.com* @Date: 2023-04-06 09:49:43* @LastEditors: Mei* @LastEditTime: 2023-04-06 09:55:13* @FilePath: \\vscode\\data.php* @Description: * * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. */$id =$_GET['id'];
$title=$_GET['title'];
// echo 'hello get';
echo json_encode(array('id'=>$id'title'=>$title'age'=>19
))
?>封装post方法
<!--* @Author: RealRoad1083425287@qq.com* @Date: 2023-04-06 09:40:41* @LastEditors: Mei* @LastEditTime: 2023-04-06 10:07:50* @FilePath: \\vscode\\ajax_post.html* @Description: * * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button onclick="sendMsg()">发送请求</button><script>function sendMsg(){// get('./data.php',{id:2,title:"mez"},function(resp){// console.log(resp)// },true)post('./data.php',{id:2,title:"mez"},function(resp){console.log(resp)},true)}//封装get//url：string，请求的地址//query：object ,请求懈怠的参数//callback 成功之后的回调//isJson：boolean，是否需要解析JSONfunction post(url,query,callback,isJson){var str=''//如果有参数，先把参数拼接起来if(query){// url+='?'for (var key in query){str+=`${key}=${query[key]}&`}//去除最后多于的&str=str.slice(0,-1)}var xhr=new XMLHttpRequest()xhr.open('post',url)xhr.setRequestHeader('content-Type','application/x-www-form-urlencoded')xhr.send(str)xhr.onreadystatechange=function(){if(xhr.readyState===4){if(xhr.status===200){var res=isJson? JSON.parse(xhr.responseText):xhr.responseTextcallback(res)}}}}</script>
</body>
</html>对应的PHP文件
<?php
/** @Author: RealRoad1083425287@qq.com* @Date: 2023-04-06 09:49:43* @LastEditors: Mei* @LastEditTime: 2023-04-06 10:07:31* @FilePath: \\vscode\\data.php* @Description: * * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. */$id =$_POST['id'];
$title=$_POST['title'];
// echo 'hello get';
echo json_encode(array('id'=>$id'title'=>$title'age'=>19
))
?>