封装Ajax

最新推荐文章于 2024-05-03 14:31:55 发布

mez_Blog

最新推荐文章于 2024-05-03 14:31:55 发布

阅读量1k

点赞数 1

分类专栏：前端 HTML5 mez_Blog的专栏文章标签： ajax javascript ecmascript 前端学习

本文链接：https://blog.csdn.net/mez_Blog/article/details/129983056

版权

mez_Blog的专栏同时被 3 个专栏收录

140 篇文章 6 订阅

订阅专栏

前端

67 篇文章 0 订阅

订阅专栏

HTML5

33 篇文章 0 订阅

订阅专栏

封装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，是否需要解析JSON
        function 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.responseText
                        callback(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，是否需要解析JSON
        function 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.responseText
                        callback(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
))
?>