ボタンのあるHTMLページがあります。そのボタンをクリックすると、REST WebサービスAPIを呼び出す必要があります。どこでもオンラインで検索してみました。全く手がかりはありません。誰かがこれについてリード/ヘッドスタートをくれますか？非常に高く評価。
回答:
執筆時点でIE11を除くすべてのブラウザーでサポートされている新しいFetch APIについて誰も言及していないことに驚いています。他の多くの例で見られるXMLHttpRequest構文を簡素化します。
APIにはさらに多くのが含まれていますが、fetch()メソッドから始めます。2つの引数を取ります。
簡単な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
}button.addEventListener('click', userAction);または<button onclick="userAction()" />
あなたの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更新）
xhttp.open("POST", "Your Rest URL Here", false);。そうしないと、xhttp.responseTextに結果が含まれません。ただし、前述のとおり、すぐに非推奨になります。
xhttp.setRequestHeader("Content-type", "application/json");" —これは嘘です。send()メソッドにJSONを渡していない。
次に、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);
}
});
});（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();Webサイトのフロントエンドに何かを配置する前に、APIの接続を開きます。これを行うには、XMLHttpRequestオブジェクトを使用します。これは、ファイルを開いてHTTPリクエストを行う方法です。
リクエスト変数を作成し、それに新しいXMLHttpRequestオブジェクトを割り当てます。次に、open（）メソッドを使用して新しい接続を開きます。引数では、リクエストのタイプをGETとして指定するとともに、APIエンドポイントのURLを指定します。リクエストが完了し、onload関数内のデータにアクセスできます。完了したら、リクエストを送信します。
//リクエスト変数を作成し、それに新しい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()通常の方法は、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>