Javascript 到 PHP 和 innerHTML 删除答案

【问题标题】：Javascript to PHP and innerHTML deletionJavascript 到 PHP 和 innerHTML 删除
【发布时间】：2015-10-17 16:53:43
【问题描述】：

我正在实现一个脚本，但在两个我无法弄清楚的问题上需要一些帮助。这个想法是允许某人创建一条跑步路线并通过坐标将路线存储到数据库中。

代码如下：（感谢：Post 19 Here 和 This Fiddle 此处）

            <html>
              <head>
                <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
                <meta charset="UTF-8">
                <title>Drawing Tools (B)</title>
            <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
            <script>
            window.onload = function() {
                var latlng = new google.maps.LatLng(51.4975941, -0.0803232);
                var map = new google.maps.Map(document.getElementById('map'), {
                    center: latlng,
                    zoom: 11,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    title: 'Set lat/lon values for this property',
                    draggable: true
                });
                google.maps.event.addListener(marker, 'dragend', function(a) {
                    console.log(a);
                    var div = document.createElement('div');
                    div.innerHTML = a.latLng.lat().toFixed(4) + ', ' + a.latLng.lng().toFixed(4);
                    document.getElementsByTagName('body')[0].appendChild(div);
                });
            };
            </script>
              </head>
              <body>
            <div id="map" style="height:300px;"></div>
              </body>
            </html>

我要解决的第一个问题：

div.innerHTML = a.latLng.lat().toFixed(4) + ', ' + a.latLng.lng().toFixed(4);

如何将这些经纬度坐标（当人们创建他们的路线）添加到 PHP 数组中，以便将它们插入数据库。我正在为此苦苦挣扎，因为它正在动态显示它们。

我要解决的第二个问题：

div.innerHTML = a.latLng.lat().toFixed(4) + ', ' + a.latLng.lng().toFixed(4);

如果用户丢失了 pin，如果他们犯了错误，有没有办法删除最新的坐标？

我尝试了不同的方法（我不擅长JS）；

div.innerHTML = a.latLng.lat().toFixed(4) + ', ' + a.latLng.lng().toFixed(4) + ', <a onClick="$(this).closest("div").remove();">Delete</a>';

但似乎无法正常工作。

对这些问题的任何帮助将不胜感激。非常感谢。

【问题讨论】：

您的删除链接正在使用 jquery。页面上是否包含 jquery，因为我没有看到其他提及它。
谢谢史蒂夫！我怎么错过了？是的，解决了问题 2！非常感谢。

标签： javascript php

【解决方案1】：

将坐标保存在 javascript 对象/数组中会更容易，因此可以轻松添加/删除和保存它们。

我还会使用更合适的 html 元素将它们显示给用户，例如无序列/有序列表：

<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <title>Drawing Tools (B)</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
        $(function() {

            //Create an object to hold the values and encapsulate adding, removing and saving
            function List(ul, save){
                this.items = [];
                this.ul = ul;
                this.save = save;
            }
            //add item to list
            List.prototype.add=function(item){
                this.items.push(item);
                this.rebuildDom();
            };
            //remove item from list
            List.prototype.removeAt=function(index){
                this.items.splice(index, 1);
                this.rebuildDom();
            };
            //update the contents of the <ul> list to display current list items
            List.prototype.rebuildDom=function(){
                var html='';
                for(var i = 0; i < this.items.length; i++){
                    //note change here, each item is now an array, so it must be
                    //joined into a string for display
                    html += '<li>'+this.items[i].join(' , ') +'<span class="remove" data-id="'+i+'">X</span></li>'
                }
                $('#'+this.ul).html(html);
            };
            //upload the data via ajax
            List.prototype.upload=function(){
                var data = {data: this.items};
                $.post('/save.php', data, function(response){
                    console.log(response);
                })
            };
            List.prototype.init = function(){
                var _this = this;
                //remove items from list when remove is clicked
                $('#'+this.ul).on('click', 'span.remove', function(){
                    var index = $(this).data('id');
                    _this.removeAt(index);
                });
                //bind to click event of save button, and upload data
                $('#'+this.save).click(function(ev){
                    ev.preventDefault();
                    _this.upload();
                });
            };

            var list = new List('items', 'save');
            list.init();


            var latlng = new google.maps.LatLng(51.4975941, -0.0803232);
            var map = new google.maps.Map(document.getElementById('map'), {
                center: latlng,
                zoom: 11,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title: 'Set lat/lon values for this property',
                draggable: true
            });
            google.maps.event.addListener(marker, 'dragend', function(a) {
                console.log(a);
                //note item is now an array containing both values, not a string
                var item = [a.latLng.lat().toFixed(4) ,  a.latLng.lng().toFixed(4)];
                //add item to our list
                list.add(item);
            });
        });
    </script>

    <style>
        body{
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }
        #map{
            height: 400px;
            border-bottom: 1px solid #666666;
            margin-bottom: 20px;
        }

        h3{
            font-family: inherit;
        }
        #items{
            list-style: none;
            width: 300px;
            border: 1px solid #d8d8d8;
        }
        #items li{
            background-color: #666666;
            padding: 5px;
            margin: 5px;
            color:#ffffff;
        }
        #items li span.remove{
            float: right;
            background-color: red;
            color: #ffffff;
            margin: -5px;
            padding: 5px;
        }

    </style>

</head>
<body>
<div id="map" ></div>

<button id="save">Save</button>

<h3>Co-ordinates of your route:</h3>

<ul id="items"></ul>

</body>
</html>

现场示例： https://jsfiddle.net/rmsjf5oy/2/

要检索php中的数据，您可以简单地访问$_POST超级全局：

//save.php

if(isset($_POST['data']){
    $co-ordinates = $_POST['data'];

    // $co-ordinates is now a php array like
    //   [
    //        ['51.4886', '-0.0666'],
    //        ['51.4886', '-0.0666'],
    //        ['51.4886', '-0.0666']
    //   ]

    //do something with the data then send a message back to the javascript

    header('Content-Type: application/json');
    echo json_encode(['success'=>true, 'message'=>'Thanks, got the data']);
}

在浏览器的 js 控制台中查看响应，或者在 upload 方法中执行 console.log(response); 以外的其他操作以对数据执行其他操作，例如在 div 中显示它

【讨论】：

史蒂夫太棒了，谢谢。我会用这个。您知道单击保存后如何将 lat & long 值输入 PHP 吗？
@NOJ75 当然，我会更新我的答案。我对js做了一点改动，让数据更容易处理
传奇！谢谢@史蒂夫。这对我非常有用。非常感谢您的帮助。
@NOJ75 没问题，很高兴我能帮上忙
嗨史蒂夫，我一直在玩这个，它工作得很好。我试图通过添加折线更进一步，因为用户绘制坐标但线条不起作用。你知道如何在你的代码中实现它吗？

【解决方案2】：

第一个问题

除非您进行服务器调用，否则您不能将 JS 数据发送到 PHP。页面呈现后 - PHP 关闭，仅此而已，而 JS 继续在浏览器中运行（阅读有关服务器端与客户端编程的信息）。

您可能想要进行 AJAX 调用以将纬度/经度数据发送回服务器，以便将它们插入数据库。

第二个问题

（请尝试为下次每个问题单独提出一个问题）

$(this).parent().remove(); 应该可以工作。

【讨论】：

罗杰关于单独的问题。对此表示歉意。 $(this).parent().remove();不幸的是没有工作。
这个问题没问题。嗯，它应该可以工作 - 你可以在这里（或问题正文）粘贴一个示例 div 内容吗？
因为我没有包含JQuery！现在只需要解决第一个问题。谢谢肖恩茨。
啊，现在说得通了。 :) 不客气，祝你在 AJAX 方面好运。