使用jQuery将javascript数组发送到php - php

我正在尝试使用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;
    });

参考方案

编辑：您的ajax函数有点麻烦了。还为您修复了该问题。查看新代码。

您的ajax提交未运行。添加return false;以防止提交主要表格。我在想添加数组的最简单方法是在将其推入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;
});

未经测试，但这应该可以使您朝正确的方向前进。

故障排除“警告:session_start():无法发送会话高速缓存限制器-标头已发送” - php

我收到警告：session_start（）[function.session-start]：无法发送会话缓存限制器-标头已发送（错误输出开始如果我将表单数据提交到其他文件进行处理，则可以正常工作。但是，如果我将表单数据提交到同一页面，则会出现此错误。请建议<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0…

Div单击与单选按钮相同吗？ - php

有没有一种方法可以使div上的click事件与表单环境中的单选按钮相同？我只希望下面的div提交值，单选按钮很丑代码输出如下：<input id="radio-2011-06-08" value="2011-06-08" type="radio" name="radio_date&#…

PHP-复选框组 - php

我有一个需要发布的表单复选框组。<input type="checkbox" value="true" checked name="chk0[]"> <input type="checkbox" value="false" name=…

使用PHP包含时的淡入淡出过渡 - php

我正在尝试使用jQuery或CSS（或其他方式！）在DIV中包含的php页面上创建淡入淡出或滑动过渡。我四处搜寻，发现了很多淡入淡出过渡的示例，这些实例彼此淡入淡出div或隐藏内容淡入淡出，但是这种情况略有不同。我有一个DIV，其内容由导航栏控制。选中后，每个页面都可以使用PHP成功地包含在div中，但我想使内容淡入和淡出。关于如何在页面更改之间进行漂亮过渡…

AJAX调用只能与$(document).on('click')一起使用 - php

我有一个显示数据库条目的表。用户能够为每一行打开一个弹出菜单。选项之一是删除数据库条目，并且该表应通过AJAX调用相应地刷新。只要有人单击#delete-toggle中的table-popup，我就会在HTML页面上进行AJAX调用（table-popup是div，当有人单击每行中存在的表中的table-edit-button时出现的表）： <div …

使用jQuery将javascript数组发送到php - php

腾讯的同事天天给我安利让我看《三体》，说马化腾和雷军也在…