CODEWITHSUNDEEP
javascriptpythonnode.jsajaxexpress
Onam Kwon
Onam Kwon

Reputation: 41

passing node js variable to html using ajax

I am trying to pass python json results to html ajax from node js.

What I want to make is, take some inputs from the client side, and when a submit button is hit, ajax is sending the variables to Node JS then the /data middleware runs a python script which handles the DB and stores the variables and showing the results.

What I did so far is, I can take inputs from the client side, and send the variables from html to Node JS using ajax, and I can also run the python script and it stores the variables to my DB. I can see the results from the back end side. But I do not know how to send back the results to the ajax client side.

Below is my part of back end side Node JS code.

const express = require('express');
const app = express();
//  To use python script
var PythonShell = require('python-shell');

const bodyParser = require('body-parser');
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }));
// parse application/json
app.use(bodyParser.json());

app.use(express.static(__dirname + ''));
app.use(express.json());
app.engine('html', require('ejs').renderFile);

app.get('/data', function(req, res) {
    res.sendFile(__dirname + '/data.html');
});

app.post('/data', function(req, res) {
    const {name, ssn, state} = req.body;
    console.log('name: ',name, 'ssn: ',ssn,'state: ',state);
    var options = {
        mode: 'json',
        pythonPath:'',  
        pythonOptions:['-u'],
        scriptPath:'',
        args: [name,ssn,state]
    };
    PythonShell.PythonShell.run('dbPrac.py', options, function(err, res) {
        if(err) throw err;
        console.log('res[0]: ', res[0]);   
        //res.render(__dirname + '/data.html');
        res.send(res[0]);
        //res.status(200).send(res[0]);
    });
});

When I use "res." method, back end side compiler always says "TypeError: res.send is not a function"

Below is my part of java script

<script>
    function sendAjax() {
        console.log('submit onclick.');
        const name = document.getElementById("name").value;
        const ssn = document.getElementById("ssn").value;
        const state = document.getElementById("state").value;
        console.log('name: ',name, 'ssn: ',ssn,'state: ',state);
        $.ajax({
            type: "post",
            url: 'http://localhost:8080/data',
            data: {name:name,ssn:ssn,state:state},
            dataType:'json',
            success: function(res) {
            console.log(res);
            }
        });
    }
</script>

Below is my part of html file in case that needed.

<form action="http://localhost:8080/data" method="post" id="signup">
    <h1>Personal info post example</h1>
    <div class="field">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" placeholder="Enter your fullname" /><br><br>
        <small></small>
    </div>
    <div class="field">
        <label for="ssn">SSN:</label>
        <input type="text" id="ssn" name="ssn" placeholder="Enter your SSN" /><br><br>
        <small></small>
    </div>
    <div class="field">
        <label for="state">State:</label>
        <input type="text" id="state" name="state" placeholder="Enter your state" /><br><br>
        <small></small>
    </div>
    <button type="submit" onclick="sendAjax()">Submit</button><br><br>
    <span id="answer"></span> <br><br>
</form>

Upvotes: 1

Views: 620

Answers (1)

traynor
traynor

Reputation: 8667

try changing arguments in python results callback:

PythonShell.PythonShell.run('dbPrac.py', options, function(err, pythonRes) {
    if(err) throw err;
    console.log('pythonRes[0]: ', pythonRes[0]);   
    //res.render(__dirname + '/data.html');
    res.send(pythonRes[0]);

Upvotes: 1

Related Questions