使用php AJAX 进行Bootstrap验证

2uluyalo  于 2023-09-29  发布在  PHP
关注(0)|答案(1)|浏览(101)

我想序列化我的表单,以便它可以通过 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);
?>
db2dz4w8

db2dz4w81#

你好,我刚刚检查了我的本地主机。
不要将contentType和processData设置为false。让 AJAX 自己处理。然后您将看到在控制器文件中读取的值。
正在调用提交事件处理程序中的else块。在脚本中记录postData也会返回所有的值,正如你自己所说的。问题在于你如何发送数据。

相关问题