I am trying to get a variable to NODEJS using AJAX or req.body

Question

I want to send a variable/value that I have in client side javascript. The reason I am doing this is because my req.body.domain is coming back undefined and same when I try to send JSON, I am trying to send this to a nodejs route.

client side Ajax request

function digIt() {
    var xhr = new XMLHttpRequest();
    const domain = document.getElementById("digTool").value;
    const digToolInput = document.getElementById("digToolInput");
    digToolInput.innerHTML = domain;
    digToolInput.style.fontSize = "35px";
    const usMap = document.getElementById("us-map");
    usMap.classList.add("appear");
    digToolInput.classList.add("moved");

    console.log(domain);
    myJSON = { "domain" : domain  };
    console.log(JSON.stringify(myJSON));
    xhr.open('POST', '/tools', true);
    xhr.send(myJSON);
};

NodeJS Route for receiving the AJAX request

router.post('/tools', (req, res, next) => {
    console.log(req.body.myJSON);
    mid.canYouDigIt(domain);
    res.render('tools', {test: 'domain'});
    next();

});

html/jade

doctype html
html(lang="en")
    head
        link(rel="stylesheet" type="text/css" href="./css/style.css")
        link(rel="stylesheet" type="text/css" href="./css/animation.css")
        link(href="https://fonts.googleapis.com/css?family=Cutive+Mono" rel="stylesheet")
        link(href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Ubuntu" rel="stylesheet")


        title Nymadic #{title}


body

    section(id="container")

        section(id="navWrapper")

            img(id="logo" src="img/Nymadic_Logo_Edit_NEW.png" onclick="location='/'")

            <!----- Navigation Menu ----->
            div(id="navMenu")
                ul
                    li(onclick="location='/'") Home
                    li(onclick="location='/about'") About
                    li(onclick="wikiOpen()") Wiki
                    li(onclick="toolsOpen()") Tools
                    if !currentUser
                        li(onclick="location='/login'") Login
                    else
                        li(onclick="location='/profile'") #[img( id="navProfileLogo" src="/img/if_ninja_479478.png")] Profile
                            li(id="navLogout" onclick="location='/logout'") Logout



        <!----- Wiki Menu ----->
        section(id="sideBar")
            div
                img(id="logoSideBar" src="img/Nymadic_Logo_Edit_NEW.png" onclick="location='/'")
                form
                    input(id="searchBar" name="search" type="text" placeholder="Search for knowledge...")
                ul
                    li( v-for="page in mediaList" v-bind:name="page.title" v-on:click="toggleDetails(page)") {{ page.title }}
                        div( id="descriptionWrapper" v-bind:class="{less: page.showDetail}" )
                            p( ) {{ page.description }}
                            p(v-if="page.author" size="8" ) Created By: {{ page.author }}

        <!----- Tools Menu ----->
        section(id="digToolWrapper")
            form( id="digToolInput" )
                ul
                    li #[input(id="digTool" name="domain" type="text" placeholder="Can you dig it?")]#[input(id="whois" value="whois" type="button" onclick="digIt()")]

Yeah, I have a login and registration page that works with a mongodb that all works fine. — Malikiah, Aug 04 '18 at 17:56

score 0 · Answer 1 · answered Aug 04 '18 at 06:00

You have printed the stringified JSON body, but failed to send do the same while sending.

While sending JSON data, you should use, JSON.stringify(data), so in your case,

xhr.send(JSON.stringify(myJSON));

And if possible, use new Web APIs like fetch() instead of XHR.

Fetch API has more advantages as mentioned here

I am trying to get a variable to NODEJS using AJAX or req.body

1 Answers1