javascript - JQuery post 将 HTML 表单数据提交到 php 文件不起作用

Question

我是 Jquery 新手，但过去我对 html/php 做过很多工作。我需要做的是从弹出模式中提交数据，将其插入本地主机上的 mysql 数据库，然后通过 javascript 打开下一个弹出窗口。由于重定向到 php 页面不允许您加载 js，因此我研究了使用 jquery 将数据发布到我的 phpfile，然后它将插入数据并向 jquery 返回代码，然后 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') ).触发('重置');"相反。