POST（HTMLのカスタムヘッダー付き）リクエストの応答を取得し、フロントエンドページの変数として使用する

グラフを埋め込むWebページを作成する必要があります。POST（HTMLのカスタムヘッダー付き）リクエストの応答を取得し、フロントエンドページの変数として使用する

<html> 
<head> 
<script language="JavaScript" type="text/javascript"> 
function makeFrame() { 
ChartToken = "XXXXXXX"; 
ifrm = document.createElement("IFRAME"); 
ifrm.setAttribute("src", "https://url.com/charts/"+ ChartToken +"#/embedded"); 
ifrm.style.width = 640+"px"; 
ifrm.style.height = 480+"px"; 
document.body.appendChild(ifrm); 
} 
</script> 
</head> 
<body> 
<p><a href="#" onMouseDown="makeFrame()">GO! </a></p> 
</body> 
</html>

私は手動でこれが動作している正しい文字列でChartTokenを設定した場合：

私が書いたページには、以下です。ただし、ChartTokenの値はPOSTリクエストを介して取得する必要があります。

POST要求がバックエンドサーバーに送られるべきだと言われました。しかし、私はバックエンドサーバーでの書き方とPOSTリクエストの書き方を知らない。また、実際にバックエンドで記述する必要があるかどうか、または上記のフロントエンドページでPOSTリクエストを行うことができるかどうかはわかりません。

現在ChartTokenを入手するために、私はAdvanced RESTクライアントを使用しています。高度なRESTクライアントがURLの値をフィールドに私が記入：RAWヘッダーの

https://url.com/1/embeddedCharts

：

Authorization: Token YYYYYYYY 
Content-Type: application/json

とRAWペイロード用：

{"apiToken": "YYYYYYYY", 
"chartId": "ZZZZZZZ"}

（ことに気付きますAthorization：トークンとapiTokenは同じです）、私は応答として受け取ります：

{ 
"token": "KKKKKKK" 
}

これは、グラフを埋め込むためにChartTokenに入れた値です。ただし、この値は1度しか使用できず、各ページの読み込み時にChartTokenに入れるために新しいトークンを取得する必要があります。

は、したがって、私は（私はChartTokenにトークンの値を送信するために使用したいという）トークンを取得するためにページを書きました：

<html lang="en"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<title>Title Goes Here</title> 
</head> 
<body> 
<p>This is my web page</p> 
<form action="https://url.com/1/embeddedCharts" method="post" enctype="application/json"> 
<input name="apiToken" value="YYYYYYYY"> 
<input name="chartId" value="ZZZZZZZ"> 
<button>Send my data</button> 
</form> 
</body> 
</html>

しかし、このページは動作しません。 RAWヘッダーを送信しない可能性があります：

Authorization: Token YYYYYYYY

高度なRESTクライアントと同じですか？私はカスタムヘッダーを定義することができないので、これはHTMLでは不可能であることを他のフォーラムで読んでいます。これは本当ですか？

それとも

enctype="application/json"

は、実際に私はアドバンスRESTクライアントを使用

Content-Type: application/json

を置き換えるものではありませんので、？

このページをバックエンドサーバーに書き込んでいない可能性がありますか？どうすればいい？

だから、私の問題を解決するには、知っているだろう：

1）チャートのトークンを取得するためにPOSTリクエストを作成する方法。

2）バックエンドにある場合、要求を書き込む場所。

3）フロントエンドページに値を渡す方法。本質的にはChartTokenです。

私はフロントエンドページ用に少しのHTMLしか書けないと思っています。ウェブアーキテクチャについてはあまりよく分かりません。私にとって最も簡単なのは、すべての兆候の完全な例を得ることです。

ありがとうございます。

出典

2016-06-26 Stack101

HTMLフォームの代わりに[AJAX]（https://www.sitepoint.com/use-jquerys-ajax-function/）を使用してリクエストするのはなぜですか？ – SilverlightFox

AJAXで書く方法がわかりません。私が言ったように、私はフロントエンドページのための少しのhtmlしか知りません。 – Stack101

私は、HTMLフロントエンドページ内jqueryのスクリプトからのPOSTリクエストを作成する方法を見つけた：

<!DOCTYPE html> 
 

 
<html lang="en"> 
 
    <head> 
 
     <meta charset="utf-8" /> 
 
     <title></title> 
 
     
 
     <script src="//code.jquery.com/jquery-1.12.0.min.js"></script> 
 
     <script> 
 

 
      var reportId = "XXXXXXXXXXXX", // Required 
 
       apiToken = "YYYYYYYYYY", // Required 
 

 
       containerId = "embeddedReport", // Required 
 

 
       documentId = "", // Optional 
 
       dateRange = {"mode": "LAST_7_DAYS"}, // Optional 
 
       slicer = { 
 
         
 
\t \t \t \t }, // Optional 
 

 
       // Report size 
 
       width = 1000, 
 
       height = 400, 
 

 
       // leave that variable NULL 
 
       ReportToken = null; 
 

 
      
 

 
      function getReportTokenJS(apiToken, reportId, width, height, containerId) { 
 
       var payLoadData = createPayLoadData(); 
 

 
       if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari 
 
        xmlhttp = new XMLHttpRequest(); 
 
       } 
 
       else {// code for IE6, IE5 
 
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
 
       } 
 
       xmlhttp.onreadystatechange = function() { 
 
        if (xmlhttp.readyState != 4) { 
 

 
        } 
 
        if (xmlhttp.readyState == 4 && xmlhttp.status >= 200 && xmlhttp.status < 300) { 
 
         var data = JSON.parse(xmlhttp.responseText); 
 
         ReportToken = data.token; 
 
         var iframe = document.createElement('iframe'); 
 
         iframe.style.width = width + 'px'; 
 
         iframe.style.height = height + 'px'; 
 
         iframe.src = 'https://app.somepage.com/reports/' + ReportToken; 
 
         document.getElementById(containerId).appendChild(iframe); 
 
        } 
 
       } 
 
       xmlhttp.open("POST", "https://app.somepage.com/1/embeddedReports", true); 
 
       xmlhttp.setRequestHeader("Content-type", "application/json"); 
 
       xmlhttp.send(JSON.stringify(payLoadData)); 
 

 

 
      }; 
 

 
      function createPayLoadData() { 
 
       if (apiToken == "" || apiToken == null || reportId == "" || reportId == null) { 
 
        console.log("ERROR: apiToken Or reportId is missing"); 
 
        return false; 
 
       } else { 
 
        var payLoadData = {}; 
 
        payLoadData.apiToken = apiToken; 
 
        payLoadData.reportId = reportId; 
 
       } 
 

 
       if (documentId != "" && documentId != null) { 
 
        payLoadData.documentId = documentId; 
 
       } 
 

 
       if (Object.keys(dateRange).length > 0) { 
 
        payLoadData.dateRange = dateRange; 
 
       } 
 

 
       if (Object.keys(slicer).length > 0) { 
 
        payLoadData.slicer = slicer; 
 
       } 
 

 
       return payLoadData; 
 
      }; 
 
     </script> 
 
    </head> 
 
    <body> 
 

 
    <button type="button" onclick="getReportTokenJS(apiToken, reportId, width, height, containerId);">generate embedded report</button> 
 
     <div id="embeddedReport"></div> 
 

 
    
 

 
    </body> 
 
\t 
 
</html>

さて、私はのために値を渡す方法を知っておく必要があるだろうreportIdとapiTokenをjqueryスクリプト変数に追加します。私はこの例をどこかに見つけたので、jqueryでプログラミングする方法は本当に分かりません。私がここで提供しているコードを修正している完全な実例は、どうやってやるのかを示すだけの方法です。

出典

2016-06-27 22:19:53 Stack101

POST（HTMLのカスタムヘッダー付き）リクエストの応答を取得し、フロントエンドページの変数として使用する

答えて

関連する問題