How to Debug ajax REST calls (in general) - javascript

I have an cURL call that works and I have converted it to an ajax call. The ajax call is failing. How do I get something to return from the call? There should be a dictionary [cURL call returns a dictionary].
How do I know what is failing in my call? I don't know how to proceed in debugging it.
Thanks
curl -v -X PUT -H "Content-Type: application/json" -H "Accept: application/json" -X PUT --user user:pass https://my.address.for/this/url -d "{\"name\": \"Marcus0.3\",\"start\": 500000,\"end\": 1361640526000}"
$.ajax({
type: 'put',
url: 'https://my.address.for/this/url',
dataType: 'json',
async: false,
username: 'user',
password: 'pass',
data: {
"name": "Marcus0.3",
"start": 500000,
"end": 1361640526000
},
success: function(){alert('DONE!');},
error: function(){alert('fail');},
}).responseText;
I keep getting 'fail' responses

If you type F12 it will open up chrome dev tools, then click on the network tab.
You will see all requests, including ajax requests as they happen. You can click on the line item "name" field for full info about the request and response, similar to cURL verbose mode

You can use Firefox with firebug to get the exact error message.Else do like this
error:function(error){alert(error)}

Related

Creating a task in Asana with JS (fail) and CURL (work)

I am writing a quotation system for myself.
I have this web page for quotations, which does:
a) send an email to the customer (done) with the quoted items
b) create a record inside a google spreadsheet (done)
c) create a task in asana (fail)
For the last 2 days I have been surfing and reading all I can find, but the solution skips from my mind.
This is the CURL code, which works just fine:
curl -H "Authorization: Bearer 0/7alotofnumbers" \
https://app.asana.com/api/1.0/tasks \
-d "projects=83694179XXXXXX" \
-d "tags[0]=269280227XXXXXX" \
-d "assignee=sales#atmysite.com.mx" \
-d "due_on=2017-02-09" \
-d "name=testing with curl" \
-d "notes=it works just as expected" \
-d "followers[0]=myself#atmysite.com.mx"
Now, I translated the CURL command that WORKS into asanataskcreate.coffee:
$.ajax
url: 'https://app.asana.com/api/1.0/tasks'
beforeSend: (xhr) ->
xhr.setRequestHeader 'Authorization', 'Bearer 0/7alotofnumbers'
return
contentType: 'application/json'
method: 'get'
data:
projects: [ 83694179XXXXXX ]
tags: [ 269280227XXXXXX ]
assignee: 'sales#atmysite.com.mx'
due_on: '2017-02-09'
name: 'testing with js ajax'
notes: 'it does not work'
followers: [ 'myself#atmysite.com.mx' ]
which turns into asanataskcreate.js:
$.ajax({
url: 'https://app.asana.com/api/1.0/tasks',
beforeSend: function(xhr) {
xhr.setRequestHeader('Authorization', 'Bearer 0/7alotofnumbers');
},
contentType: 'application/json',
method: 'get',
data: {
projects: [83694179XXXXXX],
tags: [269280227XXXXXX],
assignee: 'sales#atmysite.com.mx',
due_on: '2017-02-28',
name: 'testing with js ajax',
notes: 'it does not work',
followers: ['myself#atmysite.com.mx']
}
});
And, FAILS :(
Ok, I have tried:
a) method: 'post' and 'get'
b) place, remove the '[]' at projects, tags and followers
With the assistance of Chrome devtools in the 'console' I get the following message:
Failed to load resource: the server responded with a status of 400 (Bad Request)
and
XMLHttpRequest cannot load https://app.asana.com/api/1.0/tasks?projects%5B%5D=836941797XXXXXX&tags%5B%5…&notes=it+does+not+work&followers%5B%5D=myself%40atmysite.com.mx. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://atmysite.com.mx' is therefore not allowed access. The response had HTTP status code 400.
Now, in DevTools, when checking the XHR response from asana, this is what I get:
message: "You should specify one of workspace, project, tag, section"
As you can see from the code, there is a project id defined, but in JS fails and in curl works.
Analyzing why 'projects' in curl works and in ajax fails, the difference is:
curl: projects=83694179XXXXXX
js ajax: projects%5B%5D=836941797XXXXXX ==> projects[]=836941797XXXXXX
What I am doing wrong?
Here is an example of an Ajax request that creates an Asana task:
$.ajax({
beforeSend: function (xhr) {
xhr.setRequestHeader("Authorization", "Bearer " + "0/0123...");
},
url: "https://app.asana.com/api/1.0/tasks",
method: 'POST',
data: {projects:123456789, name: "ajax created task"},
});
It's uncertain how much of your compiled Ajax code is wrong. You definitely need to use a POST request to create a new task. The data values should not be in arrays. You likely don't need to list contentType, as the default will work. You should be able to get your code in working order based on my example.
You should also be aware that by using Ajax, you're exposing your Personal Access Token in the client. If you see anything suspicious on your account, you may want to delete that PAT.

JQuery $.post() and curl

This is what the GroupMe API (https://dev.groupme.com/docs/v3#messages_create) asks for:
$ curl -X POST -H "Content-Type: application/json" -d '{"source_guid": "frgfre", "text":"alala"}' https://api.groupme.com/v3/groups/ID/messages?token=YOUR_ACCESS_TOKEN
Please assume ID is a valid group id and the token is also valid and works. How exactly would I convert that to a $.post() request and run it from the console of a browser? Here is what I have that is not working in IE when Cross Domain is enabled and it is a trusted site:
var t = {"source_guid": "frgfre", "text":"alala"};
$.post("https://api.groupme.com/v3/groups/ID/messages?token=YOUR_ACCESS_TOKEN", t);
//I have also tried t.toString() as well but it didn't work
If that can't be converted (or what I have right now is correct), where would I run the first bit of code?
$.post posts the data in application/x-www-form-urlencoded format. If the API requires it to be JSON, you need to use $.ajax to override the default.
$.ajax({
url: "https://api.groupme.com/v3/groups/ID/messages?token=YOUR_ACCESS_TOKEN",
data: JSON.stringify(t),
contentType: 'application/json',
processData: false
});

Ajax POST corresponding to a curl POST command

I have this command:
curl -vX POST --header "Content-Type: text/json" --header "Authorization:MediaPreCompute" -d #someFile.txt someURL
someFile.txt has the data to be posted.
say it has:
{
keys: [],
observer: "someobserver",
table: "soneTable"
}
How can I do the same post request in JavaScript using Ajax. I know it would be something like this.. but how can I send the header: Authorization?
$.ajax({
type: "POST",
contentType: "application/json",
url: 'someUrl',
data: {myJsonDataInFile}
});
And also if the curl command gives me some output on terminal after completing, How can I collect that output while doing the same using Ajax.
Thanks in advance.

REST call Javascript

How do I make a call to a REST Api with Javascript (or ajax or jquery)?
curl -v -X PUT -H "Content-Type: application/json" -H "Accept: application/json" -X PUT --user user:password http://url -d "{\"name\": \"Marcus0.2\",\"start\": 1361381326000,\"end\": 1361640526000}"
I need help converting this to a useable ajax call. Thanks
$.ajax({
type: 'put',
url: 'https://this.is.my/url',
dataType: 'json',
data: { \"name\": \"Marcus0.3\" , \"start\": 500000 , \"end\": 1361640526000 }
});
This code does not work [not sure why]. Also, 'https://this.is.my/url' is just short for the longer url, which I don't want to post online
No need to add escaping to your data element... you can send a whole object and jQuery will take care of it for you.
$.ajax({
type: 'put',
url: 'https://this.is.my/url',
dataType: 'json',
data: {
name: 'Marcus0.3',
start: 500000,
end: 1361640526000
}
});

how to transform from curl command to ajax request

I have command to curl to server to get information
curl -v -H "Content-Type:application/json" -H "X-KGP-AUTH-TOKEN: a5a95c30274611e2ae10000c29bb7331" -H "X-KGP-APPID:id.kenhgiaiphap.kcloud" -H "X-KGP-APPVER:0.0.1" -H "X-KGP-DEVID:xxx" -H "X-KGP-DEVTYPE:xxx" http://test.kenhgiaiphap.vn/kprice/account/profile/get/token
I write ajax to handle this
$.ajax({
url: "http://test.kenhgiaiphap.vn/kprice/account/profile/get/token",
type: "POST",
cache: false,
dataType: 'json',
success: function() { alert('hello!'); },
error: function(html) { alert(html); },
beforeSend: setHeader
});
function setHeader(xhr) {
xhr.setRequestHeader('X-KGP-AUTH-TOKEN','a5a95c30274611e2ae10000c29bb7331');
xhr.setRequestHeader('X-KGP-APPVER', '0.0.1');
xhr.setRequestHeader('X-KGP-DEVID', 'xxx');
xhr.setRequestHeader('X-KGP-APPID','id.kenhgiaiphap.kcloud');
xhr.setRequestHeader('X-KGP-DEVTYPE', 'xxx');
}
But I have problem is
2XMLHttpRequest cannot load http://test.kenhgiaiphap.vn/kprice/account/profile/get/token. Origin http://localhost is not allowed by Access-Control-Allow-Origin.
and in request is
token
test.kenhgiaiphap.vn/kprice/account/profile/get
OPTIONS
(canceled)
Load cancelled
text/plain
jquery-1.7.2.min.js:2320
Script
156B
0B
1.15s
39ms
39ms1.11s
Thank for support!
This is a browser issue.
Change dataType to jsonp or add callback=? to your url:
http://test.kenhgiaiphap.vn/kprice/account/profile/get/token?callback=?
Future refer to https://stackoverflow.com/a/6396653/744255
You cannot use post in client site "Same Origin Policy issue".
Ou can use jsonp instead 'json' and change to get, pretty much following "Gabriel Santos" suggestion

Categories

Resources