Ajax request with ionic to local server - ionic-framework

i'm new to ionic and ajax.
I have a local restful server that returns json outputs and it works normally with the browser.Then, with ionic i'm trying to get the same response in order to handle that output.
The problem is that the server returns nothing, even with the command "ionic serve". The error function runs instead the success one.
Can someone help me?
This is the script used to make the ajax request
var rootURL = "http://127.0.0.1:8080/conv1";
$(document).ready(function() {
$.ajax({
type: 'GET',
url: rootURL+'/relat/view',
dataType: "json",
success: function(data){
$('#divTrip').append('<ul>');
$.each(data, function(i, rows){
$('#divTrip').append('<li >'+rows.nome+ ' '+rows.cognome+'<br></li><br>');
});
$('#divTrip').append('</ul>');
alert(data[0].cognome);
},
error: function(e){
alert('Error: '+e);
}
});
});

Related

vsrm.dev.azure.com is blocked by CORS

I was able to access vsrm.dev.azure.com API via $.ajax.get calls
i.e. https://vsrm.dev.azure.com/microsoft/***/_apis/release/definitions/****
Now I'm starting to get CORS error:
Access to XMLHttpRequest at 'https://vsrm.dev.azure.com/microsoft//_apis/release/definitions/' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Any ideas how to fix this?
The ajax get still work for me now without any error message. Since you did not share any code of yours, here I just provide you mine:
<script type="text/javascript">
$(document).ready(function () {
$("#click").on("click", function () {
$.ajax({
type: 'GET',
url: 'https://vsrm.dev.azure.com/{org}/{project name}/_apis/release/definitions/{id}?api-version=5.1',
cache: false,
dataType: 'json',
beforeSend: function (xhr) {
xhr.setRequestHeader("Authorization", "Basic " + btoa("" + ":" + "{PAT token}"));
},
}).done(function (data) {
alert(data);
}).error(function (e) {
var s = "error error error";
});
})
});
</script>
You can try with mine to see whether it is work for you.
Update:
I cover my org name, project name, release definition id and my PAT token in my script, please replace it with your available values.

Retrieving params with sinatra on form submit. Params is undefined

I am having trouble accessing params in Sinatra after submitting a form. This is my form:
function submitForm(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: '/mix_addresses',
//grab the inputs from address_section
//data: $('.add_address_section .add_address_field').map(function() { return $(this).val() }),
data: [1,2,3],
dataType: "json",
success: function(data) {
debugger;
}
});
}
And this is my endpoint:
require 'sinatra'
require 'jobcoin_client'
get '/' do
erb :add_coins
end
post '/mix_addresses' do
puts params
end
I'm getting to the endpoint, but the params are blank. Shouldn't it be [1,2,3]? Instead, it's:
{"undefined"=>""}
Anyone see what I'm doing wrong?
Several issues here :)
Sinatra configuration
Main problem is coming from the fact that Sinatra doesn't deal with JSON payloads by default. If you want to send a JSON payload, then the easiest solution will be :
To add rack-contrib to your Gemfile,
Then, require it in your sinatra app: require rack/contrib
And load the middleware that deals with this issue: use Rack::PostBodyContentTypeParser
And you should be good to go!
Source: several SO post reference this issue, here, here or here for instance.
jQuery ajax call
Also, note that there might be some issues with your request :
You'll need to use a key: value format for your JSON payload: { values: [1,2,3] }
You'll need to stringify your JSON payload before sending it: data: JSON.stringify( ... )
You'll need to set the request content type to application/json (dataType is related to the data returned by the server, and doesn't say anything about your request format, see jQuery ajax documentation for more details).
Eventually, you should end up with something like this on the client side:
function submitForm(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: '/mix_addresses',
contentType: 'application/json',
dataType: 'json',
data: JSON.stringify({ values: [1,2,3] }),
success: function(data) {
debugger;
}
});
}

Flask redirect after ajax request success

I develop a mapping app, the front-end is created with Flask. When searching the external backend (create with the django framework) with ajax requests. I would like redirect the url after return from the ajax response (if success or not). But, I don't know the best way for this !
submitHandler: function () {
/********* GET USER TOKEN WITH AJAX REQUEST**********/
$.ajax({
method: 'POST',
url: "url for get token",
data: {
username: $('#email-log').val(),
password: $('#password-log').val()
},
success: function (response) {
if(response.d == true) {
localStorage["username"] = $('#username-log').val();
localStorage["user_token"] = response['token'];
window.location = "{{url_for('maps')}}";
}
},
});
},
Where do I do this redirection?
In ajax request, in the form action = "", using url_for() somewhere ?
I'm lost in all these methods
If you only want to redirect after Ajax success you can do this:
$.ajax({
// do what you want,
success: function(){
window.location.href = "/url/for/route/" //redirect url
// or
window.location.replace("url/for/route")
}
});

making jquery AJAX POST to resful API

I'm trying to convert a REST call using Cordova plugin to a JQuery AJAX POST. I don't have the JQuery code right, the call is getting a connection refused error (hitting localhost). I'm successfully making GET requests to my localhost, so there isn't a connectivity issue.
The REST API code:
#Path("/track")
public class TrackResource {
...
The method in TrackResource class i'm trying to hit :
#POST
#Path("{trackid}")
#Consumes("application/json")
#Produces("application/json")
public Response addToResource(#PathParam("trackid") String trackid, String bodyJson) {
The AJAX code:
var trackingJSON = JSON.stringify(tracking_data);
var urlAjax = "http://localhost:7001/ds/resources/track/" + trackid;
$.ajax({
type: "POST",
url: urlAjax,
data: trackingJSON,
beforeSend: function() { $.mobile.showPageLoadingMsg("b", "Loading...", true) },
complete: function() { $.mobile.hidePageLoadingMsg() },
success: function(data) { alert("ajax worked"); },
error: function(data) {alert("ajax error"); },
dataType: 'json'
});
I'm not sure if i'm using the data option in the ajax call correctly, but it's my understanding that is where you would put the data you want to pass server side.
I do have other GET calls to this same TrackResource class working, so i know the base part of the URL is correct. I know the trackid value is populated correctly as well.
If you're posting a JSON string make sure you also set contentType: "application/json".
var trackingJSON = JSON.stringify(tracking_data);
var urlAjax = "http://localhost:7001/ds/resources/track/" + trackid;
$.ajax({
type: "POST",
url: urlAjax,
contentType: "application/json",
data: trackingJSON,
beforeSend: function() { $.mobile.showPageLoadingMsg("b", "Loading...", true) },
complete: function() { $.mobile.hidePageLoadingMsg() },
success: function(data) { alert("ajax worked"); },
error: function(data) {alert("ajax error"); },
dataType: 'json'
});
I needed to use the router address of my computer, 192...., in order to hit my localhost... I was running the application on an actual Android device, however, I guess trying to use localhost or 127.0.0.1 in the AJAX call must have been causing issues.

Bad request when trying to post to wcf rest 4 service

I am playing with the wcf 4.0 rest template and trying to get it to work with jquery.
I have created a new rest template project and added a webform into the same project just to get things simple.
I have slightly modfied the Create Method to look like this
[WebInvoke(UriTemplate = "", Method = "POST")]
public string Create(SampleItem instance)
{
// TODO: Add the new instance of SampleItem to the collection
return (instance.Id == 1) ? "1 was returned" : "something else was returned";
}
Then from my webform I am using this.
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: 'POST',
url: "/service1/",
data: { "Id": 1,"StringValue": "String content"
},
success: function (data) {
$('.result').html(data);
},
error: function (error) {
$('.result').html(error)
},
dataType: "json",
contentType: "application/json; charset=utf-8"
});
});
</script>
<div class="result"></div>
However fiddler is returning a 400 error telling me there is a request error. Have I done something wrong?
400 can also mean something in your service went wrong. Did you try to attach a debugger to the Rest-service?
Tried to create a .Net-console application (create the request using HttpClient) and communicate with your service?
I ran into same error, after half hour of testing I saw just some error occured in the REST-service.