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手冊

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章