JSON取得する際にGETかPOSTを切り替えて受信できるようにしたい
失礼します。以下はJSON形式に変換してリクエストをし、画面遷移せずその場に結果を表示させるコードです。
こちらのコードだとPOSTだけですが、GETでもデータを送受信したいのです。しかし編集してもやり方が違うのかエラーが生じてしまいます。
どの部分に手を加えればいいのか、またできればHTML上で月日が選択できるのと同じようにPOSTかGETを選択できるようにしたいと考えております。
自分の力だとどうしても解決できないためこちらで質問させていただきました。
何卒宜しく御願い致します。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css">
<link href="./css/css.css" rel="stylesheet">
<script type="text/javascript">
$(function(){
$("#response").html("Response Values");
$("#button").click( function(){
var url = $("#url_post").val();
var dept_ids = $("#dept_ids").val().split(",");
var start_date = $("#start_date").val();
var end_date = $("#end_date").val();
var JSONdata = {};
JSONdata.dept_ids = dept_ids;
JSONdata.start_date = start_date;
JSONdata.end_date = end_date;
$.ajax({
url : url
, type : "POST"
, data : JSON.stringify(JSONdata)
, contentType: "application/json;charset=UTF-8"
, processData: false
, dataType : "json"
, accepts : {json: "application/vnd.glv.v1+json;charset=UTF-8"}
, crossDomain: false
}).done(function(data, status, xhr) {
// 通信成功時の処理
// alert("成功");
$("#response").html(JSON.stringify(data));
}).fail(function(xhr, status, error) {
// 通信失敗時の処理
alert("失敗");
}).always(function(arg1, status, arg2) {
// 通信完了時の処理
// alert("完了");
});
})
})
<table>
<h1>店舗検索</h1>
<tr>
<td><b>URL: <input type="text" id="url_post" name="url" size="100" value="http://52.192.178.185:8280/api/dept_accesses"></b><td>
</tr>
<!-- <p>店舗ID: <input type="text" id="dept_ids" size="30" value="BD0002" class="keyword"></p>-->
<tr>
<td><b>店舗ID:<textarea cols="50" id="dept_ids" pattern="^[0-9A-Za-z]+$" class="keyword"></textarea></td>
</tr>
<tr><td><b>開始日: <input type="text" id="start_date" size="30" value="20151001" class="keyword">
~ 終了日: <input type="text" id="end_date" size="30" value="20161207" class="keyword">
<button id="button" type="button">submit</button></p></td>
<tr>
</tr>
<td><textarea id="response" cols=170 rows=21 disabled></textarea></td>