ajax가 nodejs 요청을 보냅니다.-프런트엔드 Q&A-php.cn

ajax가 nodejs 요청을 보냅니다.

PHPz

풀어 주다： 2023-05-08 10:05:37

원래의

570명이 탐색했습니다.

참고: 이 기사에서는 Ajax를 사용하여 프런트엔드 관점에서 nodejs 요청을 보내는 방법을 소개합니다. nodejs에 익숙하지 않은 경우 먼저 알아볼 수 있습니다.

웹 개발의 지속적인 발전으로 프런트엔드와 백엔드 간의 데이터 상호작용은 많은 웹사이트나 애플리케이션의 중요한 기능 중 하나가 되었습니다. 프런트 엔드 기술의 중요한 부분인 Ajax는 페이지를 새로 고치지 않고도 비동기 요청과 데이터 상호 작용을 실현할 수 있습니다. 백엔드 기술의 인기 있는 선택인 Node.js는 HTTP 요청 및 응답을 처리하기 위한 편리한 API도 제공합니다.

그렇다면 Ajax를 사용하여 Node.js 요청을 보내는 방법은 무엇일까요? 다음은 다음과 같은 측면에서 소개됩니다.

Node.js 서비스 설치 및 시작

먼저 Node.js를 설치하고 Node.js 서비스를 생성해야 합니다. 여기서는 Node.js 설치 과정을 소개하지 않고, 설치가 완료된 것으로 가정합니다.

그런 다음 명령줄에서 프로젝트가 있는 폴더를 입력하고 다음 명령을 실행합니다.

$ npm init -y
$ npm install express --save

로그인 후 복사

위 명령은 Node.js 프로젝트를 초기화하고 Express 프레임워크를 설치합니다. 다음으로, app.js라는 파일을 생성하고 그 안에 다음 코드를 추가합니다.

const express = require('express');
const app = express();

app.get('/api', (req, res) => {
  res.json({"message":"Hello World!"});
});

app.listen(3000, () => {
  console.log('Listening on port 3000');
});

로그인 후 복사

위 코드는 "Hello World!" 정보가 포함된 JSON 개체를 반환하는 /api라는 경로를 생성합니다. Node.js 서비스는 시작된 후 포트 3000을 수신합니다.

다음 명령을 실행하여 Node.js 서비스를 시작하세요.

$ node app.js

로그인 후 복사

브라우저에서 http://localhost:3000/api를 방문하면 다음 내용이 표시됩니다.

{"message":"Hello World!"}

로그인 후 복사

이는 Node.js 서비스가 성공적으로 설정되었으며 HTTP 요청을 처리할 수 있습니다.

Ajax를 사용하여 HTTP 요청 보내기

다음으로 프런트 엔드 페이지에서 Ajax를 사용하여 Node.js 서비스에 요청을 보냅니다. 여기에서 jQuery를 예로 들면, 먼저 HTML 파일에 jQuery 라이브러리를 도입해야 합니다. CDN을 사용하여 도입하거나 jQuery 파일을 로컬로 직접 다운로드할 수 있습니다.

html 파일에 다음 코드를 추가하세요.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/jquery"></script>
  <meta charset="utf-8">
  <title>Ajax Demo</title>
</head>
<body>
  <button id="btn">发送请求</button>
  <script>
    $(document).ready(function(){
      $('#btn').click(function(){
        $.ajax({
          url: '/api',
          type: 'GET',
          dataType: 'json',
          success: function(data){
            console.log(data);
          },
          error: function(xhr, status, error){
            console.log(error);
          }
        });
      });
    });
  </script>
</body>
</html>

로그인 후 복사

위 코드는 클릭 시 jQuery의 $.ajax() 함수를 사용하여 Node.js 서비스의 /api 경로에 GET 요청을 보내는 버튼을 만듭니다. 요청이 성공하면 콘솔은 서버에서 반환된 JSON 개체를 출력합니다.

선택기를 통해 해당 DOM 요소를 선택하고 이벤트 처리 기능을 바인딩하여 페이지와 백엔드 간의 데이터 상호 작용을 실현할 수 있습니다. 이는 Ajax를 사용하는 가장 중요한 방법 중 하나입니다.

Node.js 요청 처리

마지막으로 요청은 Node.js 서비스에서 처리되어야 합니다. app.js에 다음 코드를 추가합니다.

app.use(express.static('public'));

app.get('/', (req, res) => {
  res.sendFile(__dirname+'/public/index.html');
});

로그인 후 복사

위 코드는 Node.js 서비스에 정적 파일 서비스를 추가하고 홈페이지를 공용 폴더의 index.html 파일로 설정합니다.

이제 브라우저에서 http://localhost:3000을 열고 "요청 보내기" 버튼을 클릭하면 콘솔이 서버에서 반환된 JSON 개체를 출력하고 페이지에 "Hello World!" 메시지도 표시됩니다. .

요약

이 기사에서는 Ajax를 사용하여 Node.js 요청을 보내는 방법을 설명하고 프런트엔드와 백엔드가 상호 작용하는 방식에 대해 간략하게 소개합니다. 이러한 방식으로 프런트 엔드는 비교적 쉽게 백엔드 데이터와 상호 작용할 수 있어 더 풍부한 기능과 더 나은 사용자 경험을 얻을 수 있습니다. 물론 HTTP 요청을 처리하는 Node.js의 능력은 이보다 훨씬 뛰어나며 더 복잡하고 완전한 기능을 위해서는 심층적인 연구와 연습이 필요합니다.

위 내용은 ajax가 nodejs 요청을 보냅니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!