JavaScript에서 REST 웹 서비스 API를 호출하려면 어떻게 해야 합니까?
저는 버튼이 있는 HTML 페이지가 있습니다.이 버튼을 클릭하면 REST Web Service API를 호출해야 합니다.나는 온라인을 검색해 보았다.단서가 전혀 없어.누가 이 문제에 대한 리드/리더 스타트 좀 해줄래요?대단히 감사합니다.
IE11을 제외한 모든 브라우저에서 지원되는 새로운 Fetch API에 대해 기술한 사람이 없는 것이 놀랍습니다.다른 많은 예에서 볼 수 있는 XMLHttpRequest 구문을 단순화합니다.
API에는 더 많은 기능이 포함되어 있지만 먼저fetch()방법.여기에는 다음 두 가지 인수가 필요합니다.
- 요청을 나타내는 URL 또는 개체.
- 메서드, 헤더, 본문 등을 포함하는 옵션의 init 오브젝트.
간단한 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
}
이전 상위 답변인 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
}
Javascript:
function UserAction() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert(this.responseText);
}
};
xhttp.open("POST", "Your Rest URL Here", true);
xhttp.setRequestHeader("Content-type", "application/json");
xhttp.send("Your JSON Data Here");
}
버튼 조작:
<button type="submit" onclick="UserAction()">Search</button>
자세한 내용은 다음 링크를 참조하십시오(2017/01/11 업데이트).
다음은 json을 사용한 인증을 사용한 다른 Javascript REST API 호출입니다.
<script type="text/javascript" language="javascript">
function send()
{
var urlvariable;
urlvariable = "text";
var ItemJSON;
ItemJSON = '[ { "Id": 1, "ProductID": "1", "Quantity": 1, }, { "Id": 1, "ProductID": "2", "Quantity": 2, }]';
URL = "https://testrestapi.com/additems?var=" + urlvariable; //Your URL
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = callbackFunction(xmlhttp);
xmlhttp.open("POST", URL, false);
xmlhttp.setRequestHeader("Content-Type", "application/json");
xmlhttp.setRequestHeader('Authorization', 'Basic ' + window.btoa('apiusername:apiuserpassword')); //in prod, you should encrypt user name and password and provide encrypted keys here instead
xmlhttp.onreadystatechange = callbackFunction(xmlhttp);
xmlhttp.send(ItemJSON);
alert(xmlhttp.responseText);
document.getElementById("div").innerHTML = xmlhttp.statusText + ":" + xmlhttp.status + "<BR><textarea rows='100' cols='100'>" + xmlhttp.responseText + "</textarea>";
}
function callbackFunction(xmlhttp)
{
//alert(xmlhttp.responseXML);
}
</script>
<html>
<body id='bod'><button type="submit" onclick="javascript:send()">call</button>
<div id='div'>
</div></body>
</html>
$("button").on("click",function(){
//console.log("hii");
$.ajax({
headers:{
"key":"your key",
"Accept":"application/json",//depends on your api
"Content-type":"application/x-www-form-urlencoded"//depends on your api
}, url:"url you need",
success:function(response){
var r=JSON.parse(response);
$("#main").html(r.base);
}
});
});
대기할 if(this.readyState == 4 & this.status == 200)를 추가하는 것이 좋다고 생각합니다.
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Typical action to be performed when the document is ready:
var response = xhttp.responseText;
console.log("ok"+response);
}
};
xhttp.open("GET", "your url", true);
xhttp.send();
웹 사이트의 프런트 엔드에 무언가를 넣기 전에 API 연결을 열어 보겠습니다.XMLHttpRequest 객체를 사용하여 파일을 열고 HTTP 요청을 작성합니다.
요청 변수를 만들고 새 XMLHttpRequest 개체를 할당합니다.그런 다음 open() 메서드를 사용하여 새로운 연결을 엽니다.인수에는 요청 유형과 API 엔드포인트의 URL을 GET로 지정합니다.요청이 완료되고 온로드 기능 내의 데이터에 액세스할 수 있습니다.완료되면 요청서를 보내드리겠습니다.
// 요청 변수를 만들고 새 XMLHttpRequest 개체를 할당합니다. var request = new XMLHttpRequest()
// Open a new connection, using the GET request on the URL endpoint
request.open('GET', 'https://ghibliapi.herokuapp.com/films', true)
request.onload = function () {
// Begin accessing JSON data here
}
}
// Send request
request.send()
만약 그것이 도움이 된다면, 외부 라이브러리가 괜찮다면, REST 호출에 대처하기 위한 매우 깨끗한 API와 풍부한 문서를 가진 Axios를 보증할 수 있습니다.다음은 예를 제시하겠습니다.
const axios = require('axios');
axios.get('/user?ID=12345')
.then(function (response) {
// handle success
console.log(response);
});
의심할 여지 없이, 가장 간단한 방법은 원하는 REST 방법을 지정하는 HTML의 보이지 않는 FORM 요소를 사용합니다.그런 다음 인수를 에 삽입할 수 있습니다.input type=hiddenJavaScript를 사용하는 값 필드 및 폼은 클릭 이벤트 청취자 버튼 또는 클릭 이벤트 한 줄에서 제출할 수 있습니다.다음으로 REST API가 REST.php 파일에 있다고 가정하는 예를 나타냅니다.
<body>
<h2>REST-test</h2>
<input type=button onclick="document.getElementById('a').submit();"
value="Do It">
<form id=a action="REST.php" method=post>
<input type=hidden name="arg" value="val">
</form>
</body>
이 예에서는 페이지를 REST.php 페이지의 출력으로 치환합니다.현재 페이지에 가시적인 영향을 주지 않고 API를 호출하고 싶다면 어떻게 수정해야 할지 잘 모르겠습니다.하지만 그것은 확실히 간단하다.
일반적인 방법은 PHP와 ajax를 사용하는 것입니다.단, 고객님의 요구는 아래와 같습니다.
<body>
https://www.google.com/controller/Add/2/2<br>
https://www.google.com/controller/Sub/5/2<br>
https://www.google.com/controller/Multi/3/2<br><br>
<input type="text" id="url" placeholder="RESTful URL" />
<input type="button" id="sub" value="Answer" />
<p>
<div id="display"></div>
</body>
<script type="text/javascript">
document.getElementById('sub').onclick = function(){
var url = document.getElementById('url').value;
var controller = null;
var method = null;
var parm = [];
//validating URLs
function URLValidation(url){
if (url.indexOf("http://") == 0 || url.indexOf("https://") == 0) {
var x = url.split('/');
controller = x[3];
method = x[4];
parm[0] = x[5];
parm[1] = x[6];
}
}
//Calculations
function Add(a,b){
return Number(a)+ Number(b);
}
function Sub(a,b){
return Number(a)/Number(b);
}
function Multi(a,b){
return Number(a)*Number(b);
}
//JSON Response
function ResponseRequest(status,res){
var res = {status: status, response: res};
document.getElementById('display').innerHTML = JSON.stringify(res);
}
//Process
function ProcessRequest(){
if(method=="Add"){
ResponseRequest("200",Add(parm[0],parm[1]));
}else if(method=="Sub"){
ResponseRequest("200",Sub(parm[0],parm[1]));
}else if(method=="Multi"){
ResponseRequest("200",Multi(parm[0],parm[1]));
}else {
ResponseRequest("404","Not Found");
}
}
URLValidation(url);
ProcessRequest();
};
</script>
언급URL : https://stackoverflow.com/questions/36975619/how-to-call-a-rest-web-service-api-from-javascript
'programing' 카테고리의 다른 글
| SLF4J/로그백에서 마커를 사용하는 경우의 베스트프랙티스 (0) | 2022.10.11 |
|---|---|
| ';' 구분 기호를 사용하여 행에서 열로의 Mysql (0) | 2022.10.11 |
| SQLite3를 MySQL로 빠르게 마이그레이션하는 방법 (0) | 2022.10.02 |
| 각 비트에 대해 0 또는 1의 확률로 의사 랜덤 비트를 생성하는 빠른 방법 (0) | 2022.10.02 |
| Firebase 및 Firebase를 갖춘 Nuxt 미들웨어UI: 오류: 네비게이션 가드를 통해 "/anything"에서 "/login"으로 이동할 때 방향 수정됨 (0) | 2022.10.02 |