Node中怎么實(shí)現(xiàn)前后端交互

發(fā)布時(shí)間：2021-07-21 10:55:40 來源：億速云閱讀：136 作者：Leah 欄目：web開發(fā)

Node中怎么實(shí)現(xiàn)前后端交互，針對這個(gè)問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。

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>

接下來是服務(wù)器端的代碼，運(yùn)行方式是在node環(huán)境下輸入命令：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數(shù)據(jù)
 });
 req.on('end', function() { 
  res.writeHead(200, { // 響應(yīng)狀態(tài)
   "Content-Type": "text/plain", // 響應(yīng)數(shù)據(jù)類型
   'Access-Control-Allow-Origin': '*' // 允許任何一個(gè)域名訪問
  });
  if(qs.parse(body).name == 'food') {
   res.write('apple');
  } else {
   res.write('other');
  } 
  res.end();
 }); 
});

server.listen(3000);

引入的qs模塊用于解析JSON

req.on('data', callback); // 監(jiān)聽客戶端的數(shù)據(jù)，一旦有數(shù)據(jù)發(fā)送過來就執(zhí)行回調(diào)函數(shù)

req.on('end', callback); // 數(shù)據(jù)接收完畢

res // 響應(yīng)

客戶端的js（功能就是負(fù)責(zé)一些DOM操作以及發(fā)送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) { // 方法，路徑，傳送數(shù)據(jù)
 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);
}

這個(gè)簡單的交互就是這樣的，其實(shí)我們在第一次學(xué)習(xí)后端語言的時(shí)候第一件事就是寫一個(gè)前后端交互程序，這樣會幫助我們更好的理解前后端的分工。

run方法：

先將server.js運(yùn)行起來，然后打開html來請求響應(yīng)。

關(guān)于Node中怎么實(shí)現(xiàn)前后端交互問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。

向AI問一下細(xì)節(jié)

Node中怎么實(shí)現(xiàn)前后端交互

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽