Ajax 表单提交可视化 php 文件答案

【问题标题】：Ajax form Submit vizualizing the php fileAjax 表单提交可视化 php 文件
【发布时间】：2020-04-25 01:38:24
【问题描述】：

这是js

<script>
$(document).ready(function()
{
    $("#create-admin").submit(function(e)
    {
        var forms = document.getElementsByClassName('needs-validation');
        if(forms == null)
        {
                $.ajax({
                type: "POST",
                url: "crud_admin.php",
                dataType: "html",
                data: $("#create-admin").serialize()

            }).done(function(data){
                toastr.success(data, 'Success Alert', {timeOut: 5000});
            })
        }
        /**/
    })
})

这是表格

<form id="create-admin" class="needs-validation" autocomplete="off" action="crud_admin.php" method="POST" novalidate> ... </form>

这是 crud_admin.php vars 和 db 的东西 ..... 回复

 if($db_connection->query($sql_add)){

        echo "success";
    }else {
        echo "fail";}

当我点击提交表单时，所有数据都会发送到 db，它会将我重定向到 crud_admin.php 页面 enter image description here

【问题讨论】：

将e.preventDefault() 添加到submit 函数的顶部。
e.preventDefault();现在阻止提交，当我提交表单时甚至什么都不做。 @msg
阻止正常提交表单，javascript提交应该仍然有效。检查浏览器的调试工具，确认它正在发出请求，并且控制台没有错误，那么问题一定出在toastr调用中。
没有请求，控制台也没有错误，即使用烤面包机换一个简单的警报也不起作用。 @msg
ajax 调用在 if(forms == null) 内部，但它永远不会是 null，它会是一个可能为空的 NodeList。请添加一个工作示例。课程是否会在某个时候被删除？

标签： php jquery ajax post

【解决方案1】：

你可以这样做，正如@msg所说，尝试使用preventDefault()方法来防止表单的常见行为。试试这个：

$(document).on('submit', "#create-admin", function(e)
    {
        e.preventDefault();
        if($(this).hasClass('needs-validation'))
        {
           //Make validation before the ajax request
           $.ajax({
              type: "post",
              url: "crud_admin.php",
              data: $(this).serialize()
           }).done(function(data){
                toastr.success(data, 'Success Alert', {timeOut: 5000});
           })
        }
        /**/
    })

希望对你有帮助。

【讨论】：

e.preventDefault();现在阻止提交，当我提交表单时甚至什么都不做。

【解决方案2】：

尝试使用函数 preventDefault 添加一行代码。它应该放在 var forms = ......之前。

https://www.w3schools.com/jsref/event_preventdefault.asp

希望对你有帮助。

【讨论】：

e.preventDefault();现在阻止提交，当我提交表单时甚至什么都不做。