122.AJAX_POST请求参数的使用

想成为数据分析师的开发工程师

已于 2022-09-30 14:25:34 修改

阅读量129

点赞数

分类专栏： Flask 文章标签： servlet javascript ajax flask json

于 2022-09-30 14:23:55 首次发布

本文链接：https://blog.csdn.net/m0_63953077/article/details/127122987

版权

Flask 专栏收录该内容

36 篇文章 1 订阅

订阅专栏

本文详细介绍了如何使用AJAX进行POST请求并传递参数，分别展示了通过字符串和JSON两种方式来组合及发送用户输入的用户名和密码。在字符串方式中，参数以URL编码形式附加在请求体；而在JSON方式中，参数被转换为JSON格式发送。两种方法都创建了XMLHttpRequest对象，设置了Content-Type头，并在onload事件中处理响应。

摘要由CSDN通过智能技术生成

<!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>AJAX的POST请求传参</title>
</head>
<body>
    <h1>AJAX的POST请求传参</h1>

    <table>
        <tr>
            <td>用户名：</td>
            <td><input type="text" name="" id="uname"></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" name="" id="pwd"></td>
        </tr>
        <tr>
            <td><input type="button" value="传递数据-str" onclick="submitForm1()"></td>
            <td><input type="button" value="传递数据-json" onclick="submitForm2()"></td> 
        </tr>
    </table>

    <script>
        // 字符串方式传递
        function submitForm1() {
            //获取input中的数据
            name = document.getElementById('uname').value
            pwd = document.getElementById('pwd').value
            //拼接参数
            args = 'uname='+uname+'&pwd='+pwd
            //创建xhr对象
            let xhr = new XMLHttpRequest()
            //设置请求的方式与请求地址
            xhr.open('POST','http://httpbin.org/post')
            //设置请求的内容
            // 主要设置了请求方式，以表单的形式传递，原本参数会放在data中，现在会放在form中，以key-value传递
            xhr.setRequestHeader("Content-Type",'application/x-www-form-urlencoded')
            //发送请求
            // 与get请求区别：get是把参数放到url地址中传递，post是把参数单独放到args中传递
            xhr.send(args)
            //获取服务器响应
            xhr.onload = () =>{
                console.log(xhr.responseText);
            }
        }

        // Json方式传递
        function submitForm2() {
            //获取input中的数据
            name = document.getElementById('uname').value
            pwd = document.getElementById('pwd').value
            //拼接参数
            // 需要把字典转换成JSON格式，最终的参数显示在data中
            args = {'uname':uname,'pwd':pwd}
            args = JSON.stringify(args)
            //创建xhr对象
            let xhr = new XMLHttpRequest()
            //设置请求的方式与请求地址
            xhr.open('POST','http://httpbin.org/post')
            //设置请求的内容
            // 主要设置了请求方式，以表单的形式传递，原本参数会放在data中，现在会放在form中，以key-value传递
            // 不强制，但是推荐设置
            xhr.setRequestHeader("Content-Type",'application/json')
            //发送请求
            // 与get请求区别：get是把参数放到url地址中传递，post是把参数单独放到args中传递
            xhr.send(args)
            //获取服务器响应
            xhr.onload = () =>{
                console.log(xhr.responseText);
            }
        }
    </script>
    
</body>
</html>