GET 请求与POST 请求

GET 请求

　　携带数据

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!-- <form id="login" action="https://www.imooc.com/api/http/search/suggest" method="get">
            <input type="text" name="username" />
            <input type="text" name="words"/>
            <input type="password" name="password"/>
            <input type="submit" value="提交"/>
        </form> -->
        <script>
            //1.携带数据
            //GET请求不能通过请求体携带参数，但是可以通过请求头携带
             /* const url ='https://www.imooc.com/api/http/search/suggest?words=js&username=yth&age=18';
             const xhr =new XMLHttpRequest();
            
             xhr.onreadystatechange = () =>{
                 if(xhr.readyState!== 4) return;
                 
                 if(xhr.status>= 200&&xhr.status < 300 ||xhr.status===304){
                     console.log(xhr.responseText);
                 }
             };
             xhr.open('GET',url,true);
             xhr.send(null); */
            
            
            //不会报错，但不会发送数据    
            //xhr.send('sex = male');
            
        
        
            
        </script>
    </body>
</html>
复制代码

 

 

 

 　　

 

 

 　　

 

 

 　　

 

 

 　　

　　数据编码

　　　　

 

 

　　

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!-- <form id="login" action="https://www.imooc.com/api/http/search/suggest" method="get">
            <input type="text" name="username" />
            <input type="text" name="words"/>
            <input type="password" name="password"/>
            <input type="submit" value="提交"/>
        </form> -->
        <script>
            //1.携带数据
            //GET请求不能通过请求体携带参数，但是可以通过请求头携带
             /* const url ='https://www.imooc.com/api/http/search/suggest?words=js&username=yth&age=18';
             const xhr =new XMLHttpRequest();
            
             xhr.onreadystatechange = () =>{
                 if(xhr.readyState!== 4) return;
                 
                 if(xhr.status>= 200&&xhr.status < 300 ||xhr.status===304){
                     console.log(xhr.responseText);
                 }
             };
             xhr.open('GET',url,true);
             xhr.send(null); */
            
            
            //不会报错，但不会发送数据    
            //xhr.send('sex = male');
            
            //2.数据编码
            //如果携带的数据是非英文字母的话，比如说汉字，就需要编码之后在发送给后端，不然会造成乱码问题
            //可以使用encodeURLComponent（）编码    
            const url ='https://www.imooc.com/api/http/search/suggest?words=${encodeURLComponent(前端)}';
            const xhr =new XMLHttpRequest();
            
            xhr.onreadystatechange = () =>{
                if(xhr.readyState!== 4) return;
                
                if(xhr.status>= 200&&xhr.status < 300 ||xhr.status===304){
                    console.log(xhr.responseText);
                }
            };
            xhr.open('GET',url,true);
            xhr.send(null);
        
            
        </script>
    </body>
</html>
复制代码

POST 请求

　　携带数据

　　

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>POST请求</title>
    </head>
    <form id="login" action="https://www.imooc.com/api/http/search/suggest?words=js" method="post">
        <input type="text" name="username" />
        <input type="password" name="password"/>
        <input type="submit" value="提交"/>
    </form>
    <body>
        <script>
            const url ='https://www.imooc.com/api/http/search/suggest?words=js';
            const xhr =new XMLHttpRequest();
            
            xhr.onreadystatechange = () =>{
                if(xhr.readyState!== 4) return;
                
                if(xhr.status>= 200&&xhr.status < 300 ||xhr.status===304){
                    console.log(xhr.responseText);
                }
            };
            xhr.open('POST',url,true);
            //如果想发送数据，直接写在send（）参数位置，一
            xhr.send('username=lyw&age=18');
            
            //不能直接传递对象，需要先将对象转换成字符串的形式
            
        /*     xhr.send({
                username:'lyw',
                age:18
            }); */
            //【object Object】
        </script>    
    </body>
</html>
复制代码

 

　　　　

 

 　　　　　　

　　数据编码

　　　　

    //2.数据编码
            xhr.send('username=${encodeURLComponent('张三')}&age=18');

 

　　　　　　

posted @   zj勇敢飞，xx永相随  阅读(29)  评论(0)  编辑  收藏  举报
相关博文：
· XHR 的属性与XHR 的方法
· HTTP 方法与GET 和 POST 方法的对比
· GET请求&POST请求
· GET请求与POST请求
· GET请求、POST请求
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
点击右上角即可分享
微信分享提示