526互联

GET 请求与POST 请求

发布时间 2023-03-22 21:17:14作者: 95232

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');