How to call a REST web service API from JavaScript?
I'm surprised nobody has mentioned the new Fetch API, supported by all browsers except IE11 at the time of writing. It simplifies the XMLHttpRequest syntax you see in many of the other examples.
The API includes a lot more, but start with the fetch()
method. It takes two arguments:
- A URL or an object representing the request.
- Optional init object containing the method, headers, body etc.
Simple GET:
const userAction = async () => {
const response = await fetch('http://example.com/movies.json');
const myJson = await response.json(); //extract JSON from the http response
// do something with myJson
}
Recreating the previous top answer, a POST:
const userAction = async () => {
const response = await fetch('http://example.com/movies.json', {
method: 'POST',
body: myBody, // string or object
headers: {
'Content-Type': 'application/json'
}
});
const myJson = await response.json(); //extract JSON from the http response
// do something with myJson
}
How to do simple REST API calls in javascript? Uncaught ReferenceError: require is not defined
This usually happens because your JavaScript environment doesn’t understand how to handle the require() function reference. The require() function is only available by default on Node.js environment.
there are several ways to get work around. You can use requireJS or browserify for this. Please check require for browsers
If you want to make a REST API call, you can use XMLHttpRequest instead of Axios
How to call RESTful web service automatically
You can do it using two ways:
(1) Traditional approach:
you can implement polling, basically calling your rest API again & again at a
certain interval; get the data & check for change
(2) Websockets(I like it more):
You can also use WebSockets, basically, web sockets can maintain a live two way communication with the server
. Reference on how to use WebSockets can be found here
https://developer.mozilla.org/en-US/docs/Web/API/WebSocket
Trying to Call a REST Web Service API from an HTML page in another project and GET an item's properties
Your $.get does not look right. Try something like this:
$.get( "http://localhost:54754/orders/" + on + "/contents",
function( data ) {
// do something here with the returned data...
// alert( data );
});
You probably did not intent to submit the form, so change from:
<input id="submitOrder" onclick="getContents()" type="submit" title="Submit" />
to something like:
<input id="submitOrder" onclick="getContents()" type="button" title="Submit" />
I did not review your server side code as the functions, etc. are not fully defined there.
How to call REST API in HTML
you'll need some Javascript here. Something like this should work:
<script type="text/javascript">
var apiUrl = 'https://pokeapi.co/api/v2/pokemon/ditto/';
fetch(apiUrl).then(response => {
return response.json();
}).then(data => {
// Work with JSON data here
console.log(data);
}).catch(err => {
// Do something for an error here
});
</script>
this code is using the fetch function ( more info here ) to make a GET request to the url contained in the apiUrl variable .
You may want to use an HTML input tag to make the Pokemon name dynamic.
Calling REST endpoint from Javascript
Thanks a lot everybody for your replies and thanks for reminding me of asynchronicity in Javascript, which I had totally forgotten about. I managed to make this work by using axios library, which I read integrates nicely with Vue.js, which I am intending to use. Here is the solution that worked for me:
<script>
import axios from "axios";
export default {
name: 'HelloWorld',
data () {
return {
msg: ''
}
},
mounted() {
axios({method: "GET", "url": "https://api.spotify.com/v1/search?q=Muse&type=track"}).then(result => {
this.msg = result.data.tracks.items[0].name
}, error => {
console.error(error);
});
}
}
</script>
Related Topics
Pure JavaScript Method to Wrap Content in a Div
Intercept a Form Submit in JavaScript and Prevent Normal Submission
Pass Mouse Events Through Absolutely-Positioned Element
JavaScript Trick For 'Paste as Plain Text' in Execcommand
Angularjs to Output Plain Text Instead of Html
Find All CSS Rules That Apply to an Element
How to Pause and Resume Css3 Animation Using JavaScript
Event Binding on Dynamically Created Elements
For-Each Over an Array in JavaScript
How to Select Multiple Files With ≪Input Type="File"≫
How to Use Sockets in JavaScript\Html
Changing Nav-Bar Color After Scrolling
How to Make an HTML Text Box Show a Hint When Empty
How to Save a Base64 Image to User'S Disk Using JavaScript
Only Detect Click Event on Pseudo-Element
Changing Width Property of a :Before CSS Selector Using Jquery