XHTTP request from REST API
Question
I have this API
[HttpGet("data")]
public dynamic GetData(){
return context.DataTable.ToList();
}
I tried calling it on my Javascript using this snippet;
function getData(){
var xhttp = XMLHttpRequest();
xhttp.open("GET", "api/myclass/data", true);
xhttp.setRequestHeader("Content-type","application/json");
xhttp.send();
var resp = xhttp.responseText;
}
However, it only returns empty XMLHttpRequest .
I think what's wrong there is the URL. How I may able to call the API to my Javascript?
2 answers
solution1
1 2017-11-12 20:27:15
The request may take time to receive the response so you have to wait. Something like this.
function getData(){
var xhttp = XMLHttpRequest();
xhttp.open("GET", "api/myclass/data", true); //the request is asynchronous
xhttp.onreadystatechange = function(){
if(this.readyState == 4 && this.state == 200){ //**this** is xhttp
//data are received and ready to use
var resp = this.responseText;
//do whatever you want with resp but never try to **return** it from the function
}
}
xhttp.setRequestHeader("Content-type","application/json");
xhttp.send();
//var resp = xhttp.responseText; //too early ;(
}
solution2
1 ACCPTED 2017-11-12 20:36:36
Since u have not cheked the response of ur answer, i susspect there is something wrong in ur backend. But, here is a sample of functional solution:
<!DOCTYPE html> <html> <body> <h2>Using the XMLHttpRequest Object</h2> <div id="demo"> <button type="button" onclick="loadXMLDoc()">Change Content</button> </div> <script> function loadXMLDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { console.log("Status is: "+this.status); if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; } }; xhttp.open("GET", "xmlhttp_info.txt", true); xhttp.send(); } </script> </body> </html>
You van find more info here . But in the line
xhttp.open("GET", "api/myclass/data", true);
The second parameter is the address of a file in ur server. ru sure u have wrotten the correct format? what is the extension of ur data file.
I guess, both backend and front end should be reconsidered. To do it:
- Try to send a reuqest using postman to backend
- in frontend check the status of response using my answer
To make sure make it
async = falsewithxhttp.open("GET", "api/myclass/data", false);
Therefore, there wouldn't be a delay as @Alex Kudryashev pointed
Solution:
You need to first find the result of line
console.log("Status is: "+this.status);
in ur browser's console.
If u get the responseText as empty it may come because u have sent an empty string from backend,(we are not sure because u have not tested ur backend with postman) but it is crucial to know the status of response.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.