Node中怎么实现前后端交互

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中怎么实现前后端交互问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。

当前标题：Node中怎么实现前后端交互
浏览路径：https://www.cdcxhl.com/article22/pppjjc.html

成都网站建设公司_创新互联，为您提供网站导航、全网营销推广、网页设计公司、电子商务、微信公众号、App开发

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容