在快速应用程序中，公用文件夹中的javascript文件如何访问index.js下路由文件夹中编写的数据库API

Question

Aim of the project is,accessing the mysql database at localhost/phpmyadmin on clicking a button from the client side and getting the data from the database for filling up a table on client side.

This project is done using an express application. Code for database interface written under routes folder, index.js file:

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;

On localhost:3000 the client side code written in views folder under index.html and the javascript logic under public folder results in a button and an empty table.I want to make use of the code written under server side routes folder onclick of this button to access the database and fill this data into the table. I don't know the exact steps to do this requirement. I have the client side code and the server side code but need help to link them both to get output.

Answer 1

As already suggested you can achieve that by doing an AJAX request from your client side js.

You could do this with native JavaScript by using the XMLHttpRequest utilities.

For example:

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

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

You could also use jQuery, depending on your project. If you already use it, I'd recommend using the included jQuery. get() function, which is quite a bit simpler than using native JS.

If you are not using jQuery in your project at the moment, you should stick to doing it the JS native way, also depending on how many AJAX requests you want to make and also keeping in mind how many you have to manage/debug going forward.

Both of these ways are very interesting and I'd suggest reading up on at least one of them, as they are very useful and you will at some point have to use AJAX again.