将JavaScript数组传递到PHP文件

6
我知道JavaScript是客户端的,而PHP是服务器端的,这让事情变得复杂,但我想知道如何做到这一点。
我在我的JavaScript代码中(在HTML文件中)有一个数组,当用户点击我的提交按钮时,我希望页面将该数组发送到我的PHP页面,然后将该日期放入SQL数据库中。
有没有一种简单的方法可以实现这个目标?我的数组像这样声明:var markers = [];它只是代码中JavaScript部分的一个变量。
我已经查看了许多其他帖子,但所有解决方案都不适合我需要做的事情,或者需要太多的更改,而我现在能做的并不多。我不太熟悉AJAX或JSON(不确定那究竟是什么)。
我的JavaScript代码如下:
var markers = [];

function placeMarker(location) {
        var clickedLocation = new google.maps.LatLng(location);
        var name = document.getElementById("checkname").value;
        var description = document.getElementById("description").value;


        var marker = new google.maps.Marker({
            position: location,
            map: map,
            title: name,
            // This may cause a problem when reloading and editing an existing tour
            // url was found at: http://biostall.com/adding-number-or-letters-to-google-maps-api-markers
            icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + markerId + '|FE6256|000000'
        });

        marker.setMap(map);
        markers.push([markerId, name, marker.getPosition().lat(), marker.getPosition().lng(), description]);
        //alert("" + markers);
        markerId = markerId + 1;
    }

    google.maps.event.addListener(map, 'click', function(event) {
        placeMarker(event.latLng);
    });

    google.maps.event.addListener(marker, "click", function() {
        map.removeOverlay(marker);
        marker.setMap(map);
    });
} 

window.onload = function() {
    var form = document.getElementById('theform');
    form.addEventListener('submit', function(){
        var markersField = document.getElementById('markers');
        markersField.value = JSON.stringify(markers);
    });
}

我的HTML代码是:

<form action="portal.php" method="post" id="theform">
    <input type="hidden" id="markers" name="markers">
    <button>Submit</button>
</form>

在我的portal.php文件中,我有以下内容:
$markers = json_decode($_POST['markers']);
echo $markers;

尽管我知道数组中有元素,但php页面上没有任何输出,这让我认为数组没有被传递过来。


7
那么您应该熟悉 AJAX,这是唯一的方法来完成这个任务... - Wouter J
非常确定完成这个任务的唯一方法是使用某种 AJAX 解决方案。如果您有 jQuery 的经验,那么它会变得非常容易。 - dmikester1
4个回答

10

我假设您的页面在提交表单时已经重新加载,而且您对此没有任何问题。 如果是这样,您可以为该数据添加一个隐藏字段,并在表单提交之前将其添加到该字段中:

<form method="post" id="theform">
    <!-- your existing form fields -->

    <input type="hidden" id="markers" name="markers">

    <button>Submit</button>
</form>

然后使用这个 JavaScript

window.onload = function() {
    var form = document.getElementById('myform');
    form.addEventListener('submit', function(){
        var markersField = document.getElementById('markers');
        var markers = [1,2,3];
        markersField.value = JSON.stringify(markers);
    });
}

将以下代码添加到您处理提交的表单数据的 PHP 中:

$markers = json_decode($_POST['markers']);

2
+1 是指出 AJAX 不是唯一解决方案的肯定。 - Justin Bicknell
+1 这是一个很好的观点。不过,使用jQuery可能会更容易一些。它并不是万能的,但对于这个问题来说还是很不错的。 - pseudosavant
这似乎很有道理,谢谢!我需要在某个地方指定要发送到的php文件吗?另外,如果标记数组已经存在,那么只需删除创建标记的那行代码就可以了吗? - intA
1
@Skytbest,你的表单不是已经有了action属性吗?它告诉表单要提交到哪个PHP文件。如果缺失(就像我的例子一样),它会提交到当前文件。至于变量标记,是的,我的代码只是一个例子。你可以使用任何变量,只要它在作用域内。 - bfavaretto
2
这已经变得太复杂了,无法在评论中解决。建议您发布一个新的后续问题,说明您遇到的新问题。这已经远远超出了您最初问题的范围,顺便提一句,该问题已关闭,因此您不能在此处获取新答案。另外,请不要忘记检查浏览器控制台,它会在发生JavaScript错误时向您显示,并且这是帮助您调试代码的重要信息。 - bfavaretto
显示剩余5条评论

5

这可能是最直接的方法。它使用jQuery,非常适合这种类型的操作。第一部分只是将数组作为AJAX POST请求中的markers参数发送。

// Javascript / jQuery
$.ajax({
    type: 'POST',
    data: markers,
    dataType: 'json',
    url: 'yourPHPFile.php'
});

这部分是用于接收POST请求并将JSON解码为PHP数组的PHP代码。

// PHP in 'yourPHPFile.php'
// Santizing the string this way is a little safer than using $_POST['markers']
$markersFromPost = filter_input(INPUT_POST, 'markers', FILTER_SANITIZE_STRING);

// Turn the sanitized JSON string into a PHP object
$markers = json_decode($markersFromPost);

3

您需要学习AJAX和JSON的基础知识。jQuery可以帮助您入门,我推荐它作为良好的起点。

使用AJAX提交JSON,然后使用$phpArray = json_decode($submittedJson);,您将获得一个漂亮的PHP数组,其中包含已提交的javascript对象。


1
发送一个 JSON 对象并使用 json_decode($obj) 将其转换为数组。

这个需要使用分隔符吗?我不能使用分隔符,因为数组包含用户输入的文本,我不想限制用户可以输入的内容。 - intA

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接