Node中怎么實現前后端交互，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
index.html：
<!doctype> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button id="btn1">food</button> <button id="btn2">other</button> <h2 id="content"></h2> <script type="text/javascript" src="./client.js"></script> </body> </html>
接下來是服務器端的代碼，運行方式是在node環境下輸入命令：node server.js
server.js：
let http = require('http');
let qs = require('querystring');
let server = http.createServer(function(req, res) {
let body = ''; // 一定要初始化為"" 不然是undefined
req.on('data', function(data) {
body += data; // 所接受的Json數據
});
req.on('end', function() {
res.writeHead(200, { // 響應狀態
"Content-Type": "text/plain", // 響應數據類型
'Access-Control-Allow-Origin': '*' // 允許任何一個域名訪問
});
if(qs.parse(body).name == 'food') {
res.write('apple');
} else {
res.write('other');
}
res.end();
});
});
server.listen(3000);引入的qs模塊用于解析JSON
req.on('data', callback); // 監聽客戶端的數據，一旦有數據發送過來就執行回調函數
req.on('end', callback); // 數據接收完畢
res // 響應
客戶端的js（功能就是負責一些DOM操作以及發送ajax請求）
client.js：
let btn1 = document.getElementById('btn1');
let btn2 = document.getElementById('btn2');
let content = document.getElementById('content');
btn1.addEventListener('click', function() {
ajax('POST', "http://127.0.0.1:3000/", 'name='+this.innerHTML);
});
btn2.addEventListener('click', function() {
ajax('POST', "http://127.0.0.1:3000/", 'name='+this.innerHTML);
});
// 封裝的ajax方法
function ajax(method, url, val) { // 方法，路徑，傳送數據
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
content.innerHTML = xhr.responseText;
} else {
alert('Request was unsuccessful: ' + xhr.status);
}
}
};
xhr.open(method, url, true);
if(val)
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(val);
}這個簡單的交互就是這樣的，其實我們在第一次學習后端語言的時候第一件事就是寫一個前后端交互程序，這樣會幫助我們更好的理解前后端的分工。
run方法：
先將server.js運行起來，然后打開html來請求響應。
關于Node中怎么實現前后端交互問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
