エクスプレスアプリケーションでは、パブリックフォルダのjavascriptファイルはどのようにindex.jsのルートフォルダに書き込まれたデータベースAPIにアクセスできますか

Question

プロジェクトの目的は、クライアントからボタンをクリックするとlocalhost/phpmyadminでmysqlデータベースにアクセスすることですクライアント側の表を埋めるためにデータベースからデータを取得することです。

このプロジェクトは、明示的なアプリケーションを使用して行われます。 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下ビューフォルダに書き込まれたクライアント側のコードとボタンと空のテーブルでパブリックフォルダ結果下ジャバスクリプトロジック：ルートフォルダの下に書かれたデータベース・インターフェース、index.jsファイルの コード。私はこのボタンのonclickをサーバサイドルートフォルダの下に書かれたコードを利用してデータベースにアクセスし、このデータをテーブルに埋めたいと思う。 この要件を実行するための正確な手順はわかりません。私はクライアント側のコードとサーバー側のコードを持っていますが、出力を得るために両方をリンクするのに助けが必要です。

Answer 1

すでに提案したように、クライアントサイドからの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を使用していない場合は、作成するAJAXリクエストの数に応じてJS固有の方法を実行することに固執する必要があります。また、管理する必要がある数も考慮してください/デバッグを進めていきます。

これらの方法はどちらも非常に興味深いので、非常に便利で、AJAXをもう一度使用しなければならないため、少なくとも1つを読み解くことをお勧めします。