Question

我想在不重新加载页面的情况下将数据插入数据库，但是可能存在一些问题。这是我的代码

我的问题是，我无法通过index.php中的附加表单发送数据库中的数据，而且当单击“提交”按钮时，什么也没有发生，我不知道我在做什么。

index.php

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <form id="myform" action="db.php" method="post">
    <input type="text" name="name" id="name">
    <input type="text" name="email" id="email">
    <input type="button" name="submit" value="submit" id="submit">
    </form>
    <div id="result"></div>



</body>
</html>

<script>

    $(document).ready(function(){
        $('#submit').click(function(){
            var name = $('#name').val();
            var email = $('#email').val();

            if(name == '' && email =='')
            {
                $('#result').html('<span>all fields are required</span>');
            }
            else
            {
                $.ajax({
                    url :"db.php",
                    method :"POST",
                    data :$('#myform').serialize();
                    beforeSend:function(){
                        $('#result').html('<span>loading..!</span>');
                    },


                });
            }
        });
    });
</script>

db.php

<?php
$con = mysqli_connect("localhost","root","","sampl1");

if(isset($_POST['submit']))
{

    $name = $_POST['name'];
    $email = $_POST['email'];

$sql = "insert into jquery (name,email) values('$name','$email')";
$res =mysqli_query($con,$sql);

if($res)
{
    echo "<p>you have entered</p>";
    echo "<p>name :".$[name]."</p>";
    echo "<p>email :".$[email]."</p>";
}
}
?>

Answer 1

使用开发人员工具F12键单击提交时，在网络选项卡中，将显示AJAX，您可以在其中检查它是否正常工作，以及单击它会收到什么响应。您可以使用alert（“ error”）来检查您的JavaScript是否正常工作。

检查db.php的路径是否正确。就您的代码而言，它应该在运行Ajax的文件夹中。

  <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
        <form id="myform" action="db.php" method="post">
        <input type="text" name="name" id="name">
        <input type="text" name="email" id="email">
        <input type="button" name="submit" value="submit" id="submit">
        </form>
        <div id="result"></div>



    </body>
    </html>

    <script>

        $(document).ready(function(){
            $('#submit').click(function(){
                var name = $('#name').val();
                var email = $('#email').val();

                if(name == '' && email =='')
                {
                    $('#result').html('<span>all fields are required</span>');
                }
                else
                {
                    $.ajax({
                        url :"db.php",
                        method :"POST",
                        data :{'name':name,'email':email},                        
                        beforeSend:function(){
                            $('#result').html('<span>loading..!</span>');
                        },


                    });
                }
            });
        });
    </script>

db.php

<?php
$con = mysqli_connect("localhost","root","","sampl1");

if(isset($_POST['submit']))
{

    $name = $_POST['name'];
    $email = $_POST['email'];

$sql = "insert into jquery (name,email) values('$name','$email')";
$res =mysqli_query($con,$sql);

if($res)
{
    echo "<p>you have entered</p>";
    echo "<p>name :".$[name]."</p>";
    echo "<p>email :".$[email]."</p>";
}
}
?>

Answer 2

$.ajax({
                url :"what.php",
                method :"POST",
                data :$('#myform').serialize(),
                beforeSend:function(){
                    $('#result').html('<span>loading..!</span>');
                },
                success:function(data){
                    alert(data);
                }


            });

删除该“;”在data :$('#myform').serialize()之后，并以逗号代替。我不知道这是一个简单的拼写错误还是语法问题而回答了这个问题。在您的php文件中：

echo "<p>name :".$name."</p>";
echo "<p>email :".$email."</p>";

删除方括号

无需重新加载页面即可插入数据

2 个答案: