Skip to content

Instantly share code, notes, and snippets.

@diorahman
Created December 26, 2011 03:34
Show Gist options
  • Save diorahman/1520485 to your computer and use it in GitHub Desktop.
Save diorahman/1520485 to your computer and use it in GitHub Desktop.
Ajax, call jQuery POST to node.js expressjs
<html>
<head>
<title>jsonp test</title>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#select_link').click(function(e){
e.preventDefault();
console.log('select_link clicked');
/*$.ajax({
dataType: 'jsonp',
data: "data=yeah",
jsonp: 'callback',
url: 'http://localhost:3000/endpoint?callback=?',
success: function(data) {
console.log('success');
console.log(JSON.stringify(data));
}
});*/
var data = {};
data.title = "title";
data.message = "message";
$.ajax({
type: 'POST',
data: JSON.stringify(data),
contentType: 'application/json',
url: 'http://localhost:3000/endpoint',
success: function(data) {
console.log('success');
console.log(JSON.stringify(data));
}
});
/*$.ajax('http://localhost:3000/endpoint', {
type: 'POST',
data: JSON.stringify(data),
contentType: 'application/json',
success: function() { console.log('success');},
error : function() { console.log('error');}
});*/
});
});
</script>
</head>
<body>
<div id="select_div"><a href="#" id="select_link">Test</a></div>
</body>
</html>
var express = require('express');
var app = express.createServer();
app.use(express.bodyParser());
/*app.get('/endpoint', function(req, res){
var obj = {};
obj.title = 'title';
obj.data = 'data';
console.log('params: ' + JSON.stringify(req.params));
console.log('body: ' + JSON.stringify(req.body));
console.log('query: ' + JSON.stringify(req.query));
res.header('Content-type','application/json');
res.header('Charset','utf8');
res.send(req.query.callback + '('+ JSON.stringify(obj) + ');');
});*/
app.post('/endpoint', function(req, res){
var obj = {};
console.log('body: ' + JSON.stringify(req.body));
res.send(req.body);
});
app.listen(3000);
@ANUJ-07
Copy link

ANUJ-07 commented May 27, 2018

I want the form with id logout to work;
Nothing coming on console Someone help

JS

<script type="text/javascript"> console.log('ajax'); $(function(){ $('li form').on('submit',function(){ console.log('ajax3'); $.ajax({ type:'POST', url : '/logout', success : function(data) { location.reload(); } }); }); }); </script>

Inside body

<nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav" id="j"> <li class=""> <a href="homepage"> <span class="glyphicon glyphicon-home"></span> HOME</a> </li> <li class="scroll"> <a href="gallery"> <span class="glyphicon glyphicon-piggy-bank"></span> GALLERY</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li style="margin-right: 10px"> <button class="btn btn-default navbar-btn"> <span class="glyphicon glyphicon-user"></span> Hello <%=sess_data.user %> </button> </li> <li> <form style="padding: 0px;margin: 0px" id="logout"> <button class="btn btn-primary navbar-btn" type="submit"> <span class="glyphicon glyphicon-user"></span> Log Out</button> </form> </li> </ul> </div> </div> </nav>

@agiagoulas
Copy link

Thanks !

@AcePhire
Copy link

tysm!

@dgSFCC
Copy link

dgSFCC commented Apr 16, 2020

Thanks, I have used the following for this purpose and totally nailed the issue:
`var express = require('express');
var app = express();
var cors = require('cors');

app.use(cors());

const bodyParser = require('body-parser');
app.use(bodyParser.json())

app.use((err, req, res, next) => {
return res.send({ "statusCode": util.statusCode.ONE, "statusMessage": util.statusMessage.SOMETHING_WENT_WRONG });
});

app.post('/post', function(req, res){
var response = {
'dest': '/public/'
}
res.send(response);
});
app.listen(3000);`

@BIJOY-SUST
Copy link

Thank you so much for sharing this ..!
I was stuck for a few days because of this problem.

@KishanMaurya
Copy link

KishanMaurya commented Oct 18, 2020

//100% work
``//view data
$(document).on('click','.view',function(e){
e.preventDefault();
let id=$(this).attr('data')
$('#myModal').modal('show');
$.ajax({
type: "PUT",
url: "/updatemeeting/"+id,
dataType: "json",
data: JSON.stringify({id:id}),
contentType: 'application/json',
cache: false,
timeout: 5000,
complete: function() {
console.log('process complete');
},
dataType: "json",
success: function (response,status, xhr) {
var html = "";
html=html+"ID"+response._id+"";
html=html+"MetingName"+response.meetingName+"";
html=html+"Description"+response.description+"";
html=html+"StartTime"+response.startTime+" PM
";
html=html+"EndTime"+response.endTime+" PM
";
html=html+"Date"+moment(response.createDate).format('ddd Do MMM')+"";
$("#tableview").html(html);
},
error: function(xhr,status,error) {
console.log('process error',error);
},
});
})

//controller file
async AjaxView(req,res){
var id = req.params.id;
console.log("id=>",id);
if(!id){
req.flash('error','Something error')
}
const data=await Meeting.findOne({_id:id,moment:moment},(err,response)=>{
res.json(response);
})
console.log(data)
}

//route

app.put('/updatemeeting/:id', auth, MeetingController().AjaxView)

@vishaka-mohan
Copy link

Thanks so much

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment