ajax笔记（一）传递get、post、json格式的请求参数

最新推荐文章于 2021-10-25 23:52:13 发布

WWang_07

最新推荐文章于 2021-10-25 23:52:13 发布

阅读量2.1k

点赞数

分类专栏：笔记文章标签： ajax

本文链接：https://blog.csdn.net/WWang_07/article/details/109106272

版权

笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

服务端代码：

//引入express框架
const express = require('express');
//路径处理模块
const path = require('path');
const bodyParser = require('body-parser');
//创建web服务器
const app = express();

// app.use(bodyParser.urlencoded());
app.use(bodyParser.json());

//静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));

// app.get('/json-server', (req, res) => {
//     res.send({ 'name': 'zs' })
// });
app.get('/ajax-get', (req, res) => {
    res.send(req.query);
});
app.post('/ajax-post', (req, res) => {
    res.send(req.body);
});
app.post('/json', (req, res) => {
    res.send(req.body);
});
//监听端口
app.listen(3000);
console.log('服务器启动成功');

传递get请求

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

    <script>
        const btn = document.querySelector('#button');
        //获取两个文本框
        const username = document.querySelector('#username');
        const age = document.querySelector('#age');
        btn.addEventListener('click', function() {
            //创建ajax对象
            const xhr = new XMLHttpRequest();
            const nameValue = username.value;
            const ageValue = age.value;
            //拼接求参数
            var params = 'username=' + nameValue + '&age=' + ageValue;
            xhr.open('GET', 'http://localhost:3000/ajax-get?' + params);
            xhr.send();
            //监听响应
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        console.log(xhr.responseText);

                    }
                }
            }


        })
    </script>

</body>

2.传递post请求

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

    <script>
        const btn = document.querySelector('#button');
        //获取两个文本框
        const username = document.querySelector('#username');
        const age = document.querySelector('#age');
        btn.addEventListener('click', function() {
            //创建ajax对象
            const xhr = new XMLHttpRequest();
            const nameValue = username.value;
            const ageValue = age.value;
            //拼接求参数
            var params = 'username=' + nameValue + '&age=' + ageValue;
            xhr.open('POST', 'http://localhost:3000/ajax-post');
            //设置请求此参数格式的类型(post请求必须设置)
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.send(params);
            //监听响应
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        console.log(xhr.responseText);
                    }
                }
            }


        })
    </script>

</body>

3.传递json格式的请求

<body>

    <script>
        //创建ajax对象
        const xhr = new XMLHttpRequest();
        xhr.open('POST', 'http://localhost:3000/json');
        //通过请求头告诉服务器端，客户端向服务器端传递请求参数的格式是什么
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.send(JSON.stringify({
            name: 'lisi',
            age: '50'
        }));
        //监听响应
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    console.log(xhr.responseText);

                }
            }
        }
    </script>

</body>

WWang_07

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
ajax笔记（一）传递get、post、json格式的请求参数

服务端代码：//引入express框架const express = require('express');//路径处理模块const path = require('path');const bodyParser = require('body-parser');//创建web服务器const app = express();// app.use(bodyParser.urlencoded());app.use(bodyParser.json());//静态资源访问服务功能app
复制链接

扫一扫