新機能「API」をさっくりと試してみた③~解決!!

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

ついに解決しました!クライアントの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の下記情報をもとにさせてもらいました。有難うございました。

github.com

 

 

PowerShellPHPCurlなどのデフォルトは上記の設定になっているようです(未確認)。詳細は下記をごらんください。

application/x-www-form-urlencoded

application/x-www-form-urlencoded ‐ 通信用語の基礎知識

 

ブラウザでの表示はこのようになります。

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

 

 

実行してみる 

プリザンターのデフォルトの一覧表示です。

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

 

 

ブラウザから登録してみます。

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

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

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

 

 

どうやら上手く行ったようです。プリザンター側を見てみましょう。

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

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

 

 

ちゃんと入っているみたいですね。これにてAPIについての試してみた、は終わりとさせてもらいます。

 

注意!

APIKeyがさらされるので、本来はこのような使い方はしてはいけません。必ずサーバーサイドのプログラムで実装してください。弊社のセミナーでは、HTML→PHP→プリザンター→Slackまでの一連のながれのデモを行っておりますので、タイミングが合えばぜひご来場ください。

株式会社リーデックス - connpass

 

注意2!

APIを利用する際にHTTPSでも通信は可能のようですが、開発用のオレオレ証明書だとエラーが発生するようです。イメージ情報システム様のブログに記載がありました。

imageinformationsystem.hatenablog.com