How to post data from DOM to nodejs via AJAX - javascript

I use POST method to send JSON data to the URL and I am utilizing from this data in order to render the page and I am rendering page via underscorejs. Is there any way to retrieve that data (in JSON format) and assigned them in another var in AJAX and send it as a data ?
I am trying to send data to the nodejs server in order to update Mongo DB. But there is no luck...
$(document).ready(function(){
$("#addContact").click(function(){
var responseArea = $('.actionArea');
$.ajax({
url: '/account/:id/added',
type: 'POST',
cache: false,
data: { contactId: this.model.get('_id') },
function onSuccess() {
$responseArea.text('Contact Added');
}, function onError() {
$responseArea.text('Could not add contact');
}
});
});
});
The error I am getting "Cannot call method 'get' of undefined"

Related

Ajax post not sending data to c# API Controller

I am trying to use $.Ajax() function to post data after a triggered event to my controller, but the data is not being sent. If I change the same function to "GET" method instead of "POST", it sends the data correctly, so I guess it has something to do with the VS2019 ASP.NET web project configuration, but I cannot find what it is.
The front code I am using is as follows:
marker.on('click', function (ev) {
let id = ev.target.features.properties.id
$.ajax({
url: "/public/pushDocuments",
method: "POST",
data: {
id: id,
objectname: "Prueba2",
bucketkey: "Prueba2"
},
contentType: "JSON",
success: function (data) {
launchViewer(data.urn);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
and in the server side:
[HttpPost]
[Route("public/pushDocuments")]
public async Task<IActionResult> postDocument(string id, string objectname, string bucketkey)
{
//Code here
}
but, as I said, the server is not getting the information. Nevertheless, if I change the method to GET in the server and front, I do get the data I am sending, but it is not the correct way to do it, as the work I want to do inside the server function is to save some data to a database. I have done it multiple times in other project and works, but I cannot figure out why it is not working on this one.

AJAX Post failing despite data existing

I am trying to send some data to my server using an AJAX Post call. However, whenever I run the function containing the ajax call I get a server error. Here is my AJAX call (I am trying to send a string and put it inside json for the purposes of this call):
function sendFileName(){
data_to_send={"name": scriptName};
data_to_send=JSON.stringify(data_to_send);
$.ajax({
url: '/filename',
type: 'POST',
dataType: 'json',
data: data_to_send,
error: function(resp){
console.log("Oh no...");
console.log(scriptName);
console.log(resp);
},
success: function(resp){
console.log('Sent file name!');
console.log(resp);
}
});
}
When I log the scriptName I get it in the console, so the data exists. I'm assuming the issue has to do with the way in which I'm sending it?
Here is the server-side code as well, where when I log the req it shows up as undefined:
app.post("/filename", function(req,res) {
file = req.body.name;
console.log(file);
});
Would really appreciate any help I can get with this!

Configure Ajax call for Server-side filtering of Data from Json Rest API

I use ajax jquery call to fetch data about tests from Jenkins test report's REST API. However, I want only those tests for which 'status' is not PASSED and FIXED. Now, can I configure my Ajax call such that this filtering is already done on the server side, so that passed tests are not returned as a part of the response ? My Ajax call so far :
function getTestResultsForJob(jobTestResultsUrl){
var listOfFailures = {};
$.ajax({
type: 'GET',
dataType: 'json',
url: jobTestResultsUrl,
async: false,
error: function() {
alert("Request has failed for " + jobTestResultsUrl);
},
success: function(data){
console.log('Request is success for ' + jobTestResultsUrl);
listOfFailures = data;
}
});
return listOfFailures;
}
It isn't possible to do such filtering with json on the server side.
The following returns the build numer and result:
job/Test/api/json?tree=builds[number,result]
And doing the filtering inside the success method of you ajax call.
If you can switch to xml the query would be like that:
job/Test/api/xml?tree=builds[number,result]&exclude=mavenModuleSet/build[result="PASSED"]

Call webservice at page load in AngularJS Framework scope

I have a webservice which returns Jsonobject and I call it in JS using Ajax like here :
$scope.init = function () {
$.ajax({
type: 'GET',
timeout: 1000000000,
url: serverName.replace('services', 'servicesV2') + '/getTreasuryResults',
data: { data: 'None' }, // the data in form-encoded format, ie as it would appear on a querystring
dataType: "text", // the data type we want back, so text. The data will come wrapped in xml
success: function (data) {
var dataAngularTreasury = JSON.parse(data);
alert(dataAngularTreasury);
//FillDefaultTreasuryValues(data.split(";"));
CallTreasuryDetailValuesWS(934);
},
error: function (data) {
alert(errServiceCall); // show the string that was returned, this will be the data inside the xml wrapper
$('#loading').hide();
}
});
};
If I call that init() function in ng-click like
<button id="btnGetDefaultValues" type="button" class="button" ng-click="init()">Fill</button>
It runs with no problem.
but if I call this webservice in page load like
angular.module('termDeposite', []).controller('userCtrl', function ($scope) {
$scope.treasuryValues = [];
angular.element(document).ready(function () {
$.ajax({
type: 'GET',
timeout: 1000000000,
url: serverName.replace('services', 'servicesV2') + '/getTreasuryResults',
data: { data: 'None' }, // the data in form-encoded format, ie as it would appear on a querystring
dataType: "text", // the data type we want back, so text. The data will come wrapped in xml
success: function (data) {
var dataAngularTreasury = JSON.parse(data);
alert(dataAngularTreasury);
//FillDefaultTreasuryValues(data.split(";"));
CallTreasuryDetailValuesWS(934);
},
error: function (data) {
alert(errServiceCall); // show the string that was returned, this will be the data inside the xml wrapper
$('#loading').hide();
}
});
});
});
or
if I call this webservice in ng-init trigger like
<body id="body" ng-app="termDeposite" ng-controller="userCtrl" ng-init="init()" >
webservice goes to error step and throws that error :
"\n\n\nError 404--Not
Found\n\n\n\n\n\nError 404--Not
Found\n\n\nFrom RFC
2068 Hypertext Transfer Protocol --
HTTP/1.1:\n10.4.5 404 Not Found\nThe server has not found anything matching the
Request-URI. No indication is given of whether the condition is
temporary or permanent.If the server does not wish to make this
information available to the client, the status code 403 (Forbidden)
can be used instead. The 410 (Gone) status code SHOULD be used if the
server knows, through some internally configurable mechanism, that an
old resource is permanently unavailable and has no forwarding
address.\n\n\n\n\n\n"
Finally, I can call a webservice with using ng-click but I can't call same webservice using ng-init or pageload. So how can I call a webservice using ajax in page init or page load in angular framework scope ?
Assuming you have serverName as a global and it is readable then the ng-init version or creating a custom directive and sticking the code in the link function should work.
Check the URL that is actually being called in the network tab in the Chrome dev tools (built into chrome) - cmd+alt+j on mac f12 on PC.

jquery sending form data and a json object in an ajax call

I'm making a call to another ajax page, the call posts a json object.
I also need to send data from a form
(not using submit - I have the ajax call attached to a button which uses e.preventDeault()).
The call is as folows:
var myUrl = 'sendswatch-data.php';
$.ajax({
url: myUrl,
data: {'swatchid[]':swatchArray}, 'formdata':$('#orderData').serialize()},
type: "POST",
error: function(xhr, statusText, errorThrown){
// Work out what the error was and display the appropriate message
},
success: function(myData){
$('#tabsampleorder').html(myData);
$('.tabber').hide();
$('#tabsampleorder').show();
}
});
I have a form on the page id of formdata.
How do I send this as well as the json object? I've tried
data: {'swatchid[]':swatchArray}, 'formdata':$('#orderData').serialize()},
but that's generating an error.
You have an extra } after watchArray. Try removing that.
data: {'swatchid[]':swatchArray, 'formdata':$('#orderData').serialize()},
You can send data from the form as follows:
data : { swatchid: swatchArray, formdata: $('#orderData').serialize() }
You will need a parameter in the controller for every field that your add.

Categories

Resources