

現在、Geolocationで位置情報とテキストを入力したデータをajaxでjsonに送信するWebアプリの機能を製作しています。ajaxによるjsonデータの通信部分にも自信があると言えず、今のコードでは無反応状態です。ajaxによる入力データの取得とPOST送信の部分に助言があればお願いします。  
以下コード

[code]

    <html>
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <link rel="stylesheet"href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
    <script>
    window.addEventListener('DOMContentLoaded',
        function(){
        if(navigator.geolocation){
                navigator.geolocation.getCurrentPosition(
            function(pos) {
            var bodyHeight = $('body').height();
                $("#gmap").css('height',bodyHeight-200);
                var latlng = {lat:pos.coords.latitude , lng:pos.coords.longitude };
        var gmap = new google.maps.Map(
          document.querySelector("#gmap"),
          {
            zoom: 16,
            center: new google.maps.LatLng(latlng),
            mapTypeId: google.maps.MapTypeId.ROADMAP
          }
        );
            var marker = new google.maps.Marker({ position: latlng , map:gmap });
    
    },
    
    //位置情報の取得に失敗した時
    function(err) {
            var msgs = [
            err.message,
            '位置情報の取得を許可されていません。',
            '位置情報の取得に失敗しました。',
            '位置情報を取得中にタイムアウトしました。'
        ];
        window.alert(msgs[err.code]);
    },
        // 位置取得の動作オプションを設定
        {
            timeout : 10000,
            maximumAge : 0,
            enableHighAccuracy: true
        }
    );
        } else {
    window.alert('Geolocation API対応ブラウザでアクセスしてください。');
    }
        }, false
    );
    
    
    
    //位置データの引数をinputに代入
    function getMarkerPos(){
    document.getElementById('lat'.value=latitude);
    document.getElementById('lng'.value=longitude);
    };
    
        //データ送信
    $("button").click(function() {
    var button = $(this);
    button.attr("disabled", true); //多重送信を防ぐためボタンをdisabledさせる
    
    var data = {
            title: $("#title").val(),
            lat: parseFloat($("#lat").val()),
            lng: parseFloat($("#lng").val()),
            comment: $("#comment").val()
            };
        //通信実行
        $.ajax({
            type:"post",
            url:"/path/to/post",
            data:JSON.stringify(data),
            contentType: 'application/json',
            dataType: "json",
            success: function(json_data) {
            if(!json_data[0]){
                    alret("処理的なエラー" + json_data[1]);
                return;
            }
         location.reload();
            },
        error: function(){
            alert("サーバーエラーです。もう一度再試行してください");
            },
            complete: function() {
            button.attr("disabled", false);
            }
            });
        });
    
    </script>
    </head>
    <body>
        <div data-role="page" id="submit">
            <div data-role="header">
                <h1>DEMO</h1>
        </div>
    
            <div class="ui-field-contain">
                <label for="text-title">タイトル</label>
                <input type="text" name="title" id="title" value="" />
            </div>
    
            <div data-role="content" id="map_content">
                <div id="gmap"></div>
                </div>
    
            <!--経度の情報をajaxに-->
            <input type="hidden" name="lat" id="lat" />
            <!--緯度の情報をajaxに-->
            <input type="hidden" name="lng" id="lng" />
    
            <div class="ui-field-contain">
                <label for="text-comment">コメント</label>
                <textarea cols="40" rows="8" name=textarea id="comment"></textarea>
            </div>
            <div role="main" class="ui-content">
                <button class="ui-btn">送信</button>
            </div>
    
        <div data-role="footer">
            <div data-role="navbar" data-iconpos="bottom" class="navi_bar">
            <ul>
            <li class="ui-block-a"><a href="#" data-icon="home">Map</a></li>
            <li class="ui-block-b"><a href="#" data-icon="info" class="ui-btn-active ui-state-persist">output</a></li>
            </div>
        </div>
        </div>
    
        </body>
    
    <style type="text/css">
        #gmap {
            width: 100%;
            height: 400px;
            border:4px solid #fff;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            }
    </style>
    
[/code]


CC BY-SA 3.0
2016-06-29T09:48:11.073
27185
2016-06-30T00:36:57.327
13526
question
javascript json ajax
ajaxによる位置情報とテキストのjsonファイルへPOST送信を行いたい


まず、clickをバインドしていますが、グローバルに直書きだとDOMの準備が出来ていないためバインドできません。  
`DOMContentLoaded`の中に入れましょう。  
これでまずクリックイベントが走るようになるはずです。

あと`ajax`へ`data`を`post`する際にJSON文字列にしているのには意味があるのでしょうか？  
下記のようにすればObjectをそのまま渡せます。  
あと通信エラーの判別の引数がないとエラー時に対処に困ります。  
試験中はつけておいたほうがいいかと思います。

[code]

    //通信実行
    $.ajax({
        type: "post",
        url: "/path/to/post",
        data: data,
        dataType: "json",
        success: function (json_data) {
            if (!json_data[0]) {
                alret("処理的なエラー" + json_data[1]);
                return;
            }
            location.reload();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            console.log(XMLHttpRequest);
            console.log(textStatus);
            console.log(errorThrown);
            alert("サーバーエラーです。もう一度再試行してください");
        },
        complete: function () {
            button.attr("disabled", false);
        }
    });
    
[/code]

問題の切り分けとして、まずどこまでコードが走っているか調査すべきです。  
今回の場合、  
１．クリックイベントが走っているか？  
２．通信できているか？  
３．通信のパラメータは正しいか？  
と調査できるはずですので、  
consoleを置くなどして調査しましょう。


CC BY-SA 3.0
2016-06-30T00:36:57.327
27201
2016-06-30T00:36:57.327
27185
answer