Question

所以我想通过AJAX将JS数组传递给我的PHP代码，而我遇到了一个问题。我的问题如下：将数组发送到php时，出现以下错误：

注意：未定义索引：foods_add in 第2行上的C：\ xampp \ htdocs \ etterem \ order-food.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 = "";
}

function submit_list() {
    $.ajax({
        url: "order-food.php",
        method: "post",
        data: { foods_added : JSON.stringify(foods_added) },
        success: function(res) {
            console.log(res);
        }
    })
    window.location.href = "order-food.php";
}
$(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>
        <!-- <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="button" onclick="submit_list();" value="Rendelés felvétele">
        </div>
        <div class="list">
            <ol id="list" name="food"></ol>
        </div>
</body>
</html>

<?php
   $added_foods = json_decode($_POST['foods_added']);
?>

第二个代码是order-food.php，我将用它来处理数组（最后它将数组中的项目提交到数据库中）

Answer 1

您启动ajax请求，但随后通过调用

刷新页面

<#if line.duedate?has_content>${daysoverdue}<#else>empty</#if>

所以ajax请求被暂停，页面重新加载，没有发布值。只需删除该行，即可完成请求。

然后使用“类型”参数而不是“方法”设置方法。因此，从以下位置更改ajax请求中的行：

window.location.href = "order-food.php";

到

method:"POST"

为什么数组中的项目未定义？

1 个答案: