Question

代码背后的故事：我正在构建一个餐厅应用程序，目前正在制作该项目的食品订购页面。看起来如下： image about the page

在输入字段中，我可以输入食物的名称，然后使用AJAX从数据库中搜索食物。当我单击食物的名称时，它会将其名称与列表号一起添加到列表中，并且还将食物的名称添加至页面JavaScript的数组中。右边有一个值为“Rendelésfelvétele”的按钮。它将表单提交给order-food.php，后者将订单写入数据库。我的问题如下：如何将数组从JavaScript传递到order-food.php，以便也可以在php代码中使用数组的项？

我的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rendelés felvétele</title>
<style type="text/css">
    body{
        font-family: Arail, sans-serif;
    }
    .search-box{
        width: 300px;
        position: relative;
        display: inline-block;
        font-size: 14px;
    }
    .search-box input[type="text"]{
        height: 32px;
        padding: 5px 10px;
        border: 1px solid #CCCCCC;
        font-size: 14px;
    }
    .result{
        position: absolute;        
        z-index: 999;
        top: 100%;
        left: 0;
    }
    .search-box input[type="text"], .result{
        width: 100%;
        box-sizing: border-box;
    }
    .result p{
        margin: 0;
        padding: 7px 10px;
        border: 1px solid #CCCCCC;
        border-top: none;
        cursor: pointer;
    }
    .result p:hover{
        background: #f2f2f2;
    }
    .list {
        padding-top: 20px;
    }
    .result {
        background-color: white;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
// var fields = 1;
// function add_fields() {
//     fields++;
//     var objTo = document.querySelector('.search-box')
//     var divtest = document.createElement("div");
//     divtest.innerHTML = '<input type="text" autocomplete="off" placeholder="Étel keresése"/><div class="result"></div>';

//     objTo.appendChild(divtest)
// }
var foods_added = [];
function add_food() {
    var food_name = document.getElementById('food_name').value;
    var entry = document.createElement('li');
    entry.appendChild(document.createTextNode(food_name));
    list.appendChild(entry);
    foods_added.push(food_name);
    document.getElementById('food_name').value = "";
}
$(document).ready(function(){
    $('.search-box input[type="text"]').on("keyup input", function(){
        var inputVal = $(this).val();
        var resultDropdown = $(this).siblings(".result");
        if(inputVal.length){
            $.get("backend-search.php", {term: inputVal}).done(function(data){
                resultDropdown.html(data);
            });
        } else{
            resultDropdown.empty();
        }
    });

    $(document).on("click", ".result p", function(){
        $(this).parents(".search-box").find('input[type="text"]').val($(this).text());
        $(this).parent(".result").empty();
    });
});
</script>
</head>
<body>
    <form style="text-align: center;list-style-position: inside;"action="order-food.php" action="post">
        <!-- <input type="button" onclick="add_fields();" value="Hozzáad"> -->
        <div class="search-box">
            <input id="food_name" type="text" autocomplete="off" placeholder="Étel keresése" />
            <div class="result"></div>
            <input style="width: 130px;" type="button" onclick="add_food();" value="Hozzáad">
            <input style="width: 130px;"type="submit" value="Rendelés felvétele">
        </div>
        <div class="list">
            <ol id="list"></ol>
        </div>

    </form>
</body>
</html>

编辑：我使用JSON类型方法进行了尝试，编写了以下代码（该代码不起作用）：在JS的add_food（）中，我添加了：

JSON.stringify(foods_added);

在order-food.php中，我写了以下内容：

<?php
   $array=json_decode($_POST['jsondata']);
   for ($i = 0; $i < count($array); $i++) {
       echo $array[$i];
   } 
?>

如何将数组从JavaScript传递到PHP？

0 个答案: