CODEWITHSUNDEEP
javascriptnode.jsajax
Rachel
Rachel

Reputation: 173

Problems with ajax response in node js?

So, basically I am trying to send a request from my ajax post to my node js backend. Then I am trying to get the response back from the node js and update my view. Now, this is something that happens. Instead of just updating the resulttoken in the view, I can see in the console that whole html is loaded like a page. I am really confused. Please kindly point my error. This is what I tried so far.

<!DOCTYPE html>
<html>
<body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<form id="registerSubmit">
    Phonenumber:<br>
    <input type="text"  name="phonenumber" id="phonenumber">
    <br>
    Review:<br>
    <input type="text"  name="review" id="review">

    <br><br>
    <input type="submit" value="Submit" onclick="gettoken()">

    <br>
    Token: <%=resulttoken%>;



</form>
<script type="text/javascript">
    function gettoken() {

        event.preventDefault();

        var phonenumber = $("#phonenumber").val();
        var review = $("#review").val();

        $.ajax({
            url: '/home',
            data: {
                "phonenumber": phonenumber,
                "review": review
            },
            error: function (err) {
                console.log("ERROR",err)
            },

            success: function (info) {
                console.log("info",info);
            },
            type: 'POST',
        });
    }
</script>

</body>
</html>

server

app.post("/home", function (req, res) {

    var s = -1;
    var t = -1;
    var m = -1;

    var phonenumber = req.body.phonenumber;
    var review =  req.body.review;
    console.log(phonenumber);
    fd.insertreview(phonenumber,review).then(function(v) {

        if(v=="1") {
            console.log("Your review has been inserted successfully");


            s = md.getRand();
            console.log("Unique number is",s);

            fd.checkifuniquenumberexists(s).then(function(u){
               if(u!="1"){
                   console.log("Unique number doesnt exist");
                   fd.inserttoken(s,phonenumber).then(function (p) {
                       if(p=="1"){

                           console.log("Token has been inserted successfully");
                           res.render('trial',{"resulttoken":s});

                       }

                   })
               }
            });


        }
    });


    });

This is what loads on the console log

info <!DOCTYPE html>
<html>
<body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<form id="registerSubmit">
    Phonenumber:<br>
    <input type="text"  name="phonenumber" id="phonenumber">
    <br>
    Review:<br>
    <input type="text"  name="review" id="review">

    <br><br>
    <input type="submit" value="Submit" onclick="gettoken()">

    <br>
    Token: 35055;



</form>
<script type="text/javascript">
    function gettoken() {

        event.preventDefault();

        var phonenumber = $("#phonenumber").val();
        var review = $("#review").val();

        $.ajax({
            url: '/home',
            data: {
                "phonenumber": phonenumber,
                "review": review
            },
            error: function (err) {
                console.log("ERROR",err)
            },

            success: function (info) {
                console.log("info",info);
            },
            type: 'POST',
        });
    }
</script>

</body>
</html>

Upvotes: 0

Views: 71

Answers (1)

James
James

Reputation: 82096

The issue is this line

res.render('trial',{"resulttoken":s});

You're returning the entire page as your response, if you just need the token you can return this as part of a JSON response e.g.

res.status(200).json({ token: s });

then at the client

$.post('/home', { phonenumber, review }, res => {
    // use res.token
    console.log(`Token: ${res.token}`);
})
.fail(console.error);

Upvotes: 2

Related Questions