※以下の情報は2019/01/22現在では古い情報となっており、URLを/pleasanter/api/items/xxxxの形式にすることで「content-type」が"aplication/json"でも動作するようになっております。
詳しくはプリザンターマニュアルをご確認ください!(今後、新しく記事を作成する予定です)
API機能:レコード操作:複数取得 · Implem/Implem.Pleasanter Wiki · GitHub
-----------------------------------------------------------
こんにちわ。リーデックス小川です。
ついに解決しました!クライアントのJavaScriptからプリザンターへの投稿ができるようになりました。ポイントは「content-type」の設定でした。では、早速書いて行きたいと思います。
HTMLソース
今回利用したソースは下記となります。ロジックに大きく関係しない多少の変更をしましたが、前回のものとほとんど一緒です。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTMLからプリザンターのAPIを利用してデータを登録する</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: "APKキーを設定", Title: $("#value1").val(), CompletionTime: "2018/3/31" }; alert(JSON.stringify(JSONdata)); $.ajax({ type : method_name, url : url, data : JSON.stringify(JSONdata), //contentType: 'application/json', contentType: 'application/x-www-form-urlencoded', 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/pleasanter/api_items/278/create"><br/> <p>Method: <input type="text" id="method_name" name="method_name" size="100" value="POST"><br/> <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>
ここで、Ajaxの設定「 contentType 」を「 'application/x-www-form-urlencoded'」に設定するすることが必要でした。 GitHubの下記情報をもとにさせてもらいました。有難うございました。
PowerShellやPHPのCurlなどのデフォルトは上記の設定になっているようです(未確認)。詳細は下記をごらんください。
application/x-www-form-urlencoded
application/x-www-form-urlencoded ‐ 通信用語の基礎知識
ブラウザでの表示はこのようになります。
実行してみる
プリザンターのデフォルトの一覧表示です。
ブラウザから登録してみます。
↓
↓
どうやら上手く行ったようです。プリザンター側を見てみましょう。
↓
ちゃんと入っているみたいですね。これにてAPIについての試してみた、は終わりとさせてもらいます。
注意!
APIKeyがさらされるので、本来はこのような使い方はしてはいけません。必ずサーバーサイドのプログラムで実装してください。弊社のセミナーでは、HTML→PHP→プリザンター→Slackまでの一連のながれのデモを行っておりますので、タイミングが合えばぜひご来場ください。
注意2!
APIを利用する際にHTTPSでも通信は可能のようですが、開発用のオレオレ証明書だとエラーが発生するようです。イメージ情報システム様のブログに記載がありました。