失礼します。以下は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>
$.ajax()
に渡すtype: "POST"
をGET
に変更すればいいと思いますが、リクエスト先はGETの時でもJSON形式を受け付けるのでしょうか?もし違う形式(x-www-form-urlencodedとか)を期待するなら、POSTの時だけJSON変換するように分岐させる必要があります。APIによってはGETとPOSTで全く異なるパラメータを取ることもありますが、その場合尚更別の処理が必要になります。