20977


失礼します。以下はJSON形式に変換してリクエストをし、画面遷移せずその場に結果を表示させるコードです。  
こちらのコードだとPOSTだけですが、GETでもデータを送受信したいのです。しかし編集してもやり方が違うのかエラーが生じてしまいます。  
どの部分に手を加えればいいのか、またできればHTML上で月日が選択できるのと同じようにPOSTかGETを選択できるようにしたいと考えております。

自分の力だとどうしても解決できないためこちらで質問させていただきました。  
何卒宜しく御願い致します。

[code]

    <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("完了");
                });
            })
        })
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2016-01-14T02:37:56.447
20903
2016-01-16T10:27:01.680
2016-01-14T09:32:03.073
208
13072
question
javascript html json ajax
JSON取得する際にGETかPOSTを切り替えて受信できるようにしたい


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

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

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


CC BY-SA 3.0
2016-01-14T12:53:10.130
20923
2016-01-14T12:53:10.130
13999
20903
answer


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

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

[<select>－HTML5タグリファレンス](http://www.htmq.com/html5/select.shtml)

[code]

    $('#submit').on('click', function() {
      var http_method = $('#http_method').val();
      alert(http_method);
      
      /* ajaxに組み込む場合の例
      $.ajax({
        url: ...,
        type: http_method,
        data: ...,
        ...
      });
      */
    });
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2016-01-16T10:27:01.680
20977
2016-01-16T10:27:01.680
8000
20903
answer