Node.js——要求前端的数据可以传到后端,后端也可以传数据到前端 一次史上最简单的交互,新手入门最佳选择

要求前端的数据可以传到后端,后端也可以传数据到前端

前提:你肯定要先下载Node.js,再引入jquery.js
在这里插入图片描述

先来个HTML5

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="jquery.js"></script>
    <title>Document</title>
</head>

<body>
    <input type="text" id="start">
    <button>确认</button>
</body>
<script>
    $('button').click(function() {
        $.post('http://127.0.0.1:8082/test', {
            name: $('#start').val()
        }).then(res => {
            alert(res);
        })
    })
</script>

</html>

再加上个start.js

const http = require("http");
const url = require("url");
const querystring = require('querystring');
http.createServer(function(req, res) {
    res.setHeader('access-control-allow-origin', '*');
    var pathname = url.parse(req.url).pathname;
    var query = url.parse(req.url).query;
    if (pathname == '/test') {
        var postData = "";
        req.on("data", function(postDataChunk) {
            postData += postDataChunk;
        });

        req.on("end", function() {
            var params = querystring.parse(postData);
            var s = params.name;
            console.log(s);
            res.write("收到了,他是" + s);
            res.end();
        })
    }
}).listen(8082);

然后运行cmd,先到目的目录下,执行http-server,这样就打开了一个本地服务器。如图:
在这里插入图片描述然后再建一个cmd,(刚才那个cmd别关),同样先转到目的目录下,然后执行node start.js(这是你的js文件),如图:

在这里插入图片描述然后用浏览器(推荐谷歌)打开HTML5文件,输入,点框。如图:
在这里插入图片描述再看后端,成功返回。
在这里插入图片描述
最后附上Node.js手册
Node.js手册

发布了57 篇原创文章 · 获赞 96 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_44840572/article/details/103284307