Question

我使用的是php，MySQL和Ajax。当我提交表单数据时，不存储在数据库表中。但是当把action =“insert.php”数据提交到数据库表但页面被刷新时。我被困在这里。任何人都可以建议我，我该如何解决这个问题？先谢谢你们。代码如下：

的index.php

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <form id="cForm" name="cForm" method="post">
            <label>Roll No : </label>
            <input type="text" name="roll" id="roll"><br>
            <label>Name : </label>
            <input type="text" name="name" id="name"><br>
            <label>Stream : </label>
            <select name="stream" id="stream">
                <option value="CSE">CSE</option>
                <option value="IT">IT</option>
                <option value="ECE">ECE</option>
                <option value="ME">ME</option>
            </select><br>
            <label>Age : </label>
            <input type="text" name="age" id="age"><br>
            <input type="submit" name="submit" value="Submit">
        </form>
        <script type="text/javascript">
    $(document).ready(function(){
        $('#cForm').on('submit', function(e){

            e.preventDefault();
            $.ajax({
                url:"insert.php",
                method:"POST",
                data:$('#cForm').serialize(),
                success:function(data)
                {
                    if(data == 'ok')
                    {
                        document.getElementById("cForm").reset();
                    }   
                }
            });
        });
    });
</script>
    </div>
</body>
</html>

insert.php

    <?php 
$con=mysqli_connect("localhost","root","","test");
if(isset($_POST['submit'])){
    $roll=$_POST['roll'];
    $name=$_POST['name'];
    $stream=$_POST['stream'];
    $age=$_POST['age'];
    $sql="INSERT INTO `student`(`name`, `stream`, `age`) VALUES ('$name','$stream','$age')";
    $result=mysqli_query($con,$sql);
    if(isset($result))
     {
      echo 'ok';
     }
}
 ?>

Answer 1

如果您希望页面执行不刷新。你需要删除表单提交表单jQuery，因为你已经调用了提交，它调用整个表单并将其发送到下一页并按照这样做

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <form id="cForm" name="cForm" method="post">
            <label>Roll No : </label>
            <input type="text" name="roll" id="roll"><br>
            <label>Name : </label>
            <input type="text" name="name" id="name"><br>
            <label>Stream : </label>
            <select name="stream" id="stream">
                <option value="CSE">CSE</option>
                <option value="IT">IT</option>
                <option value="ECE">ECE</option>
                <option value="ME">ME</option>
            </select><br>
            <label>Age : </label>
            <input type="text" name="age" id="age"><br>
            <input type="button" class="btn-submit" value="Submit">
        </form>
    </div>
    <script>
        jQuery(document).ready(function() {
            $('.btn-submit').click(function() {
                $.ajax({
                    url:"insert.php",
                    method:"POST",
                    dataType: "json",
                    data:$('#cForm').serialize(),
                    success:function(data)
                    {
                        if(data.status == 200)
                        {
                            document.getElementById("cForm").reset();
                        }   
                    }
                });
            });
        });
    </script>
</body>
</html>

您的insert.php页面替换

echo "ok";

通过

echo json_encode(['status'=>200,'message'=>'success']);

使用php mysql和ajax不会将值提交到数据库表

1 个答案: