찾다
웹 프론트엔드JS 튜토리얼노드는 간단한 프런트엔드 및 백엔드 상호 작용을 구현합니다.

노드는 프론트엔드에서 꼭 배워야 할 기술입니다. 노드가 백엔드로 js를 사용한다는 것은 우리 모두 알고 있는 사실입니다. 노드를 배우기 전에 노드가 프론트엔드와 백엔드 상호작용을 어떻게 구현하는지 이해해야 합니다. 이 기사에서는 Node의 간단한 프런트엔드 및 백엔드 상호 작용(예제 설명)을 제공합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리도록 하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

여기에는 네이티브 Ajax와 Node 간의 간단한 상호 작용이 있습니다. 방금 Node를 배운 친구들은 한 번 살펴볼 수 있습니다. 한편으로는 서버와 클라이언트가 상호 작용하는 방식을 이해하고 다른 한편으로는 노드 개발에 더 익숙합니다.

먼저 코드 게시: (관심이 있으시면 로컬로 복사하여 직접 실행할 수 있습니다.)

메인 페이지의 HTML

index.html:


 
  <meta>
  <title></title>
 
 
  <button>food</button>
  <button>other</button>
  <h1></h1>

  <script></script>
 

다음 단계는 서버 측 코드입니다. 실행 방법은 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)을 구문 분석하는 데 사용됩니다. // 클라이언트의 데이터를 모니터링하고 데이터가 전송되면 콜백을 실행합니다. Function

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  <p>이 간단한 상호 작용은 실제로 백엔드 언어를 처음 배울 때 가장 먼저 하는 일은 프런트-엔드를 작성하는 것입니다. 엔드 및 백엔드 대화형 프로그램은 프런트엔드와 백엔드 간의 작업 분할을 더 잘 이해하는 데 도움이 됩니다. </p><p>실행 방법: </p><p>먼저 server.js를 실행한 다음 html을 열어 응답을 요청합니다. </p><p>관련 권장사항: </p><p><a href="http://www.php.cn/js-tutorial-366080.html" target="_self">프런트엔드와 백엔드 상호작용에 대한 관련 콘텐츠 요약</a></p><p><a href="http://www.php.cn/js-tutorial-354077.html" target="_self">프론트엔드와 백엔드 상호작용을 달성하기 위한 Node.js+Koa 프레임워크</a></p><p><a href="http://www.php.cn/php-weizijiaocheng-326402.html" target="_self">PHP 프런트엔드 및 백엔드 -상호작용 종료</a></p>

위 내용은 노드는 간단한 프런트엔드 및 백엔드 상호 작용을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
node、nvm与npm有什么区别node、nvm与npm有什么区别Jul 04, 2022 pm 04:24 PM

node、nvm与npm的区别:1、nodejs是项目开发时所需要的代码库,nvm是nodejs版本管理工具,npm是nodejs包管理工具;2、nodejs能够使得javascript能够脱离浏览器运行,nvm能够管理nodejs和npm的版本,npm能够管理nodejs的第三方插件。

Vercel是什么?怎么部署Node服务?Vercel是什么?怎么部署Node服务?May 07, 2022 pm 09:34 PM

Vercel是什么?本篇文章带大家了解一下Vercel,并介绍一下在Vercel中部署 Node 服务的方法,希望对大家有所帮助!

node爬取数据实例:聊聊怎么抓取小说章节node爬取数据实例:聊聊怎么抓取小说章节May 02, 2022 am 10:00 AM

node怎么爬取数据?下面本篇文章给大家分享一个node爬虫实例,聊聊利用node抓取小说章节的方法,希望对大家有所帮助!

node导出模块有哪两种方式node导出模块有哪两种方式Apr 22, 2022 pm 02:57 PM

node导出模块的两种方式:1、利用exports,该方法可以通过添加属性的方式导出,并且可以导出多个成员;2、利用“module.exports”,该方法可以直接通过为“module.exports”赋值的方式导出模块,只能导出单个成员。

安装node时会自动安装npm吗安装node时会自动安装npm吗Apr 27, 2022 pm 03:51 PM

安装node时会自动安装npm;npm是nodejs平台默认的包管理工具,新版本的nodejs已经集成了npm,所以npm会随同nodejs一起安装,安装完成后可以利用“npm -v”命令查看是否安装成功。

聊聊V8的内存管理与垃圾回收算法聊聊V8的内存管理与垃圾回收算法Apr 27, 2022 pm 08:44 PM

本篇文章带大家了解一下V8引擎的内存管理与垃圾回收算法,希望对大家有所帮助!

node中是否包含dom和bomnode中是否包含dom和bomJul 06, 2022 am 10:19 AM

node中没有包含dom和bom;bom是指浏览器对象模型,bom是指文档对象模型,而node中采用ecmascript进行编码,并且没有浏览器也没有文档,是JavaScript运行在后端的环境平台,因此node中没有包含dom和bom。

聊聊Node.js path模块中的常用工具函数聊聊Node.js path模块中的常用工具函数Jun 08, 2022 pm 05:37 PM

本篇文章带大家聊聊Node.js中的path模块,介绍一下path的常见使用场景、执行机制,以及常用工具函数,希望对大家有所帮助!

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

맨티스BT

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구