HTMLファイルからPOSTまたはGETでJSONデータを送信する方法
以下は入力フォームに入力したあとJSON配列に変換してリクエストを送りデータを返却しようと作成中のコードです。
しかしデータは返却されずエラーとなってしまいます。
cygwin上ではデータが返却されることは確認できています。
cygwinでのリクエストは「curl -i -v -H "Accept: application/vnd.glv.v1+json" -H "Content-type: application/json" -X GET localhost:8280/api/dept_accesses -d '{"dept_ids":["CD0004"],"start_date":"20151001","end_date":"20151207"}'」
で表示されます。
HTMLでデータが返却されればどんな形でも問題ないです。どの部分を編集すればいいか全くわかりません・・・プログラミングに詳しい方何卒宜しく御願い致します。
$(function(){
$("#response").html("Response Values");
$("#button").click( function(){
var url = $("#url_post").val();
var JSONdata = {
dept_ids: $("#dept_ids").val(),
start_date: $("#start_date").val(),
end_date: $("#end_date").val(),
};
alert(JSON.stringify(JSONdata));
$.ajax({
type : 'post',
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));
}
});
})
})
<!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>
</head>
<body>
<h1>HTMLファイルからPOSTでJSONデータを送信する</h1>
<p>URL: <input type="text" id="url_post" name="url" size="100" value="http://52.192.178.185:8280/api/blog_accesses?"></p>
<p>dept_ids: <input type="text" id="dept_ids" size="30" value="[BD0002]"></p>
<p>start_date: <input type="text" id="start_date" size="30" value="20151201"></p>
<p>end_date: <input type="text" id="end_date" size="30" value="20151230"></p>
<p><button id="button" type="button">submit</button></p>
<textarea id="response" cols=120 rows=10 disabled></textarea>
</body>
</html>