新機能「API」をさっくりと試してみた②'~PHPでJSONをPOSTしてみた。

f:id:h-ogawa-reedex-co-jp:20180203235359p:plain

 

こんにちわ。リーデックス小川です。


前回は、新機能「API」をHTMLのJqueryからAjaxでPOSTするサンプルを作成しましたが、上手く行きませんでした。どこが問題になるかの切り分けができていません。そこで、サーバー側のデータをPHPで取得してみて、きちんとJSON形式でPOSTされているかを確認してみました。VisualStudioでデバックすればよいのですが、準備に時間がかかりそうだったので、今ある知識でもう少しあがいてみました。

 HTMLソース

テストで使用するHTMLソースを記載します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTMLファイルからPOSTでJSONデータを送信する</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<script type="text/javascript">
    $(function(){
        $("#response").html("Response Values");

        $("#button").click( function(){
            var url = $("#url_post").val();
            var method_name = $("#method_name").val();

                var JSONdata = {
ApiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
Title: $("#value1").val(),
CompletionTime: "2018/3/31"
};

            alert(JSON.stringify(JSONdata));

            $.ajax({
                type : method_name,
                url : url,
                data : JSON.stringify(JSONdata),
                contentType: 'application/json',
                dataType : 'json',
                scriptCharset: 'utf-8',
                success : function(data) {

                    // Success
                    alert("success");
                    alert(JSON.stringify(data));
                    $("#response").html(JSON.stringify(data));
                },
                error : function(data) {

                    // Error
                    alert("error");
                    alert(JSON.stringify(data));
                    $("#response").html(JSON.stringify(data));
                }
            });
        })
    })
</script>

</head>
<body>
    <h1>HTMLファイルからPOSTでJSONデータを送信する</h1>
    <p>URL: <input type="text" id="url_post" name="url" size="100" value="http://localhost/index.php"><br/>
    <p>Method: <input type="text" id="method_name" name="method_name" size="100" value="POST"></p>
    <p>Title <input type="text" id="value1" size="30" value="値1"></p>
    <p><button id="button" type="button">submit</button></p>
    <textarea id="response" cols=120 rows=10 disabled></textarea>
</body>
</html>



ブラウザの見た目は下記となります。

 

f:id:h-ogawa-reedex-co-jp:20180203202251p:plain

 

 

PHPのソース確認

PHP側のソースを確認してみます。

<?PHP
header("Content-Type: application/json; charset=utf-8");
echo json_encode(file_get_contents('php://input'));
exit();

 

 

実は、クライアントからJSON形式(application/json)で取得する場合、3行目のfile_get_contents('php://input') でPOST値を取得する必要があります。私はこれに気付かず、$_POSTで取得しようとしていたのですが、データがまったく取れず(空データ)、試行錯誤していました。AjaxのtypeをGETに変更し、$_GETとしていたら取得できていたので数時間悩んでいたのですが、下記サイトを発見し、無事に取得することができました。 

takuya-1st.hatenablog.jp

 

 

POSTして値を取得してみる。

それでは、実際に実行してみたいと思います。デフォルトのまま、Submitボタンをクリックしてみます。すると。。。

f:id:h-ogawa-reedex-co-jp:20180420161348p:plain

 

f:id:h-ogawa-reedex-co-jp:20180203233455p:plain

f:id:h-ogawa-reedex-co-jp:20180420161517p:plain

f:id:h-ogawa-reedex-co-jp:20180420161625p:plain

 

無事に、JSONデータがとれました。これで、JSON形式でPOSTされていることがわかりました。ということで、URL部分をプリザンターのAPIのURLに変更し、実行してみます。

 

プリザンターにPOSTしてみる。

それでは、URLを変更し、POSTして見ます。

f:id:h-ogawa-reedex-co-jp:20180203234040p:plain

 

 

URLを変更し、submitボタンをクリックしてみると・・・(途中の画面は省略します)

f:id:h-ogawa-reedex-co-jp:20180203234307p:plain

 

「認証できませんでした」のエラー文言が。前回とエラー文言が違うようです。前回は、titleの値が入らないという現象でした。検証した結果、既にプリザンターにログイン済みのブラウザを利用していると、そのセッションを利用しているため認証エラーとならなかったようです。

今回のエラーは、APIキーが認証されていないということでしたので、API機構が外部からのAPI接続に対応していない、もしくは、まだJSON形式で値がわたっていない(もしくはその他の理由)が考えられます。

 

 

残念ながら、今回も上手くAPIが使えませんでした。いよいよVisualStudioでデバッグするしかなさそうです。APIの利用有無は大きな違いがありますので、解決するまで折って行きたいと思います。

 

追記:この問題も解決しています。近々ブログにて完成版を公開いたします。