Ajax基础：向服务器端传递post请求参数（普通类型+json类型）

最新推荐文章于 2024-05-16 13:55:28 发布

昔冰_G

最新推荐文章于 2024-05-16 13:55:28 发布

阅读量8.8k

点赞数 10

分类专栏： Ajax 文章标签： ajax javascript

本文链接：https://blog.csdn.net/qq_38800316/article/details/120392750

版权

Ajax 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

（普通类型的请求数据）

客户端 04ajax.html 的代码：

<body>
    <p><input type="text" name="" id="username"></p>
    <p><input type="text" name="" id="age"></p>
    <p><input type="button" name="" value="提交" id="btn"></p>

    <script>
        var btn = document.getElementById('btn');
        var usernameV = document.getElementById('username');
        var ageV = document.getElementById("age");
        btn.addEventListener('click', function() {
            var name = usernameV.value;
            var age = ageV.value;
            var params = 'username=' + name + '&age=' + age;
            // 创建ajax对象
            var aj = new XMLHttpRequest();
            // 配置ajax对象
            aj.open('post', 'http://localhost:3000/post');

            // 如果post请求参数是【params】中的格式，那么这里就要设置成下面的格式，固定写法
            aj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            // 发送请求
            aj.send(params);
            // 获取服务器端响应的数据
            aj.onload = function() {
                console.log(aj.responseText);
            }
        })
    </script>
</body>

如果post请求参数是：多个参数用&连接的格式，那么这里就要设置成下面的格式，固定写法
aj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

服务器端 app.js 代码：（普通类型的响应方式）

const express = require('express');
const path=require('path');
const bodyParser = require('body-parser');

const app = express();

//指明静态文件目录位置，以便浏览器中对（客户端）静态文件的加载
app.use(express.static(path.join(__dirname, 'public')));

// 调用urlencoded方法就意味着要解析application/x-www-form-urlencoded格式的参数
app.use(bodyParser.urlencoded({ extended: false }));

app.post('/post', (req, res) => {
    res.send(req.body);
})
 
app.listen(3000);
console.log('3000已启动');

（json类型的请求数据）

客户端 05ajax.html 的代码：

<body>
    <!-- 注意，请求必须以字符串的格式进行传递，所以如果要传递json类型的数据，必须先将其转换为字符串格式 -->
    <script>
        // 创建ajax对象
        var aj = new XMLHttpRequest();
        // 配置ajax对象，如果是传递json类型的数据，请求类型必须得是post
        aj.open('post', 'http://localhost:3000/json');

        // 传递json类型的数据，要设置成下面的格式，固定写法
        aj.setRequestHeader('Content-Type', 'application/json');

        // 发送请求，借助stringify来转为字符串格式进行传递
        aj.send(JSON.stringify({
            name: 'xibing',
            age: 20
        }));
        // 获取服务器端响应的数据
        aj.onload = function() {
            console.log(aj.responseText);
        }
    </script>
</body>

使用JSON.stringify()来对jsonl类型的数据进行类型转换，以便符合send()的参数类型规则

服务器端 app.js 代码：（json类型的响应方式）

const express = require('express');
const path=require('path');
const bodyParser = require('body-parser');

const app = express();
 
//指明静态文件目录位置，以便浏览器中对（客户端）静态文件的加载
app.use(express.static(path.join(__dirname, 'public')));

// 如果想要接收json类型的请求参数，需要改调用json()方法
app.use(bodyParser.json());
 
app.post('/json', (req, res) => {
    res.send(req.body);
})
 
app.listen(3000);
console.log('3000已启动');

总结：

两种请求方式（get/post）相比：

1、get请求方式中不用设置请求头信息

post请求方式必须要设置：（普通类型 or json类型）

aj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

aj.setRequestHeader('Content-Type', 'application/json');

2、get请求方式中将请求参数挂于【请求地址?】之后，多个参数用&连接；send()无参数

post请求方式将请求参数置于send()中传递（遇到json类型需要转为字符串再传递）

因为send()方法只能传递字符串类型的数据---借助JSON.stringify()方法转换类型

3、服务器端对get的响应无需配置用什么方法去解析什么类型的参数，req.query直接获取

对post的响应需要配置：（当然，用于解析post的body-parser第三方模块不能少）

对于普通类型：app.use(bodyParser.urlencoded({ extended: false }));

对于json类型：app.use(bodyParser.json());

昔冰_G

关注

10
点赞
踩
25

收藏

觉得还不错? 一键收藏
0
评论
Ajax基础：向服务器端传递post请求参数（普通类型+json类型）

（普通类型的请求数据）客户端04ajax.html的代码：<body> <p><input type="text" name="" id="username"></p> <p><input type="text" name="" id="age"></p> <p><input type="button" name="" value="提交" id="btn">&l..
复制链接

扫一扫