ajax [文件 1] -> php [文件 2] -> $_POST [文件 1]

Question

我正在使用 HTML、Javascript 和 PHP 构建预算应用程序。我的目标是让用户能够从提供的表单中将数据添加到数据库中。我的“dashboard.php”（包含表单）顶部已经有大量 php，所以我不想在提交时运行dashboard.php，所以我创建了一个按钮来执行 AJAX 调用不同的php文件'addIncome.php'。

我有两个不同的文件...

dashboard.php & 添加收入.php

dashboard.php 包含我的表单，以及用于运行 AJAX 调用的 javascript。

addincome.php 正在使用 $_POST 从 dashboard.php 中的表单中获取值并进行 mysqli_query。然而，起初什么都没有发生，所以我决定从我的 $_POST 中回显其中一个返回值的值。最后得到这个错误......

undefined index iName in addIncome.php
undefined index iAmount in addIncome.php

所以从那里我虽然默认情况下我可能无法访问dashboard.php所以我包括...

include('dashboard.php');

还是没有区别……

我真的在这里停滞不前。有什么想法吗？

谢谢

表格...

<form>
    <input type="text" name="iName" placeholder="income name">
    <input type="number" step="0.01" min="0" name="iAmount" placeholder="amount">
    <input type="date" name="iDate">
</form>

javascript...

<script>
    $('.in-btn').click(function() {
        $.ajax({
            url: "addIncome.php",
            type: "POST",
            data: 'show=content',
            success: function(data) {
                $('.in-btn').html(data);    
            }
        });
        setTimeout(() => {
            // location.reload(); 
        }, 2000);
    });
</script>

php...

<?php

    echo "adding...";

    require_once('connection.php');
    include('dashboard.php');

    $iUser = $_SESSION["username"];
    $iName = $_POST["iName"];
    $iAmount = $_POST["iAmount"];

    echo $iName;

    $sql = "INSERT INTO income (user, name, amount, date) VALUE ('pmanke', '$iName', '$iAmount','1/16/19')";
    mysqli_query($dbCon, $sql);

?>

Answer 1

您不会通过 AJAX 调用发送任何发布数据，但以下情况除外： show=content。您想发送表单数据。您可以通过以下方式检索表单数据：

$("#id-of-form").serialize()

这样您的 PHP 代码就能够从您的 POST 数据中检索正确的值。

更通用的方法是创建一个带有提交按钮和操作的普通表单，并使用 javascript 来捕获提交事件并进行 AJAX 调用：

HTML：

<form id="idForm" action="addIncome.php">
    <input type="text" name="iName" placeholder="income name">
    <input type="number" step="0.01" min="0" name="iAmount" placeholder="amount">
    <input type="date" name="iDate">
    <input type="submit" />
</form>

Javascript：

$("#idForm").submit(function(e) {
    var form = $(this);
    var url = form.attr('action');

    $.ajax({
           type: "POST",
           url: url,
           data: form.serialize(), // serializes the form's elements.
           success: function(data) {
               alert(data); // show response from the php script.
           }
     });

    e.preventDefault(); // avoid to execute the actual submit of the form.
});