将HTML表单数据提交到php文件的jQuery帖子不起作用

Question

我是Jquery的新手，但过去我在html / php上做了很多工作。我需要做的是从弹出模式中提交数据，将其插入localhost上的mysql数据库中，然后通过javascript打开下一个弹出窗口。由于重定向到php页面不允许您加载js，因此我研究了使用jquery将数据发布到我的phpfile中，然后将其插入数据并将代码返回到jquery，如果出现以下情况，它将加载下一个弹出窗口：帖子成功了。我尝试了不同的教程，但是我无法使代码正常工作。下面是我的index.php文件，其中包含弹出表单和jquery代码...

    <div id="survey1" class="w3-modal">
    <div class="w3-modal-content w3-animate-top w3-card-4">
        <div class="w3-container w3-padding-16">
            <div class="section-heading text-center">
                <div class="col-md-12 col-xs-12">
                    <h1>BASIC <span>DETAILS</span></h1>
                    <p class="subheading">The basics of your business and your website.</p>
                </div>
            </div>
            <form role="form" class="login-form" method="post" action="http://localhost/basic.php" id="basicForm">
                <div class="input-group form-group">
                    <span class="input-group-addon" id="basic-addon1"><i class="fas fa-envelope"></i></span>
                    <input type="text" class="form-control" placeholder="Full Name" aria-describedby="basic-addon1" name="name" id="name">
                </div>
                <div class="input-group form-group">
                    <span class="input-group-addon" id="basic-addon1"><i class="fas fa-envelope"></i></span>
                    <input type="text" class="form-control" placeholder="Email" aria-describedby="basic-addon1" name="email" id="email">
                </div>
                <div class="input-group form-group">
                    <span class="input-group-addon" id="basic-addon1"><i class="fas fa-envelope"></i></span>
                    <input type="text" class="form-control" placeholder="Business Name" aria-describedby="basic-addon1" name="bname" id="bname">
                </div>
                <div class="input-group form-group">
                    <span class="input-group-addon" id="basic-addon1"><i class="fas fa-envelope"></i></span>
                    <input type="text" class="form-control" placeholder="Business Type" aria-describedby="basic-addon1" name="btype" id="bemail">
                </div>
                <div id="response"></div>
                <button class="btn" type="submit" id="submit1" name="submit1" style="width:40%; float: right;"></button>
            </form>
            <script>
                $(document).ready(function(){
                    $('#basicForm').on('submit', function(e){
                        e.preventDefault();
                        $('#submit1').prop('disabled', true);
                        var name = $('#name').val();
                        var email = $('#email').val();
                        var bname = $('#bname').val();
                        var btype = $('#bemail').val();
                        if(name == '' || email == '' || bname == '' || btype == '')
                        {
                            $('#submit1').prop('disabled', false);
                        }
                        else
                        {
                            $.post(
                                'http://localhost/TDS/basic.php', 
                                $('#basicForm').serialize(),
                                function(data)
                                {
                                    $('form').triggered("reset");
                                    $('#submit1').prop('disabled', false);
                                }
                            );
                        }
                    });
                });
            </script>
        </div>
    </div>
</div>

这是我的php插入文件...

<?php 
require('connection.php')

if(isset($_POST["name"]))
{
    $name = mysqli_real_escape_string($con, $_POST["name"]);
    $email = mysqli_real_escape_string($con, $_POST["email"]);
    $bname = mysqli_real_escape_string($con, $_POST["bname"]);
    $btype = mysqli_real_escape_string($con, $_POST["btype"]);

    $insert_query = "INSERT INTO Details ('Name', 'Email', 'Business Name', 'Businesss 
Type') VALUES ('".$name."', '".$email."', '".$bname."', '".$btype."')";
     if(mysqli_query($con, $insert_query))
    {
        echo json_enchode(success => 1);
    }
    else
    {
        echo json_enchode(success => 0);
    }
}
?>

任何帮助将不胜感激！

Answer 1

代码本身可以，但是您需要加载jQuery本身。

将此内容放在HTML的开头：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

（（有关如何包括jQuery的提示，请参见此处：https://www.w3schools.com/jquery/jquery_get_started.asp）

[除此之外，代码对我有用：-表格提交正确；-PHP端点收到了正确的POST数据；

我没有检查保存到数据库，但是看起来还可以。无论如何，PHP部分不在问题范围内。

此外，代码本身也是一个小问题：没有诸如“ $（'form'）。triggered（'reset'）;”这样的方法，请使用“ $（'form'）。触发器（'重置'）;“代替。