jQuery+koa 2 간단 한 Ajax 요청 을 위 한 예제

7944 단어 koaAjax청구 하 다.
머리말
기 존 에 Ajax 코드 를 쓰 는 것 은 전단 의 실현 에 만 관 한 것 이 었 습 니 다.이 로 인해 자신 이 Ajax 의 요구 에 대한 이해 가 깊 지 않 은 것 같 아서 전단 에서 백 엔 드 까지 의 Ajax 는 작은 demo 를 실현 하고 간단 한GET과POST요 구 를 실현 하 며 앞 뒤 의 상호작용 에 대한 이 해 를 강화 하 였 습 니 다.
기술 창고
  • koa2
  • jQuer
    • 수요
    일부 논 리 는 전단 에서 직접 처리 할 수 있 는데 여기 서 백 엔 드 처 리 를 보 내 는 것 은Ajax요 구 를 잘 이해 하기 위해 서 이다.
    POST
    번호 와 이름 을 입력 하고 POST 요청 을 보 내 인원 정 보 를 저장 하고 정보 가 작성 되 지 않 거나 올 바 르 지 않 을 때 형식 오류 에 대한 알림 을 줍 니 다.정보 가 정확 하지만 번호 가 존재 할 때 번호 가 존재 하 는 알림 을 줍 니 다.정보 가 정확 하고 번호 가 존재 하지 않 을 때 저장 에 성공 한 것 으로 표 시 됩 니 다.
    GET
    번 호 를 작성 하고 GET 요청 을 보 내 인원 정 보 를 조회 하고 번호 가 작성 되 지 않 았 거나 올 바 르 지 않 을 때 형식 오류 에 대한 알림 을 줍 니 다.번호 가 정확 하고 번호 가 존재 할 때 인원 정 보 를 되 돌려 줍 니 다.정보 가 정확 하지만 번호 가 존재 하지 않 을 때 인원 이 존재 하지 않 는 오류 알림 을 표시 합 니 다.
    파일 목록
  • dist
  • index.html
  • index.js
  • server.js
  • router.js
    • 전단 실현
    html 페이지index.html,간단 한 html 페이지,버튼 을 누 르 면json형식의Ajax요청 을 보 냅 니 다.
    
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
 <div>
 <h1>Hello World</h1>
 <label for="person-number">  </label>
 <input type="text" id="person-number">
 <label for="person-name">  </label>
 <input type="text" id="person-name">
 <button id="save">    </button>
 <label for="search-number">  </label>
 <input type="text" id="search-number">
 <button id="search">    </button>
 <br>
 <br>
 <div id="message"></div>
 </div>
 <!-- jQuery     -->
 <script src="./index.js"><script>
</body>
</html>
    jQuery Ajax 요청 보 내기
    보 내기GET요청:
    
var searchButton = $('#search');
var personNumber = $('#person-number').val();
searchButton.click(() => {
 var number = $('#search-number').val();
 $.ajax({
 type: 'GET',
 url: `person/?number=${number}`
 })
});
    보 내기POST요청:
    
var saveButton = $('#save').click(() => {
 var number = $('#person-number').val();
 var name = $('#person-name').val();
 $.ajax({
 type: 'POST',
 url: 'person',
 dataType: 'json',
 data: {
  number: number,
  name: name
 }
 })
});
    되 돌아 오 는 json 데이터 처리ajaxComplete이벤트 처 리 를 통 해 되 돌아 온 데 이 터 는document대상 에 만 연결 할 수 있 습 니 다.
    
// Ajax    
$(document).ajaxComplete(function(event, xhr, settings) {
 var obj = JSON.parse(xhr.responseText);
 var data = obj.data;
 if(obj.success && data['number']){
 $('#message').text(`  ：${data['name']}   ：${data['number']}`);
 } else {
 $('#message').text(data);
 }
});
    백 엔 드 구현
    웹 서버koa2를 통 해 간단 한 웹 서버 를 실현 합 니 다.server.js ：
    
const path = require('path');
const serve = require('koa-static');
const Koa = require('koa');
const koaBody = require('koa-body'); //    multipart、urlencoded json      
const router = require('./router.js');

const app = new Koa();

app.use(serve(path.join(__dirname, './dist'))); //         
app.use(koaBody()); //         POST            
app.use(router.routes());
app.listen(3000);

console.log('listening on port 3000');
    경로 처리 요청GET요청 을 처리 하고json문자열 로 데 이 터 를 되 돌려 줍 니 다.GET요청 을 통 해 보 내 는 조회 매개 변 수 는 대상 글자 의 양 으로ctx.query속성 에 저 장 됩 니 다.
    
router.get('/person', (ctx, next) => {
 let number = ctx.query.number;
 let temp = {};
 //         
 temp.data = /^[0-9]+$/.test(number) ? (people[number] ? people[number] : '     ' ) : '      ';
 temp.success = !!temp.data['number'];
 ctx.body = JSON.stringify(temp); //     ，            
});
    POST요청 을 처리 하고json문자열 로 데 이 터 를 되 돌려 줍 니 다.POST 요청 한 데 이 터 는 요청 한 요청 체 에 저 장 됩 니 다.koa-body미들웨어 로 자동 으로 분석 해 야ctx.request.body요청 한 데 이 터 를 가 져 올 수 있 습 니 다.
    
router.post('/person', (ctx, next) => {
 let query = ctx.request.body;
 let temp = {};
 //            0，      
 if (/^[0-9]+$/.test(query.number) && query.name && parseInt(query.number, 10) > 0) {
 //         
 if (!people[query.number]) {
  //     
  people[query.number] = {
  number: parseInt(query.number, 10),
  name: query.name
  };
  temp.success = true;
  temp.data = '    ';
 } else {
  temp.success = false;
  temp.data = '     ';
 }
 } else {
 temp.success = false;
 temp.data = '      ';
 }
 ctx.body = JSON.stringify(temp);
});
    완전한router.js:
    
const Router = require('koa-router');

const router = new Router();

//          ，          。
const people = {
 1: { number: 1, name: 'Dan Friedell' },
 2: { number: 2, name: 'Anna Matteo' },
 3: { number: 3, name: 'Susan Shand' },
 4: { number: 4, name: 'Bryan Lynn' },
 5: { number: 5, name: 'Mario Ritter' },
};

router.get('/person', (ctx, next) => {
 let number = ctx.query.number;
 let temp = {}; //           ，  success          。
 //         
 temp.data = /^[0-9]+$/.test(number) ? (people[number] ? people[number] : '     ' ) : '      ';
 temp.success = !!temp.data['number'];
 ctx.body = JSON.stringify(temp);
});

router.post('/person', (ctx, next) => {
 let query = ctx.request.body;
 let temp = {};
 //            0，      
 if (/^[0-9]+$/.test(query.number) && query.name && parseInt(query.number, 10) > 0) {
 //         
 if (!people[query.number]) {
  //     
  people[query.number] = {
  number: parseInt(query.number, 10),
  name: query.name
  };
  temp.success = true;
  temp.data = '    ';
 } else {
  temp.success = false;
  temp.data = '     ';
 }
 } else {
 temp.success = false;
 temp.data = '      ';
 }
 ctx.body = JSON.stringify(temp);
});


module.exports = router;
    테스트
    콘 솔 에 입력node server.js하면 서버 가 3000 포트 에서 실행 되 는 것 을 볼 수 있 습 니 다.브 라 우 저 입력localhost:3000을 열 면 간단 한 전단 페이지 를 볼 수 있 습 니 다.

    조회 데이터:


    데이터 저장:

    데이터 재 조회:

    이로써 완전한 Ajax 요청 demo 가 완성 되 었 습 니 다.
    이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
    이동 단 관성 슬라이딩&리 턴 Vue 네 비게 이 션 바 구성 요소 ly-tab 쓰기
    웹 팩 설정 으로 인해 글꼴 아이콘 이 표시 되 지 않 는 해결 방법

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage