노드는 간단한 프런트엔드 및 백엔드 상호 작용을 구현합니다.
노드는 프론트엔드에서 꼭 배워야 할 기술입니다. 노드가 백엔드로 js를 사용한다는 것은 우리 모두 알고 있는 사실입니다. 노드를 배우기 전에 노드가 프론트엔드와 백엔드 상호작용을 어떻게 구현하는지 이해해야 합니다. 이 기사에서는 Node의 간단한 프런트엔드 및 백엔드 상호 작용(예제 설명)을 제공합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리도록 하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.
여기에는 네이티브 Ajax와 Node 간의 간단한 상호 작용이 있습니다. 방금 Node를 배운 친구들은 한 번 살펴볼 수 있습니다. 한편으로는 서버와 클라이언트가 상호 작용하는 방식을 이해하고 다른 한편으로는 노드 개발에 더 익숙합니다.
먼저 코드 게시: (관심이 있으시면 로컬로 복사하여 직접 실행할 수 있습니다.)
메인 페이지의 HTML
index.html:
<!doctype> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button id="btn1">food</button> <button id="btn2">other</button> <h1 id="content"></h1> <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)을 구문 분석하는 데 사용됩니다. // 클라이언트의 데이터를 모니터링하고 데이터가 전송되면 콜백을 실행합니다. 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 < 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);
}이 간단한 상호 작용은 실제로 백엔드 언어를 처음 배울 때 가장 먼저 하는 일은 프런트-엔드를 작성하는 것입니다. 엔드 및 백엔드 대화형 프로그램은 프런트엔드와 백엔드 간의 작업 분할을 더 잘 이해하는 데 도움이 됩니다.
실행 방법:
먼저 server.js를 실행한 다음 html을 열어 응답을 요청합니다.
관련 권장사항:
프론트엔드와 백엔드 상호작용을 달성하기 위한 Node.js+Koa 프레임워크
위 내용은 노드는 간단한 프런트엔드 및 백엔드 상호 작용을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7530
15
1378
52
82
11
54
19
21
76
Node의 메모리 제어에 관한 기사
Apr 26, 2023 pm 05:37 PM
Non-Blocking, Event-Driven 기반으로 구축된 Node 서비스는 메모리 소모가 적다는 장점이 있으며, 대규모 네트워크 요청을 처리하는데 매우 적합합니다. 대규모 요청을 전제로 '메모리 제어'와 관련된 문제를 고려해야 합니다. 1. V8의 가비지 수집 메커니즘과 메모리 제한 Js는 가비지 수집 기계에 의해 제어됩니다.
Node V8 엔진의 메모리와 GC에 대한 자세한 그래픽 설명
Mar 29, 2023 pm 06:02 PM
이 기사는 NodeJS V8 엔진의 메모리 및 가비지 수집기(GC)에 대한 심층적인 이해를 제공할 것입니다. 도움이 되기를 바랍니다.
Express를 사용하여 노드 프로젝트에서 파일 업로드를 처리하는 방법
Mar 28, 2023 pm 07:28 PM
파일 업로드를 처리하는 방법은 무엇입니까? 다음 글에서는 Express를 사용하여 노드 프로젝트에서 파일 업로드를 처리하는 방법을 소개하겠습니다. 도움이 되길 바랍니다.
win11에서 분할 화면 상호 작용 켜기
Dec 25, 2023 pm 03:05 PM
win11 시스템에서는 분할 화면 상호 작용을 켜서 여러 모니터가 동일한 시스템을 사용하고 함께 작동할 수 있습니다. 그러나 많은 친구들은 실제로 분할 화면 상호 작용을 켜는 방법을 모릅니다. 다음은 일어나서 공부하는 것입니다. win11에서 분할 화면 상호 작용을 여는 방법 1. 시작 메뉴를 클릭하고 "설정"을 찾습니다. 2. 그런 다음 거기에서 "시스템" 설정을 찾습니다. 3. 시스템 설정에 들어간 후 왼쪽의 "디스플레이"를 선택하세요. 4. 그런 다음 오른쪽의 다중 디스플레이에서 "이 디스플레이 확장"을 선택하세요.
Node의 프로세스 관리 도구 'pm2”에 대한 심층 분석
Apr 03, 2023 pm 06:02 PM
이 기사에서는 Node의 프로세스 관리 도구인 "pm2"를 공유하고 pm2가 필요한 이유, pm2 설치 및 사용 방법에 대해 설명합니다. 모두에게 도움이 되기를 바랍니다!
인터페이스 디자인 문서를 공유할 때 주의할 점 12가지
Apr 24, 2023 am 10:58 AM
최근 인터페이스 문서를 검토하던 중 친구가 정의한 매개변수가 열거형 값인데, 인터페이스 문서에서 해당 특정 열거값을 제공하지 않는 것을 발견했습니다. 사실 인터페이스 문서를 어떻게 잘 작성하느냐가 정말 중요합니다. 오늘 Tianluo 형제는 인터페이스 디자인 문서에서 주의해야 할 12가지 사항을 알려드립니다~
golang의 제네릭에 대한 심층적인 이해(Generic)
Apr 11, 2023 pm 07:20 PM
이 글이 여러분에게 golang의 제네릭에 대한 심층적인 이해를 가져다 줄 것입니다. 제네릭을 사용하는 방법? 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
PI 노드 교육 : PI 노드 란 무엇입니까? Pi 노드를 설치하고 설정하는 방법은 무엇입니까?
Mar 05, 2025 pm 05:57 PM
Pinetwork 노드에 대한 자세한 설명 및 설치 안내서이 기사에서는 Pinetwork Ecosystem을 자세히 소개합니다. Pi 노드, Pinetwork 생태계의 주요 역할을 수행하고 설치 및 구성을위한 전체 단계를 제공합니다. Pinetwork 블록 체인 테스트 네트워크가 출시 된 후, PI 노드는 다가오는 주요 네트워크 릴리스를 준비하여 테스트에 적극적으로 참여하는 많은 개척자들의 중요한 부분이되었습니다. 아직 Pinetwork를 모른다면 Picoin이 무엇인지 참조하십시오. 리스팅 가격은 얼마입니까? PI 사용, 광업 및 보안 분석. Pinetwork 란 무엇입니까? Pinetwork 프로젝트는 2019 년에 시작되었으며 독점적 인 Cryptocurrency Pi Coin을 소유하고 있습니다. 이 프로젝트는 모든 사람이 참여할 수있는 사람을 만드는 것을 목표로합니다.
