0

失礼します。以下は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>

3
  • 単にGETとPOSTを切り替えるだけなら $.ajax() に渡す type: "POST"GET に変更すればいいと思いますが、リクエスト先はGETの時でもJSON形式を受け付けるのでしょうか?もし違う形式(x-www-form-urlencodedとか)を期待するなら、POSTの時だけJSON変換するように分岐させる必要があります。APIによってはGETとPOSTで全く異なるパラメータを取ることもありますが、その場合尚更別の処理が必要になります。
    – unarist
    Commented 2016年1月14日 6:00
  • unarist様 いつもありがとうございます。 確かにtypeをpostからgetに変更すればできるようにはなるかと思います。 しかしセレクトボックスのようなものを作成してGETかPOSTどちらか選択してリクエストできるようにしたいと考えております。 そういったことは可能でしょうか? またcygwin上での確認ですがPOSTでもGETでも全く同じデータが返却されるのを確認しています。 Commented 2016年1月14日 6:37
  • セレクトボックスにてHTTPメソッドを選ばせて、それをjQueryで取り出すことはできます。例えば、var http_method = $("#http_method").val();として、$.ajax内で、type : http_method と記述できます。
    – A-pZ
    Commented 2016年1月14日 11:46

2 件の回答 2

0

「セレクトボックスのようなものを作成」する方法がわからない、ということでしょうか。

あなたの言うセレクトボックスというのはおそらく <select> のことですよね。タグの使い方は以下のサイトや例を見てもらうとして、値の取得は他の <input> タグ同様に $(..).val() で行うことができます。

<select>-HTML5タグリファレンス

$('#submit').on('click', function() {
  var http_method = $('#http_method').val();
  alert(http_method);
  
  /* ajaxに組み込む場合の例
  $.ajax({
    url: ...,
    type: http_method,
    data: ...,
    ...
  });
  */
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="http_method">
  <option value="get">GET</option>
  <option value="post">POST</option>
</select>
<button id="submit">送信</button>

0

Getメソッドで通信出来ない原因として、下記かなぁと思います。
検討ハズレかもしれませんが試してみてください。

data : JSON.stringify(JSONdata)
ココの部分ですが、文字列にするなら綺麗なクエリストリング形式にする必要があったかと思います。
プレインなオブジェクトがそのまま使えるはずなので、下記で試してみてください。
data : JSONdata

http://api.jquery.com/jquery.ajax/

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。