※以下の情報は2019/01/22現在では古い情報となっており、URLを/pleasanter/api/items/xxxxの形式にすることで「content-type」が"aplication/json"でも動作するようになっております。
詳しくはプリザンターマニュアルをご確認ください!(今後、新しく記事を作成する予定です)
API機能:レコード操作:複数取得 · Implem/Implem.Pleasanter Wiki · GitHub
-----------------------------------------------------------
こんにちわ。リーデックス小川です。
ついに解決しました!クライアントのJavaScriptからプリザンターへの投稿ができるようになりました。ポイントは「content-type」の設定でした。では、早速書いて行きたいと思います。
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/x-www-form-urlencoded',
dataType : 'json',
scriptCharset: 'utf-8',
success : function(data) {
alert("success");
alert(JSON.stringify(data));
$("#response").html(JSON.stringify(data));
},
error : function(data) {
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の下記情報をもとにさせてもらいました。有難うございました。
github.com
PowerShellやPHPのCurlなどのデフォルトは上記の設定になっているようです(未確認)。詳細は下記をごらんください。
application/x-www-form-urlencoded
application/x-www-form-urlencoded ‐ 通信用語の基礎知識
ブラウザでの表示はこのようになります。
実行してみる
プリザンターのデフォルトの一覧表示です。
ブラウザから登録してみます。
↓
↓
どうやら上手く行ったようです。プリザンター側を見てみましょう。
↓
ちゃんと入っているみたいですね。これにてAPIについての試してみた、は終わりとさせてもらいます。
注意!
APIKeyがさらされるので、本来はこのような使い方はしてはいけません。必ずサーバーサイドのプログラムで実装してください。弊社のセミナーでは、HTML→PHP→プリザンター→Slackまでの一連のながれのデモを行っておりますので、タイミングが合えばぜひご来場ください。
株式会社リーデックス - connpass
注意2!
APIを利用する際にHTTPSでも通信は可能のようですが、開発用のオレオレ証明書だとエラーが発生するようです。イメージ情報システム様のブログに記載がありました。
imageinformationsystem.hatenablog.com