Ajax jquery(post) 不将数据传递给 php

Question

我正在尝试将数据传递到我的 php 页面：

<?php
var_dump($_POST);
if (isset($_POST['goal']) && isset($_POST['amount'])){


    $goal = $_POST['goal'];
    $amount = $_POST['amount'];



    $array = array(
      "goal" => $goal,
      "amount" => $amount

    );
    echo json_encode($array);


}

然而，由于 var_dump $_POST，我一直得到一个空数组，出于某种原因，我的 ajax 没有传递必要的数据。我尝试了 console.logging 我正在使用的字段的值，它们的值是正确的，只是数据没有在 php 页面上传递。

ajax:

<script type="text/javascript">
            $(document).ready(function () {
                //use button click event
                $("#goalBTN").click(function (e){
                    e.preventDefault();
                    let amount = $("#amount").val();
                    let goal = $("#goal_name").val();

                    $.ajax({
                        method: "post",
                        url: "target-modal-code.php",
                        data:JSON.stringify( {
                                amount: amount,
                                goal: goal
                            }),
                        contentType:"application/json",
                        success: function (response){
                            $("#response").text(response);
                            console.log(amount);
                            console.log(goal);
                        },
                        error: function(response) {
                            alert(JSON.stringify(response));
                        }
                    })
                });
            });

        </script>

我的表单在模态中：


 <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="enrollLabel">Change your goal</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="target-modal-code.php" name="target-form" id="target-form">
                    <div class="modal-body">
                        <form action="">
                            <div class="mb-3 input-control">
                                <label for="amount">Cost</label>
                                <input type="number" class="form-control" id="amount" name="amount"
                                       placeholder="Amount">
                                <small class="message" id="message-password"></small>
                                <br>
                            </div>
                            <div class="mb-3 input-control">
                                <label for="goal_name">Goal</label>
                                <input type="text" class="form-control" id="goal_name" name="goal_name"
                                       placeholder="Goal">
                                <small class="message" id="message-password"></small>
                                <br>
                            </div>
                        </form>
                    </div>
                    <p class="response" id="response"></p>
                    <div class="modal-footer">
                        <div class="response">
                        </div>
                        <button type="button" id="goalBTN" class="btn btn-warning">Save changes</button>
                    </div>
                </form>
            </div>
        </div>

Answer 1

格式化发送ajax:

$.ajax({
    ...
    data : {
        foo : 'bar',
        bar : 'foo'
    },
    ...
});

在您的情况下：更改数据发送格式，如：

data: {
   amount: amount,
   goal: goal
}

Answer 2

在 firefox 网络开发工具中使用“网络”选项卡进行一些实时测试后更新了答案

问题是当前 ajax 代码由于错误 content-type 而未发送任何元素。让它自动检测content-type。对于 jq ajax，默认值似乎是 contentType: application/x-www-form-urlencoded，即使您没有特别提供。

所以，这有效：

<script type="text/javascript">
        $(document).ready(function () {
            //use button click event
            $("#goalBTN").click(function (e){
                e.preventDefault();
                // let amount = $("#amount").val();
                // let goal = $("#goal_name").val();

                var formData = {
                  amount: $("#amount").val(),
                  goal_name: $("#goal_name").val(),
                };

                $.ajax({
                    method: "post",
                    url: "target-modal-code.php",
                    // datatype:"json",
                    //data:JSON.stringify(formData),
                    data: formData,
                    //contentType:"application/json",
                    //encode: true,
                    success: function (response){
                        $("#response").text(response);
                        // console.log(amount);
                        // console.log(goal);
                        console.log(formData);
                    },
                    error: function(response) {
                        alert(JSON.stringify(response));
                    }
                })
            });
        });

    </script>

经过一些摆弄后，我注意到如果您根本不提供它，它仍然有效 contentType。 AJAX 不会向服务器发送 GET 或 POST 参数....不知道为什么。我知道这很奇怪，但这就是 jquery ajax.

中的情况

我特意保留了评论，让你看看我都做了什么。

总结一下，

不要将表单数据字符串化，
不要向 ajax 提供 contentType 要求。

干杯！

Ajax jquery(post) 不将数据传递给 php

Ajax jquery(post) doesn't pass data to php

php

jquery

ajax