使用 jQuery 将 javascript 数组发送到 php答案

【问题标题】：use jQuery to send javascript array to php使用 jQuery 将 javascript 数组发送到 php
【发布时间】：2014-04-25 02:49:11
【问题描述】：

我正在尝试使用 ajax 和 jQuery 将 javascript 数组传递给 php。

我有一个简单的页面，其中包含一系列我通过 jQuery UI 选择的数字（见下文）当我选择一组数字时，我使用 array.push 将这些数字添加到一个名为“shift”的数组中.问题来了：将这个数组发送到 PHP 的最简单的方法是什么？它过来之后会不会是一个数组？我是编码新手，如果能得到任何帮助，我将不胜感激。经过大量研究，这是我尝试过的。哦，我已经设法弄清楚如何将表单提交给 PHP，这是我坚持的 jQuery UI 数组。

这是我的 main.php

<!DOCTYPE html>
<html>
<head>

    <title>test</title>


<link rel="stylesheet" type="text/css" href="main.css">

</head>

<body>
<div class = "container">
<form action="post.php" method="post" id="add">
<input type="text" class="leader" name="name" placeholder="Leader">
<input type="text" class="date" name="date" placeholder="date">
<input type="text" class="time" name="time" placeholder="time">
<input type="text" class="score" name="score" placeholder="score">
<input type="submit" id="btn" value="send" />
</form>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.4.custom.js"></script>
<script src="globe.js"></script>


<ul id ="hours_zoned">
    <li class="nine">9</li>
    <li class="ten">10</li>
    <li class="eleven">11</li>
    <li class="twelve">12</li>
    <li class="one">1</li>
    <li class="two">2</li>
    <li class="three">3</li>
    <li class="four">4</li>
    <li class="five">5</li>
    <li class="six">6</li>
    <li class="seven">7</li>
    <li class="eight">8</li>
    <li class="nine">9</li>
</ul>
</div>  




</body>
</html>

这是我的 post.php

 <html>
    <body>


 /* I'm using all of these echoes to verify that the data is coming
 over. Only "shift" fails to come over */

    NAME <?php echo $_POST["name"]; ?><br>
    DATE <?php echo $_POST["date"]; ?><br>
    TIME <?php echo $_POST["time"]; ?><br>
    SCORE: <?php echo $_POST["score"]; ?><br>

    SHIFT: <?php echo $_POST["shift"]; ?> 

    <?php 

    include("db.php");

    $name = $_POST["name"];
    $date = $_POST["date"]; 
    $time = $_POST["time"];



    $query = "INSERT INTO leaders (name, shift_date, shift_time)  VALUES ('$name', '$date', '$time')";     
    $result = $db->query($query);



     ?>

    </body>
    </html>

这是我的globe.js

var shift = []; //create array to store zoned hours

    $(function() {
        $( "#hours_zoned" ).selectable();
            $( "#hours_zoned" ).on('click', 'li', function() {

                $(this).addClass("clicked ui-selected");
                 $( this ).css( "background-color", "#e74c3c" );
                $( this ).selectable({ disabled: true });

                var floorTime = $(this).text(); // get the value of the hour that was clicked
                shift.push(floorTime); // add that hour to the floorTime    
             }); 

    /*$('#add').on('submit', function() {
        var name = $('.leader').val(); */


    $('#btn').on('submit', function() {
        $.ajax({
            type: 'POST',
            url: 'post.php',
            data: shift,
            success: function(msg) {
                alert(msg);
            }
        });
    });

        return false;
    });

【问题讨论】：

既然您已经在使用 PDO，请使用准备好的语句来避免 SQL 注入攻击。

标签： php jquery arrays

【解决方案1】：

您只是发送密钥

data: shift,

根据文档 - Object must be Key/Value pairs. (https://api.jquery.com/jQuery.ajax/)

试试

data: {shift: shift},

现在是这样

$('#btn').on('submit', function() {
    $.ajax({
        type: 'POST',
        url: 'post.php',
        data: {shift: shift},
        success: function(msg) {
            alert(msg);
        }
    });
    return false;
});

【讨论】：

我的猜测是，当一个数组作为数据传递时，它会发送类似undefined=&undefined=&undefined= :)
@Jack 来自 ajax :: data 上的文档 -> Type: PlainObject or String, If value is an Array, jQuery serializes multiple values with same key ...

【解决方案2】：

编辑：您的 ajax 函数有点夸张。也为你解决了这个问题。查看新代码。

您的 ajax 提交没有运行。添加返回假；以防止主表单提交。我在想添加数组的最简单方法是在被推入 jQuery 函数后立即将其插入隐藏输入中。然后，您只需序列化表单数据并将其全部发送到您的 ajax 函数中。见下文：

新形式：

<form action="post.php" method="post" id="add">
<input type="text" class="leader" name="name" placeholder="Leader">
<input type="text" class="date" name="date" placeholder="date">
<input type="text" class="time" name="time" placeholder="time">
<input type="text" class="score" name="score" placeholder="score">
<input type="hidden" class="shift" name="shift">
<input type="submit" id="btn" value="send" />
</form>

新功能：

var shift = []; //create array to store zoned hours

$(function() {
    $( "#hours_zoned" ).selectable();
        $( "#hours_zoned" ).on('click', 'li', function() {

            $(this).addClass("clicked ui-selected");
             $( this ).css( "background-color", "#e74c3c" );
            $( this ).selectable({ disabled: true });

            var floorTime = $(this).text(); // get the value of the hour that was clicked
            shift.push(floorTime); // add that hour to the floorTime  

            $("#add .shift").val(shift); // add shift array to hidden input in form  
         }); 

/*$('#add').on('submit', function() {
    var name = $('.leader').val(); */


$('#add').submit(function() {
    $.ajax({
        type: 'POST',
        url: 'post.php',
        data: $("#add").serialize(),
        success: function(msg) {
            alert(msg);
        }
    });
return false; // you need this to prevent the other form submission
});

    return false;
});

未经测试，但这应该会让你朝着正确的方向前进。

【讨论】：

.serialize 非常有帮助！我以前没有听说过，所以我会研究它以了解更多信息。这行得通！
太棒了！祝你的项目好运。

【解决方案3】：

只是想补充这里给出的答案..

您还需要检查所选项目是否已经在数组中（防止重复）.. 为此，您可以这样做

*代码取自马特的回答

if($.inArray(floorTime, shift) === -1) {
                shift.push(floorTime);
                $("#add .shift").val(shift);
 }

【讨论】：

是的，这是有道理的。谢谢！

【解决方案4】：

试试parse_str()。

$array = parse_str( $_POST['data'] );

【讨论】：