Node之简单的前后端交互(实例讲解)

前端之家收集整理的这篇文章主要介绍了Node之简单的前后端交互(实例讲解)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

node是前端必学的一门技能,我们都知道node是用的js做后端,在学习node之前我们有必要明白node是如何实现前后端交互的。

这里写了一个简单的通过原生ajax与node实现的一个交互,刚刚学node的朋友可以看一看。一方面理解服务端与客户端是如何交互的,一方面更熟悉node开发。

先贴代码:(有兴趣的可以copy到本地自己run一下)

502_7@主页面的html

@H_502_7@index.html:

<Meta charset="utf-8"> @H_<a href="https://www.jb51.cc/tag/502/" target="_blank" class="keywords">502</a>_18@ </head> <body> <button id="btn1">food</button> <button id="btn2">other</button> <h1 id="content"></h1> <p><script type="text/javascript" src="./client.js"></script></p> </body> </html></pre> </div> <p>接下来是服务器端的<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>,运行方式是在node环境下输入命令:node server.js</p> <p>@H_<a href="https://www.jb51.cc/tag/502/" target="_blank" class="keywords">502</a>_7@server.js:</h3></p> <div class="jb51code"> <pre class="brush:xhtml;"> let http = require('http'); let qs = require('querystring'); <p>let server = http.createServer(function(req,res) {<br /> let body = ''; // 一定要初始化为"" 不然是undefined<br /> req.on('data',function(data) {<br /> body += data; // 所接受的Json数据<br /> });<br /> req.on('end',function() {<br /> res.writeHead(200,{ // 响应状态<br /> "Content-Type": "text/plain",// 响应数据类型<br /> 'Access-Control-Allow-Origin': '*' // 允许任何一个域名访问<br /> });<br /> if(qs.parse(body).name == 'food') {<br /> res.write('apple');<br /> } else {<br /> res.write('other');<br /> }<br /> res.end();<br /> });<br /> });</p> <p>server.listen(3000);</pre></p> </div> <p>@H_<a href="https://www.jb51.cc/tag/502/" target="_blank" class="keywords">502</a>_7@引入的qs模块用于解析JSON</h3></p> <p>req.on('data',callback); // 监听客户端的数据,一旦有数据发送过来就执行回调<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a></p> <p>req.on('end',callback); // 数据接收完毕</p> <p>res // 响应</p> <p>客户端的js(<a href="https://www.jb51.cc/tag/gongneng/" target="_blank" class="keywords">功能</a>就是负责一些DOM操作以及发送ajax请求)</p> <p>@H_<a href="https://www.jb51.cc/tag/502/" target="_blank" class="keywords">502</a>_7@client.js:</h3></p> <div class="jb51code"> <pre class="brush:xhtml;"> let btn1 = document.getElementById('btn1'); let btn2 = document.getElementById('btn2'); let content = document.getElementById('content'); <p>btn1.addEventListener('click',function() {<br /> ajax('POST',"<a href="http://127.0.0.1:3000/",'name='+this.innerHTML">http://127.0.0.1:3000/",'name='+this.innerHTML</a>);<br /> });</p> <p>btn2.addEventListener('click','name='+this.innerHTML);<br /> });</p> <p>// 封装的ajax方法<br /> function ajax(method,url,val) { // 方法,路径,传送数据<br /> let xhr = new XMLHttpRequest();<br /> xhr.onreadystatechange = function() {<br /> if(xhr.readyState == 4) {<br /> if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {<br /> content.innerHTML = xhr.responseText;<br /> } else {<br /> alert('Request was unsuccessful: ' + xhr.status);<br /> }<br /> }<br /> };</p> <p>xhr.open(method,true);<br /> if(val)<br /> xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');<br /> xhr.send(val);<br /> }</pre></p> </div> <p>这个简单的交互就是这样的,其实我们在第一次学习后端语言的时候第一件事就是写一个前后端交互程序,这样会帮助我们更好的理解前后端的分工。</p> <p>@H_<a href="https://www.jb51.cc/tag/502/" target="_blank" class="keywords">502</a>_7@run<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>:</h3></p> <p>先将server.js运行起来,然后打开html来请求响应。</p> <p>以上这篇Node之简单的前后端交互(实例讲解)就是小编<a href="https://www.jb51.cc/tag/fenxiang/" target="_blank" class="keywords">分享</a>给大家的全部<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>了,希望能给大家一个参考,也希望大家多多<a href="https://www.jb51.cc/tag/zhichi/" target="_blank" class="keywords">支持</a>编程之家。</p><i class="glyphicon glyphicon-link"></i> 原文链接:https://www.f2er.com/nodejs/35227.html</div> <div class="topcard-tags"><a href="https://www.f2er.com/tag/Node/" class="tag_link" target="_blank">Node</a><a href="https://www.f2er.com/tag/qianhouduanjiaohu/" class="tag_link" target="_blank">前后端交互</a></div> <ul class="list-group"> <li class="list-group-item"><a href="https://www.f2er.com/nodejs/35271.html" title="node.js基于fs模块对系统文件及目录进行读写操作的方法详解">上一篇:node.js基于fs模块对系统文件及目录</a><a href="https://www.f2er.com/nodejs/35206.html" title="详解IWinter 一个路由转控制器的 Nodejs 库" class="text-muted pull-right">下一篇:详解IWinter 一个路由转控制器的 N</a> </li> </ul> </div> </div> </div> <!-- row end --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-4605373693034661" data-ad-slot="9144498553"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> </div> </div> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <div class="title"><h1>猜你在找的Node.js相关文章</h1></div> <div class="list_con"> <a href="https://www.f2er.com/nodejs/996887.html" title="[javascript] typescript的安装"><img class="lazy" src="https://www.f2er.com/images/np.jpg" data-original="https://www.f2er.com/res/2021/02-05/09/16073fc79a4b8b0c6d0c7faf40937605.png" title="" width="160" height="90" style="float:right;margin-left:30px;display:none;" /><div class="title">[javascript] typescript的安装</div> <div class="summary">现在的js代码都是这种高级点的方式语法 , 就是ts语法 ,要使用ts语法那就要先安装一下 先...</div> <time class="summary">作者:前端之家 时间:2021-02-05</time> </a> </div> <div class="list_con"> <a href="https://www.f2er.com/nodejs/994535.html" title="node版本管理工具nvm"><div class="title">node版本管理工具nvm</div> <div class="summary">nvm是node版本管理工具 为了解决node各种版本存在不兼容现象 nvm是让你在同一台机器上安装...</div> <time class="summary">作者:前端之家 时间:2020-12-29</time> </a> </div> <div class="list_con"> <a href="https://www.f2er.com/nodejs/994534.html" title="node起一个简单服务,打开本地项目或文件浏览"><div class="title">node起一个简单服务,打开本地项目或文件浏览</div> <div class="summary">1、安装nodejs 2、在项目文件夹目录下创建一个js文件,命名server.js(自定义名称),内容如下...</div> <time class="summary">作者:前端之家 时间:2020-12-29</time> </a> </div> <div class="list_con"> <a href="https://www.f2er.com/nodejs/994533.html" title="path的join和resolve的使用区别"><div class="title">path的join和resolve的使用区别</div> <div class="summary">1.连接路径:path.join([path1][, path2][, ...]) path.join()方法可以连接任意多个路径字...</div> <time class="summary">作者:前端之家 时间:2020-12-29</time> </a> </div> <div class="list_con"> <a href="https://www.f2er.com/nodejs/993747.html" title="nodejs与javascript中的aes加密"><div class="title">nodejs与javascript中的aes加密</div> <div class="summary">简介 1.aes加密简单来说,在密码学中又称Rijndael加密法,是美国联邦政府采用的一种区块加...</div> <time class="summary">作者:前端之家 时间:2020-12-23</time> </a> </div> <div style="border-bottom: 1px solid #f4f4f4;margin-top:20px;"> <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-fr-2o+fp-dx-wx" data-ad-client="ca-pub-4605373693034661" data-ad-slot="4561116489"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div><div class="list_con"> <a href="https://www.f2er.com/nodejs/993745.html" title="带你玩转七牛云存储——高级篇"><img class="lazy" src="https://www.f2er.com/images/np.jpg" data-original="https://www.f2er.com/res/2020/12-23/09/bdbc4a4e00d93937025dde01732944cd.png" title="" width="160" height="90" style="float:right;margin-left:30px;display:none;" /><div class="title">带你玩转七牛云存储——高级篇</div> <div class="summary">七牛云图片存储优点 1. 支持各种尺寸的图片缩放; 2. 支持图片自动压缩; 3. 支持水印添加...</div> <time class="summary">作者:前端之家 时间:2020-12-23</time> </a> </div> <div class="list_con"> <a href="https://www.f2er.com/nodejs/993744.html" title="VueJs生产环境部署"><img class="lazy" src="https://www.f2er.com/images/np.jpg" data-original="https://www.f2er.com/res/2020/12-23/09/7367c086e013616683aeae4b7db032e9.png" title="" width="160" height="90" style="float:right;margin-left:30px;display:none;" /><div class="title">VueJs生产环境部署</div> <div class="summary">VueJs为客户端语言,所以部署的时候是不需要基于nodejs或其他服务器运行环境,只需要像其他...</div> <time class="summary">作者:前端之家 时间:2020-12-23</time> </a> </div> <div class="list_con"> <a href="https://www.f2er.com/nodejs/993743.html" title="vuejs深入浅出—基础篇"><div class="title">vuejs深入浅出—基础篇</div> <div class="summary">一、从HelloWorld说起 任何语言的都是从Hello World开始的,VueJs也不例外,直接上代码: ...</div> <time class="summary">作者:前端之家 时间:2020-12-23</time> </a> </div> <div class="list_con"> <a href="https://www.f2er.com/nodejs/993742.html" title="你必须知道的session与cookie"><div class="title">你必须知道的session与cookie</div> <div class="summary">Session本质 提到Session我们能联想到的就是用户登录功能,而本身我们使用Session的基础是...</div> <time class="summary">作者:前端之家 时间:2020-12-23</time> </a> </div> <div class="list_con"> <a href="https://www.f2er.com/nodejs/993741.html" title="es6新特性分享"><div class="title">es6新特性分享</div> <div class="summary">1、字符串查找es5使用是indexOf() 返回字符第一次出现的位置int值es6新增了3个方法:inclu...</div> <time class="summary">作者:前端之家 时间:2020-12-23</time> </a> </div> <div style="border-bottom: 1px solid #f4f4f4;margin-top:20px;"> <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-fr-2o+fp-dx-wx" data-ad-client="ca-pub-4605373693034661" data-ad-slot="4561116489"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></div> </div> </div> </div> <!-- left end--> <!-- right --> <div class="col-sm-12 col-md-12 col-lg-3"> <!-- row --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">编程分类</label> <div class="cate mt-20"><a href="https://www.f2er.com/html/" title="HTML">HTML</a><a href="https://www.f2er.com/html5/" title="HTML5">HTML5</a><a href="https://www.f2er.com/js/" title="JavaScript">JavaScript</a><a href="https://www.f2er.com/css/" title="CSS">CSS</a><a href="https://www.f2er.com/jquery/" title="jQuery">jQuery</a><a href="https://www.f2er.com/bootstrap/" title="Bootstrap">Bootstrap</a><a href="https://www.f2er.com/angularjs/" title="Angularjs">Angularjs</a><a href="https://www.f2er.com/typescript/" title="TypeScript">TypeScript</a><a href="https://www.f2er.com/vue/" title="Vue">Vue</a><a href="https://www.f2er.com/dojo/" title="Dojo">Dojo</a><a href="https://www.f2er.com/json/" title="Json">Json</a><a href="https://www.f2er.com/electron/" title="Electron">Electron</a><a href="https://www.f2er.com/nodejs/" title="Node.js">Node.js</a><a href="https://www.f2er.com/extjs/" title="extjs">extjs</a><a href="https://www.f2er.com/express/" title="Express ">Express </a><a href="https://www.f2er.com/xml/" title="XML">XML</a><a href="https://www.f2er.com/es6/" title="ES6">ES6</a><a href="https://www.f2er.com/ajax/" title="Ajax">Ajax</a><a href="https://www.f2er.com/flash/" title="Flash">Flash</a><a href="https://www.f2er.com/unity/" title="Unity">Unity</a><a href="https://www.f2er.com/react/" title="React">React</a><a href="https://www.f2er.com/flex/" title="Flex">Flex</a><a href="https://www.f2er.com/antdesign/" title="Ant Design">Ant Design</a><a href="https://www.f2er.com/webfrontend/" title="Web前端">Web前端</a><a href="https://www.f2er.com/weapp/" title="微信小程序">微信小程序</a><a href="https://www.f2er.com/wxmp/" title="微信公众号">微信公众号</a><div class="clearfix"></div> </div> </div> </div> </div> <!-- row end --> <!-- row --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <!-- f2er-rightads --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4605373693034661" data-ad-slot="7756441254" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <!-- row end --> <!-- row --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">最新文章</label> <ul class="n-list"><li><a href="https://www.f2er.com/nodejs/996887.html" title="[javascript] typescript的安装" target="_blank">• [javascript] typescript的</a></li> <li><a href="https://www.f2er.com/nodejs/994535.html" title="node版本管理工具nvm" target="_blank">• node版本管理工具nvm</a></li> <li><a href="https://www.f2er.com/nodejs/994534.html" title="node起一个简单服务,打开本地项目或文件浏览" target="_blank">• node起一个简单服务,打开</a></li> <li><a href="https://www.f2er.com/nodejs/994533.html" title="path的join和resolve的使用区别" target="_blank">• path的join和resolve的使用</a></li> <li><a href="https://www.f2er.com/nodejs/993747.html" title="nodejs与javascript中的aes加密" target="_blank">• nodejs与javascript中的ae</a></li> <li><a href="https://www.f2er.com/nodejs/993746.html" title="JavaScript中Object.keys、Object.getOwnPropertyNames区别" target="_blank">• JavaScript中Object.keys、</a></li> <li><a href="https://www.f2er.com/nodejs/993745.html" title="带你玩转七牛云存储——高级篇" target="_blank">• 带你玩转七牛云存储——高</a></li> <li><a href="https://www.f2er.com/nodejs/993744.html" title="VueJs生产环境部署" target="_blank">• VueJs生产环境部署</a></li> <li><a href="https://www.f2er.com/nodejs/993743.html" title="vuejs深入浅出—基础篇" target="_blank">• vuejs深入浅出—基础篇</a></li> <li><a href="https://www.f2er.com/nodejs/993742.html" title="你必须知道的session与cookie" target="_blank">• 你必须知道的session与coo</a></li> </ul> </div> </div> </div> <!-- row end --> <!-- row --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">热门标签 <span class="pull-right tx-12"> <a href="https://www.f2er.com/all" target="_blank">更多 ►</a></span> </label> <div class="topcard-tags"><a href="https://www.f2er.com/tag/guanbiyangao/" title="关闭广告" target="_blank">关闭广告</a><a href="https://www.f2er.com/tag/danduheaders/" title="单独headers" target="_blank">单独headers</a><a href="https://www.f2er.com/tag/fengzhuangdaima/" title="封装代码" target="_blank">封装代码</a><a href="https://www.f2er.com/tag/tishicuowu/" title="提示错误" target="_blank">提示错误</a><a href="https://www.f2er.com/tag/zhengshuzhengze/" title="整数正则" target="_blank">整数正则</a><a href="https://www.f2er.com/tag/fei0kaitou/" title="非0开头" target="_blank">非0开头</a><a href="https://www.f2er.com/tag/tiaoye/" title="跳页" target="_blank">跳页</a><a href="https://www.f2er.com/tag/chuyema/" title="出页码" target="_blank">出页码</a><a href="https://www.f2er.com/tag/antdtable/" title="antd table" target="_blank">antd table</a><a href="https://www.f2er.com/tag/tishiURLweizhuce/" title="提示URL未注册" target="_blank">提示URL未注册</a><a href="https://www.f2er.com/tag/gongzhonghaozhifu/" title="公众号支付" target="_blank">公众号支付</a><a href="https://www.f2er.com/tag/vuehashmoshi/" title="vue hash模式" target="_blank">vue hash模式</a><a href="https://www.f2er.com/tag/iSlider/" title="iSlider" target="_blank">iSlider</a><a href="https://www.f2er.com/tag/chepaijianpan/" title="车牌键盘" target="_blank">车牌键盘</a><a href="https://www.f2er.com/tag/xunhuantupian/" title="循环图片" target="_blank">循环图片</a><a href="https://www.f2er.com/tag/echartsshuangzhexian/" title="echarts 双折线" target="_blank">echarts 双折</a><a href="https://www.f2er.com/tag/zuoyoubuju/" title="左右布局" target="_blank">左右布局</a><a href="https://www.f2er.com/tag/DllPlugin/" title="DllPlugin" target="_blank">DllPlugin</a><a href="https://www.f2er.com/tag/duixiangchuangjian/" title="对象创建" target="_blank">对象创建</a><a href="https://www.f2er.com/tag/daziyouxi/" title="打字游戏" target="_blank">打字游戏</a><a href="https://www.f2er.com/tag/quanxuan/" title="圈选" target="_blank">圈选</a><a href="https://www.f2er.com/tag/lianglan/" title="两栏" target="_blank">两栏</a><a href="https://www.f2er.com/tag/yunhanshu/" title="云函数" target="_blank">云函数</a><a href="https://www.f2er.com/tag/mengban/" title="蒙版" target="_blank">蒙版</a><a href="https://www.f2er.com/tag/ES2020/" title="ES2020" target="_blank">ES2020</a><a href="https://www.f2er.com/tag/chuchuang/" title="橱窗" target="_blank">橱窗</a><a href="https://www.f2er.com/tag/wufenggundonglunbo/" title="无缝滚动轮播" target="_blank">无缝滚动轮播</a><a href="https://www.f2er.com/tag/sekuaipengzhuang/" title="色块碰撞" target="_blank">色块碰撞</a><a href="https://www.f2er.com/tag/zujianxiaohui/" title="组件销毁" target="_blank">组件销毁</a><a href="https://www.f2er.com/tag/wendangcaozuo/" title="文档操作" target="_blank">文档操作</a></div> </div> </div> </div> <!-- row end --> <!-- row --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <!-- f2er-rightads --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4605373693034661" data-ad-slot="7756441254" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <!-- row end --> </div> <!-- right end --> </div> </div> <footer id="footer"> <div class="container"> <div class="row hidden-xs"> <dl class="col-sm-6 site-link"> <dt>最近更新</dt><dd><a href="https://www.f2er.com/win11/1005878.html" title="【联想一体机系统重装指南】" target="_blank">· 【联想一体机系统重装指南】</a><span class="text-muted pull-right">10-03</span></dd> <dd><a href="https://www.f2er.com/win11/1005877.html" title="笔记本系统重装教程:轻松解决系统问题" target="_blank">· 笔记本系统重装教程:轻松解决系统问题</a><span class="text-muted pull-right">10-03</span></dd> <dd><a href="https://www.f2er.com/win11/1005876.html" title="重装系统:U盘启动,轻松搞定!" target="_blank">· 重装系统:U盘启动,轻松搞定!</a><span class="text-muted pull-right">10-03</span></dd> <dd><a href="https://www.f2er.com/win11/1005875.html" title="大白菜u盘重装系统,让你的电脑焕然一新!" target="_blank">· 大白菜u盘重装系统,让你的电脑焕然一新!</a><span class="text-muted pull-right">10-03</span></dd> <dd><a href="https://www.f2er.com/win11/1005874.html" title="U盘重装系统:轻松启动,快速恢复" target="_blank">· U盘重装系统:轻松启动,快速恢复</a><span class="text-muted pull-right">10-03</span></dd> <dd><a href="https://www.f2er.com/win11/1005873.html" title="重装电脑系统的步骤及注意事项" target="_blank">· 重装电脑系统的步骤及注意事项</a><span class="text-muted pull-right">10-03</span></dd> <dd><a href="https://www.f2er.com/win11/1005872.html" title="深度重装系统,一键解决电脑问题" target="_blank">· 深度重装系统,一键解决电脑问题</a><span class="text-muted pull-right">10-03</span></dd> <dd><a href="https://www.f2er.com/win11/1005871.html" title="重装系统的正确操作步骤,让你的电脑焕然一新" target="_blank">· 重装系统的正确操作步骤,让你的电脑焕然一新</a><span class="text-muted pull-right">10-03</span></dd> <dd><a href="https://www.f2er.com/win11/1005870.html" title="安全模式重装系统:保障您设备安全的最佳选择" target="_blank">· 安全模式重装系统:保障您设备安全的最佳选择</a><span class="text-muted pull-right">10-03</span></dd> <dd><a href="https://www.f2er.com/win11/1005869.html" title="戴尔重装系统步骤大全" target="_blank">· 戴尔重装系统步骤大全</a><span class="text-muted pull-right">10-03</span></dd> </dl> <dl class="col-sm-4 site-link"> <dt>好站推荐</dt><dd> <a href="https://www.runoob.com" title="菜鸟教程(www.runoob.com)提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例,通过实例,您可以更好的学习编程。" target="_blank">菜鸟教程</a></dd><dd> <a href="https://www.jb51.cc" title="编程之家(www.jb51.cc)是成立于2017年面向全球中文开发者的技术内容分享平台。提供编程导航、编程问答、编程博文、编程百科、编程教程、编程工具、编程实例等开发者最需要的编程技术内容与开发工具支持,与你一起学习编程,相信编程改变未来!" target="_blank">编程之家</a></dd><dd> <a href="https://www.f2er.com" title="前端之家 f2er.com 前端开发人员所需学习知识手册。" target="_blank">前端之家</a></dd></dl> <dl class="col-sm-2 site-link"> <dt>商务合作</dt> <dd><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=76874919&site=qq&menu=yes">联系我们</a></dd> </dl> </div> <div class="copyright"> Copyright © 2019 前端之家. 当前版本 V7.0.16<br> <span class="ml5">前端之家 版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">闽ICP备13020303号-10</a></span> </div> </div> </footer> <script type="text/javascript" src="https://www.f2er.com/js/base.js"></script> </body> </html>