These are my code blocks.
API Endpoint
app.get('/clients/zvb/:id', function(req, res) {
console.log('ZVB Query loaded as var = file;')
var path = './public/queries/zvb.sql'
var zvb = fs.readFileSync(path, "utf8")
zvb = zvb.splice(25, 0, req.params.id)
request.query(zvb, function(err, recordset) {
console.log(recordset);
res.end(JSON.stringify(recordset));
});
})
Then my index.html where I try and GET the data from the endpoint.
$.ajax({
type: 'GET',
url: 'http://localhost:8081/clients/zvb/16601',
dataType: 'jsonp',
success: function(data) {
console.log(data);
console.log('we got to here..')
}
});
Not much is happening at the moment. When I try and manually run the ajax call in the terminal I get;
Object {readyState: 1}
The endpoint is working, if I view it I can see the JSON i'm after.
Tom
If you are using jquery 1.5+ these shorthand methods are very easy to use.
(I can't comment or would have asked). Doc is here http://api.jquery.com/category/ajax/shorthand-methods/
$.get( "http://localhost:8081/clients/zvb/16601", function(data) {
var data = JSON.parse(data);
})
.done(function() {
})
.fail(function() {
})
.always(function() {
});
Related
In server side,I fetch data from database
var sql = require('mssql');
app.get('/api/comments', function(request, response) {
var sqlConfig = {
// Connection string parameters.
}
sql.connect(sqlConfig, function() {
var request = new sql.Request();
var stringRequest = 'select TOP 10 * from comment';
request.query(stringRequest, function(err, recordset) {
if(err) console.log(err);
sql.close();
response.json(recordset);
});
});
});
Then,I fetch the data from server side by AJAX (get method)
_fetchComments() {
jQuery.ajax({
method: 'GET',
url: '/api/comments',
success: (comments) => {
this.setState({ comments })
}
});
I get an error when I get the data by Ajax.
(Uncaught TypeError: this.state.comments.map is not a function)
It seems that the data return is undefined.Instead of fetching database,the code is work if I use static data(hard code) in server side.
I think the problem is the callback function in sql.connect() but I have no idea how to solve it.Does anyone can help?
Error:
The solution is adding dataType: 'json' to the ajax
_fetchComments() {
jQuery.ajax({
method: 'GET',
url: '/api/comments',
dataType: 'json',
success: (comments) => {
this.setState({ comments })
}
});
}
Like my title says, I am trying to pull data from a route with a AJAX Request that holds json data ('/home/playback/json'). But this data won't exist unless a query is done But I am trying to incorporate this from my client side page(playback.ejs) but I can't connect a query to my route that is connected to my database. Any ideas or documentations I should try out?
AJAX Request
$(document).ready(function () {
$('#search').on('submit', function() {
$.ajax({
url: "http://localhost:8080/home/playback/json",
contentType: "application/json",
dataType: 'json',
success: function (data) {
console.log(data);
},error: function () {
alert('error');
},
type: "GET",
});
});
});
Route.js
app.get('/home/playback', function (req, res) {
res.render('playback.ejs');
});
app.get('/home/playback/json', function (req, res) {
//database connection
dbconnection.query("SELECT * FROM myTable WHERE FILE_NUM LIKE '%" + req.query.searchFileNumber + "%' LIMIT 5", function (err, rows, fields) {
if (err) throw err; //Show any errors
var data = [];
for (i = 0; i < rows.length; i++) {
data.push(rows[i]);
}
res.json(data);
});
});
I might be missing something, but wouldn't this work?
$.ajax({
url: "http://localhost:8080/home/playback/json?searchFileNumber=1",
....
Also: watch out for SQL injection vulnerabilities. Without proper user input sanitation anyone could drop your database.
I am working with a simple CRUD app with jquery ajax and node.js, just to improve my skills with node and ajax. The thing is that I am doing a post request that is handled with my post router in the node server, and everything is working fine. It adds 1 more product to my products.json file, but in the end it doesn't send the response back to the client, the final res.send("done") doesn't work and I don't know why..
here is the code:
ajax
$("#create-form").on('submit',function(){
event.preventDefault();
var createIn = $("#create-input").val();
$.ajax({
url: '/products',
method:'POST',
data:JSON.stringify({name:createIn}),
contentType: "application/json",
dataType: "json",
success: function(data){
console.log(data);
$("create-input").val("");
$("get-button").click();
}
});
})
node
app.post('/products',function(req,res){
fs.readFile('products.json','utf8',function(err,data){
var result = JSON.parse(data);
var productName = req.body.name;
console.log(req.body.name);
currentId++;
var productId = currentId;
var product = {
name: productName,
id: productId
}
result.products.push(product);
fs.writeFile(__dirname + "/products.json",JSON.stringify(result),'utf8');
});
res.send("post done");
});
This is just the important part of the code, it works and just fails at the end in the res.send.
Your client code is looking for a json response, but you are returning a string.
$("#create-form").on('submit',function(){
event.preventDefault();
var createIn = $("#create-input").val();
$.ajax({
url: '/products',
method:'POST',
data:JSON.stringify({name:createIn}),
contentType: "application/json",
dataType: "json", <--------------
success: function(data){
console.log(data);
$("create-input").val("");
$("get-button").click();
}
});
})
Either delete this line or add on the server side
res.send({"message":"post done"});
This does not answer your question directly but you should ideally not send back the response until you know the work has been done, and you should handle errors. In other words you should use the callbacks. (Too many callbacks can be problematic and you should investigate other patterns - eg promises - bit no need here)
app.post('/products',function(req,res){
fs.readFile('products.json','utf8',function(err,data){
if (err) return res.send("error");
var result = JSON.parse(data);
var productName = req.body.name;
console.log(req.body.name);
currentId++;
var productId = currentId;
var product = {
name: productName,
id: productId
}
result.products.push(product);
fs.writeFile(__dirname + "/products.json",JSON.stringify(result),'utf8', function(err, res) {
if (err) return res.send("error");
res.send("post done");
});
});
});
Jeez... How about that title, terrible lol.
Well I am using jquery-comments by Viima. (http://viima.github.io/jquery-comments/)
I'm trying to use ajax commands to a Node.JS script that will update a JSON file. All of which is local, no crossing domains or anything.
Here is my Node.JS script:
var http = require('http');
var fs = require('fs');
http.createServer(function (req, res) {
fs.writeFile("/comments-data.json", "commentJSON", function(err) {
if(err) {
return console.log(err);
}
console.log("The file was saved!");
});
}).listen(8080, '127.0.0.1');
console.log('Server running at http://127.0.0.1:8080/');
Here is the Ajax post
postComment: function(commentJSON, success, error) {
$.ajax({
type: 'post',
url: 'http://127.0.0.1:8080',
data: commentJSON,
success: function(comment) {
success(comment)
},
error: error
});
},
I don't want to redirect. I just wanted to asynchronously show the new comment. Also this script will ultimately have to be able to handle video attachments as well and store the filepath inside the JSON file. But i believe, Jquery-comments just reads the file path from the JSON
Here is what the support site says for attachments
uploadAttachments: function(commentArray, success, error) {
var responses = 0;
var successfulUploads = [];
var serverResponded = function() {
responses++;
// Check if all requests have finished
if(responses == commentArray.length) {
// Case: all failed
if(successfulUploads.length == 0) {
error();
// Case: some succeeded
} else {
success(successfulUploads)
}
}
}
$(commentArray).each(function(index, commentJSON) {
// Create form data
var formData = new FormData();
$(Object.keys(commentJSON)).each(function(index, key) {
var value = commentJSON[key];
if(value) formData.append(key, value);
});
$.ajax({
url: '/api/comments/',
type: 'POST',
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(commentJSON) {
successfulUploads.push(commentJSON);
serverResponded();
},
error: function(data) {
serverResponded();
},
});
});
}
});
What is the equivalent of the following browser-side GET request in Node?
jQuery.ajax({
url: 'http://test.com',
type: 'GET',
data: myData,
success: function(data) {
console.log(data);
}
});
My best attempt is
http.get('http://test.com', function(response) {
response.on('data', function (chunk) {
console.log(chunk);
});
});
The problem is I don't know how to pass data: myData in the Node version. How can I pass data to http.get requests?
You have to pass it the full URL. you can create the URL by adding the query parameters yourself. There is a helper for making your own Query Strings. So it would be something like:
url = "http://test.com/?" + querystring.stringify(myData);
http.get(url, ...);
Remember that the get method is by url, so you can add it to the url if you want
http.get('http://test.com?GetVariable='+myVal, function(response) {
response.on('data', function (chunk) {
console.log(chunk);
});
});