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

Question

我正在使用HTML，JavaScript和PHP构建预算应用程序。 我的目标是使用户能够从提供的表单向数据库添加数据。 我的“ dashboard.php”（包含表单）顶部已经有很多php，因此我不想在提交时运行dashboard.php，因此我创建了一个按钮，用于对AJAX进行AJAX调用不同的php文件“ addIncome.php”。

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

dashboard.php和addincome.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.
});