【NodeJS】最简单的不用路由及框架的前后台交互

本是古典何须时尚 2022-05-24 11:50 127阅读 0赞

声明：index.html 与 app.js位于同一级目录

#### POST 请求 ####

post方式提交的数据，需要监听两个事件：

*  data —— 当请求发送数据会触发data事件
 *  end —— 当数据接收完成会触发end事件。

index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        名字：
        <input type="text" name="name" id="name" placeholder="请输入用户名">
        <button type="button" onclick="send()">发送</button>
        <div id="returnVal"></div>
    
        <script> function send() { var name = document.getElementById('name').value; // 1.创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 2.请求行 xhr.open('POST', 'http://127.0.0.1:3000'); // 3.请求头 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // 4.设置数据 xhr.send(name); // 5.监听服务器响应 xhr.onreadystatechange = function(){ if (xhr.readyState==4 && xhr.status==200){ document.getElementById('returnVal').innerHTML = xhr.responseText; } }; }; </script>
    </body>
    </html>

app.js

将这两个文件放在xampp本地服务器里的htdocs中并开启Apache服务器  
node app.js 启动node服务器

演示效果图：  
![这里写图片描述][70]

#### GET 请求 ####

app.js

效果演示图：  
![这里写图片描述][70 1]

拓展：[【NodeJS】http.createServer与http.Server对比][NodeJS_http.createServer_http.Server]

[70]: /images/20220524/c1e99d25a46c4d57b1d185463cdfef5a.png
[70 1]: /images/20220524/b5393c06497548279d40e886160b76ba.png
[NodeJS_http.createServer_http.Server]: https://blog.csdn.net/u013451157/article/details/80464685