명시 적 응용 프로그램에서 public 폴더의 javascript 파일은 index.js 경로 폴더에 작성된 데이터베이스 API에 어떻게 액세스 할 수 있습니까?

Question

프로젝트의 목표는 클라이언트에서 단추를 클릭 할 때 localhost/phpmyadmin에서 mysql 데이터베이스에 액세스하는 것입니다. 클라이언트 쪽에서 테이블을 채우기 위해 데이터베이스에서 데이터를 가져 오는 것입니다.

이 프로젝트는 명시 적 응용 프로그램을 사용하여 수행됩니다. 루트 폴더 아래에 기록 된 데이터베이스 인터페이스 코드, index.js 파일 : 클라이언트 측 코드가보기에 작성 localhost:3000에

var express = require('express'); 
var router = express.Router(); 
var mysql = require('mysql'); 

var connection = mysql.createConnection({ 
    'host':'localhost', 
    'user':'root', 
    'password':'', 
    'database':'displayu' 
}); 

connection.connect(); 

/* GET home page. */ 
router.get('/', function(req, res, next) { 
    res.render('index'); 
}); 


router.get('/getusers',function(req,res,next){ 
    var x; 
    connection.query('SELECT * FROM sample', function(err,result,field){ 
     if (err){ 
      throw error; 
     } 
     else{ 
      x = res.json(result); 
      console.log(x); 
     } 
    }); 

}); 
module.exports = router; 

이 index.html에서 폴더를 버튼에서 공용 폴더 결과에서 자바 스크립트 로직 및 빈 테이블 .이 단추의 onclick 서버 쪽 경로 폴더 아래에 작성된 코드를 사용하여 데이터베이스에 액세스하고이 데이터를 테이블에 채 웁니다. 이 요구 사항을 수행하기위한 정확한 단계를 알 수 없습니다. 나는 클라이언트 측 코드와 서버 측 코드를 가지고 있지만 출력을 얻으려면 둘을 연결하는 데 도움이 필요하다.

Answer 1

이미 제안 된대로 클라이언트 측 js에서 AJAX 요청을 수행하여이를 달성 할 수 있습니다.

XMLHttpRequest 유틸리티를 사용하면 기본 JavaScript로이 작업을 수행 할 수 있습니다. 예를 들어

:

function populateTable() { 
    // Handle your data here.. 
} 

var GetUsersData = new XMLHttpRequest(); 
GetUsersData.addEventListener("load", reqListener); 
GetUsersData.open("GET", "/getusers"); 
GetUsersData.send(); 

당신은 또한 당신의 프로젝트에 따라, jQuery를 사용할 수 있습니다. 이미 사용하고 있다면 포함 된 jQuery를 사용하는 것이 좋습니다. get() 함수는 네이티브 JS를 사용하는 것보다 훨씬 간단합니다.

현재 프로젝트에서 jQuery를 사용하지 않는 경우 JS 기본 방식을 따르십시오. 또한 원하는 AJAX 요청 수와 관리 할 AJAX 요청 수에 따라 달라집니다./앞으로 디버그.

이 두 가지 방법 모두 매우 유용하며, 적어도 하나는 읽는 것이 좋습니다. 매우 유용하며 어느 시점에서 AJAX를 다시 사용해야합니다.