使用 php AJAX 进行引导验证

Question

我想序列化我的表单，以便可以通过 Ajax 将其发送到 php 文件。我正在使用 Bootstrap 预先验证表单。不幸的是，php 代码返回一个空数组。 奇怪的是，调试器似乎显示 postData 包含正确的字符串：

“a_location=abc&a_headline=def”

(function ($) {
    "use strict";

    function process_new_post(postData) {
        $.ajax({
            url:"createpost.php",
            method:"POST",
            data:  postData ,
            contentType: false,
            processData: false,
            cache: false,
            success:function(response)
            {
                alert(response);
            },
            error:function(jqXHR, textStatus, errorThrown){
                console.error("AJAX Request Error:", textStatus, errorThrown);
            }
        });
    }

    $(document).ready(function () {
        var forms = document.querySelectorAll('.needs-validation');
        Array.prototype.slice.call(forms)
            .forEach(function (form) {
                form.addEventListener('submit', function (event) {
                    Array.from(form.elements).forEach((input) => {
                       if ( (input.value.trim()==='') && (input.type!=='button') && (input.type!=='submit') ) {
                         input.value = '';
                       }
                    });

                    if ( !form.checkValidity() ) {
                      event.preventDefault();
                      event.stopPropagation();
                    }
                    else {
                        event.preventDefault();
                        process_new_post( $("#formcreatenewpost").serialize() );
                    }
                    form.classList.add('was-validated')
              }, false);
        });
    });
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="needs-validation" id="formcreatenewpost" method="post" enctype="multipart/form-data" novalidate>
    <div class="row g-3">
        <div class="col-md-6">
            <div class="form-floating">
                <input type="text" class="form-control" name="a_location" id="a_location" placeholder="Town(s)" required>
                <label for="a_location">Town(s)</label>
            </div>
        </div>
        <div class="col-12">
            <div class="form-floating">
                <input type="text" class="form-control" name="a_headline" id="a_headline" placeholder="Headline" required>
                <label for="a_headline">Headline</label>
            </div>
        </div>
        <div class="col-4 gy-5">                                    
            <button class="btn btn-primary w-100 py-3" type="submit" id="postcreatenewpost">Post</button>
        </div>
    </div>
</form>

<?php
print_r($_POST);
?>

Answer 1

您好，我刚刚检查了我的本地主机。

不要将 contentType 和 processData 设置为 false。让ajax自己处理。然后您将看到在控制器文件上读取的值。

正在调用提交事件处理程序中的 else 块。正如您自己所说，在脚本中记录 postData 也返回所有值。问题在于您发送数据的方式。