I wish to use echoprint - http://echoprint.me/start - which allows me to send an mp3 file locally from my computer in a post request, and returns a json object including the song's details from their server.
I am attempting to make this post request using jquery in order to allow me retrieve the json object containing the song details, which will then allow me view this in my browser's console.
The echoprint website - http://developer.echonest.com/docs/v4/track.html - explains how to make this post request using curl. The following code works in the command line. This returns a json object, however this gets returned in the terminal.
curl -F "api_key=#############" -F "filetype=mp3" -F "track=#tambourineMan.mp3" "http://developer.echonest.com/api/v4/track/upload"
I have read the curl docs http://curl.haxx.se/docs/httpscripting.html#POST to try and understand where the correlation exists between the curl and jquery, but unfortunately I am having difficulties relating the two and understanding what -F means.
My aim is to make this post request using jquery so I can make the same request as outlined using curl above, and retrieve the json data in the browser's console.
From a previous question I asked on here I have tried to adopt the logic from that answer and used the following code, however this returns an error that the file cannot be encoded. I have tried it with and without the content type specified, but both methods fail.
$.post("http://developer.echonest.com/api/v4/track/upload", {
"api_key":"##################",
"track":"#tambourineMan.mp3",
"filetype":"mp3",
"contentType:" "application/octet-stream"
},
function( data ) {
console.log(data)
},
"JSON" );
There are instructions here http://developer.echonest.com/docs/v4/track.html but they only explain how to do this using curl. If anyone could shed any light on this it would be greatly appreciated. Pardon my ignorance in advance.
cURL uses the # prefix to mean "the contents of the named file", in your AJAX request you are sending #tambourineMan.mp3 as a literal string.
One easy to way to accomplish your task is to put a file input in your document and tell jQuery to use the data from that file:
var file = document.getElementById('myFileInput').files[0];
$.post("http://developer.echonest.com/api/v4/track/upload", {
"api_key":"##################",
"track":file,
"filetype":"mp3",
"contentType:" "application/octet-stream"
});
Take a look at the FileReader API and at this article about sending and receiving binary data in a XMLHttpRequest
Related
has someone any ideas, how can i make a request with UI Automation and JS with UIAHost. An example is welcome with POST as method, some data and json as datatyp.
Thank
The easiest way to make an HTTP request via UIAutomation would be to make a cURL request via the shell using performTaskWithPathArgumentsTimeout.
If you are making a POST request with a lot of data, you may want the shell command to read the data from disk (instead of specifying it all on the command line). Our Illuminator project provides a function that lets you write arbitrarily large files to disk from within UIAutomation.
I have been playing around with the jQuery library the last week or two.
Very handy! I am now playing with the AJAX requests to retrieve things such as the weather, current downloads and more, which have been going well so far!
I have now tried to connect up to my ISP to get my current data usage (peak, off peak etc).
When I use Chrome, I can manually type the variables into the URL and have the required JSON code show in the browser. The issue is, that it seems to return text/html instead of application/json.
When you go into developer tools, it shows text/html. This make it difficult for me to retrieve the data from my home server using AJAX and JSONP. See here for a failed query (but you can still see the text/html output, which is in a JSON format! Failed JSON Query on ISP
My question is, how could I get this data from the server URL, then make it into JSON that jQuery can read?
When I try the .load , $.get functions I run into Cross Origin Issues...
EDIT:Here is the PDF documentation for the API (Download at the bottom of the page)
Notice that I need to append certain values (user / pass / token). My ultimate aim is to have my JS read these values and store them.
The issue is, that it seems to return text/html instead of application/json.
That's a serverside issue. Go and file a bug report.
This make it difficult for me to retrieve the data
Not by itself. You should be able to override the settings how responses are parsed, e.g. in jQuery by using the datatype parameter.
using AJAX and JSONP
Notice that you cannot use JSONP, as it is not supported by that API (judging from the docs and a simple ?callback=test try). If you want support for that, file a bug report against the service provider.
When I try the .load, $.get functions I run into Cross Origin Issues...
Yes. They don't send CORS headers either. I suspect that this API is only used internally, and by devices that are not subject to a same-origin policy.
how could I get this data from the server URL, then make it into JSON that jQuery can read?
Use a proxy on your own server (that runs in the same domain as your app). It can also fix that content-type header.
For more details see also Ways to circumvent the same-origin policy, though most of the methods require cooperation of the service provider (to implement serverside features).
If i understand you correctly You ask for a certain value and it gives you a string. For most API's in the world they send a string that you have to parse into JSON or some language code. I would suggest looking at Parsing JSON Strings link. It explains how to take well formated strings and parse them into JSON readable objects.
var obj = jQuery.parseJSON( '{ "name": "John" }' );
alert( obj.name === "John" );
if you go on further and start using php take a look that Parsing JSON Strings with PHP
EDIT:
use .done() method to grab text from other pages after AJAX call.
$.ajax(...).done(function(html){
//do what you want with the html from the other page
var object = $.parseJSON(html)
}
I have the web application where the frontend is in ExtJS and backend is in PHP.
The forms are build in Extjs and its making PUT and POST request to server for saving data.
The josn data is posted like this
{"id":"101","description":"user1","active":true}
Now for debugging i would like to directly call this URL in browser so that i can use var_dump for helpful messages.
As the request is AJAX by Extjs , so its very difficult to see messages through firebug.
Is there any way to make this request from browser and see response in rendred html.
I don't want to make form.
If you are using Google Chrome you can use the Postman Extension. It allows you to send pretty much any type of data and see the results.
For firefox you can use restclient plugin. Its also very easy to use, and userfriendly.
Also, if you know curl, you can do it programatically from PHP.
If the requests being made through a store in extjs, you can use Ext.getStore to find the store and create global variable. Then you could manipulate this global variable in the console.
i.e. write following in console
var s = Ext.getStore('myStore')
then after firing you can now manipulate this global in console
s.proxy.extraParams.myChangedValue = 'newValue'
s.load()
The response from the server will be in the network panel in chrome browser or use firebug extension for firefox. You can also add a callback or listener to the load event to console.log() what was parsed by the framework.
Another alternative is the Chrome's Advanced REST Client App. It isn't as powerful as the postman extension but I think it is a little bit easier to use.
If you are on good terms with curl you can just use it directly with -d (--data) option like that:
curl -X GET -H "Content-Type: application/json" -d #data.json localhost:8080/path/to.json
Where data.json is a JSON file.
Anyway, representation of an extension might be more intuitive and readable.
I'm currently trying to do an auto-suggestion exercise where the JSON file is located on a server, and I'm not sure if I'm understanding the webdev terminology correctly. In one of the requirements it says:
"On the keyup [since there's an input field], issue a GET to the server with the value of input key and the name of a callback function as parameters."
I've issued a GET to a json file on a server before, but I'm confused how one can issue a GET to the file on the server with a key as a parameter for a JSON file. Is this even possible?
Web Terminologoy: You don't issue a GET Request for a file, you issue a GET request for a ressource identified by a URL
the HTTP request line might look like this:
GET /some/thing HTTP/1.0
parameters can be part of the URL, for example:
GET /some/thing?color=red&number=3 HTTP/1.0
Learn everything about URLs in the RFC http://www.ietf.org/rfc/rfc3986.txt
Now maybe in your first example the ressource /some/thing.json points to really was a static json file. But for this exercise, you'll probably need a program running on the webserver, and outputting json.
I am attempting to build a reader for Tiny Tiny RSS and am stuck almost at square one. I'm setting the app up to use ajax via prototype.js (1.6.1) and am attempting a simple login to the app to retrieve a key.
Here's what I have so far:
new Ajax.Request(Api.BASE_URL, {
method: "get",
parameters: {"op": "login", "user": "user", "password": "password"},
onSuccess: authSuccess,
onFailure: failure
})
Where Api.BASE_URL is defined as "http://tt-rss.example.com/api/"
When I try to log in I get the error response "NOT_LOGGED_IN", which appears to indicate that the api either does not recognize the op call that I am using, or the parameters are wrong, or something.
What is particularly odd is that this should be equivalent to the CURL command:
curl -d '{"op":"login","user":"user","password":"password"}' http://tt-rss.example.com/api/
Which works properly. I get the feeling that I am missing something incredibly simple, but am not sure what it is. Any help would be much appreciated.
In addition to the get vs post error, it turns out that the problem was that I was trying to pass a complex json object using the wrong ajax option.
I tested with a simpler function call (isloggedin), so my json object was defined as:
parameters: {"op": "isloggedin"},
When I used the "parameters" ajax option, the request was sending raw data in the form of:
op=isloggedin&_=
Which was getting rejected.
On the other hand, the raw data from cURL looked like:
{"op":"isloggedin"}
Which was working.
This post put me on the right track. I needed to use "postBody" instead of "parameters" to send the data properly. My final command wound up looking like this:
postBody: '{"op": "isloggedin"}',
And it worked. Also, apparently in this case type of quotes does matter. If I used single quotes on the outside, it worked. If I used double quotes on the outside if failed.
Your curl command sends data in a POST request, whereas the Ajax call uses the GET method. According to the tt-rss API documentation, older versions supported both GET and POST, but now data must be encoded using JSON in HTTP POST data.