CODEWITHSUNDEEP
node.jsjqueryexpress
Muhammad Faizan
Muhammad Faizan

Reputation: 1789

Node JS Get Ajax request works but Post ajax request not works.Even Post data defined url is not responding

I am having a problem with writing express.js server, I tried to "post" and "get" some data I successfully "get" data via ajax, But when i "post" data rather than running .success(function (){...}), it runs .error(function(){}). I have been trying to figure out, matching code, but couldnt get the right pick, Please help ! Here is my Code of app.js on express.js

var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');
var mydata = require('./routes/mydata');

var app = express();
{...}// some more default code     
app.get('/', routes.index);
app.get('/users', user.list);
app.get('/show',mydata.showData);
app.get('/data',mydata.getData);
app.get('/moredata',mydata.getMoreData);
app.get('/moredata1', mydata.getMoreData1);

http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

Here is my code of mydata.js

exports.showData = function (req,res){
    res.render('mydata')
}

exports.getData = function (req,res){
    console.log('Hello from getData');
    res.send('Hello from Server');
}

exports.getMoreData = function (req,res){
    console.log("Hello from getMoreData");
    res.send({name:"Muhammad",age:23});
}
exports.getMoreData1 = function (req,res){
    console.log("Hello from getMoreData1");
    console.log(req.body.name);
    console.log(req.body.age);
    res.send({name:"Faizan",age:55});
}

On client i have written this code filename : "mydataclient.js"

$(function(){
    //alert("Its working");
    $("#btn").on("click", function (){
        //alert("Hello World");

         $.ajax({
         url:"/data",
         type:"get"

         })
         .success(function(response){
                console.log('success');
                alert(response);
                $("#data").html(response);

            })
            .error(function() {
            console.log("error from #btn");
            })
    })

         $("#btnMore").on("click", function() {
         //alert("Hello World");

         $.ajax({
         url:"/moredata",
         type:"get"

         })
         .success(function(response){
         console.log('success');
         alert(response);
         $("#data").html(response.name);

         })
         .error(function() {
         console.log("error");
         })
         })


         $("#btnPost").on("click", function() {
             var abc = $('#myname').val();
             //alert(abc);
             $.ajax({
                url:"/moredata1",
                type:"post",
                data: {name: abc, age:11}
            })
                .success(function(response){
                    $("#data").html(response.name);
                })
                .error(function(){
                    console.log("Error from btnPost");
                })
         })
});

Everything on this page is working fine, Except when i try to post data to server it shows me this error on server console.

POST /moredata1 404 5ms

here is my page .ejs file code:

<!DOCTYPE html>
<html>
  <head>
    <title>My Data Page</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src ="/javascripts/jquery-2.0.3.min.js" type="text/javascript"></script>
    <script src ="/javascripts/mydataclient.js" type="text/javascript"></script>
  </head>
<body>
    <h1>MyData</h1>
    <input type="text" id="myname">
    <p>Welcom </p>
    <div id="data">Hello</div>
    <button id="btn">Get Data</button>
    <button id="btnMore">Get More Data</button>
    <button id="btnPost">Post Data</button>
</body>
</html>

You can also tell me alternative ways of posting data to server.

Code is placed at https://www.dropbox.com/sh/0jzgt27897zxl1v/7VAraRWnMl Please Help !

Thanks

Upvotes: 0

Views: 1091

Answers (2)

Usman
Usman

Reputation: 11

app.get('/moredata1', mydata.getMoreData1);

Modified : app.post('/moredata1', mydata.getMoreData1);

Upvotes: 1

Lasse
Lasse

Reputation: 1656

In Express.js you need to explicitly allow for POSTs to a url:

app.get('/moredata1', mydata.getMoreData1);
app.post('/moredata1', mydata.getMoreData1); // <===

Otherwise, the server will just return a 404.

Optionally, if you really want to, you could use app.all, which allows for GET, POST and PUT HTTP requests.

Upvotes: 2

Related Questions