将 jquery 前端连接到 nodejs 后端

Question

I'm fairly new to node js. Trying to build a web app. Currently, have the frontend and backend working well individually and both are hosted on the same port. Frontend contains forms and I want the data acquired from the form to be sent to the backend. Backend has api that the frontend can access but both are failing to connect.

app.use('/cssFiles',express.static(__dirname + '/testhomepg/testhomepg/'));
app.get('/', function(req, resp) {
    resp.sendFile('home.html', {root:path.join(__dirname, '../Frontend/testhomepg/testhomepg')});
})

app.get(/^(.+)$/, function(req,resp) {                   // getting data from the form
    console.log(req.params[0] + ' GET')
    resp.sendFile(req.params[0], {root:path.join(__dirname)});
})

app.post('/register', function(req, resp) {              // Trying to connect to the backend
    console.log('Data:' + JSON.stringify(req.body));
    resp.json({message: 'message recieved!!!'})
})

$(function() {                                                // function called on clicking 'Submit'
    $('form').submit(function() {
      
        var obj1 = $('form').serializeObject();
        var obj2 = {person: "tutor"};
        var data = $.extend({}, obj1, obj2);

        $(location).attr('href', './thankyou.html')
        return false;
    });
});

Any help on this is much appreciated Thank you!

Answer 1

you have to make ajax call to connect to backend api

$(function() {                                                
$('form').submit(function() {
    var obj1 = $('form').serializeObject();
    var obj2 = {person: "tutor"};
    var data = $.extend({}, obj1, obj2);    
    $.ajax({type: 'POST', url: "/register", data,
         success: function(result){
         console.log(result)
        }});
    });
});