新機能「API」をさっくりと試してみた②'～PHPでJSONをPOSTしてみた。 - オープンソースのローコード開発ツールのプリザンター（pleasanter）ブログ

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