Php 在表单提交后立即添加最后添加的数据库记录

我有一个登记表，我想显示所有的注册人。我想输出数据库中的任何记录，然后在提交表单后再注册另一个显示该记录

我可以使用ajax成功注册记录并显示它们，但是在您重新加载/返回页面之前，它不会加载最后注册的记录。我希望最后一条记录在表单提交后立即加入它的兄弟。谢谢你的建议

home.php

<form id="register-student" method="post" action="process_student_registration.php" class="basic-form not-toggled">
    <h2>Enter Student Info to Register</h2>
    <fieldset id="student-name-group" class="form-group">
      <div class="split">
        <fieldset id="student-firstname-group">
          <label for="student-first-name">First Name:</label>
          <input id="student-first-name" type="text" name="student_first_name">
        </fieldset>
      </div>
      <div class="split">
        <fieldset id="student-lastname-group">
          <label for="student-last-name">Last Name:</label>
          <input id="student-last-name" type="text" name="student_last_name">
        </fieldset>
      </div>
    </fieldset>
    <fieldset class="submit-button">
      <div id="loading" class="hidethis"><img id="loading-image" src="../../images/ajax-loader.gif" alt="Loading..." /></div>
      <button id="register-student-button" type="submit" class="btn btn-success" name="register-student-button">Register Student</button>
    </fieldset>
  </form>
  <script>
     $(document).ready(function() { 
         var students = $.ajax({    //create an ajax request to load_page.php
            type: "GET",
            url: "fetch_students.php",             
            dataType: "html",   //expect html to be returned                
            success: function(response){                    
                $("#registered-students").html(response); 
                //alert(response);
            }

        });
    });
  </script>
<div id="registered-students"></div><!--End # registered-students-->

<?php
//Fetch the Students

//First lets make sure the user is allowed
require_once('../auth/agency_session.php');
//App Functions
require_once('../../includes/functions/app_functions.php');
//Agents Home Page
require_once('../../db_config.php');
$db_connect = connectDB($mysqli);
$agency_id = $_SESSION['ID'];

//Here we display all the students the agent has registered
//First check the connection
if(!mysqli_connect_errno()){
    if($stmt = $db_connect->prepare("SELECT student_id, student_first_name, student_last_name, student_email FROM students WHERE agency_id = ?")){
        //Bind Parameters
        $stmt->bind_param('i', $agency_id);
        //Execute
        $stmt->execute();
        //Store Results
        $stmt->store_result();
        //Get the rows
        $num_rows = $stmt->num_rows;
        //Bind the results
        $stmt->bind_result($student_id, $student_first_name, $student_last_name, $student_email);
        if($stmt->num_rows < 1){
            echo'<h3>No Students Registered</h3>';
        }
        else{ 
            //Fetch the values
            echo'<h3>Registered Students</h3>';
            echo'<ul class="grid">';
            while($stmt->fetch()){
                echo '<li id="'.$student_id.'" class="col"><a href="student_application/student_index.php?student='.$student_id.'">'.$student_first_name.' '.$student_last_name.'<span>'.$student_email.'</span></a></li>';
            }//End While
            echo'</ul>';
        }//End else
    }//End if no prepare statment happens
}//End if No connection
?>

jQuery(document).ready(function($){
// Get the form and place it into a variable
var form = $('#register-student');
//Creating an Event Listener for the submit buttom on the contact form
$(form).submit(function(event){
    $('.form-group').removeClass('.has-error');//Remove the error class on the things that have the error class
    $('.error-message').remove();//Remove the error messages completeley
    //Serialize the Form Data (Converts the data the user has entered into a key/value string that can be sent with an AJAX request)
    var formData = $(form).serialize();
    //Submit the form using AJAX
    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: formData,
        dataType :'json',
        encode:true
        //.done refers to a successful completion of the form
    })
    .done(function(data){
        //Log the data into the console so that we can be sure what is happening
        console.log(data);
        //If we do have errors create the 
        if(!data.successmessage){
            if(data.errors){
                $('.error').remove();
                $('.error-message').remove();

                $('#register-student').addClass('form-has-error'); // add the form-has-error-class
                $('#register-student-button').after('<p class="error">Please check the errors above.</p>');

                $(form).removeClass('success');
                $('.submit-success').remove();

            if(data.errors.student_first_name){
                $('#student-firstname-group').addClass('has-error'); // add the error class to show red input
                $('#student-firstname-group').append('<div class="error-message"><p>' + data.errors.student_first_name + '</p></div>'); // add the actual error message under our input
            }
            if(data.errors.student_last_name){
                $('#student-lastname-group').addClass('has-error'); // add the error class to show red input
                $('#student-lastname-group').append('<div class="error-message"><p>' + data.errors.student_last_name + '</p></div>'); // add the actual error message under our input
            }
        }
        } else if(data.successmessage){

            //Remove the errors stuff
            $('.error').remove();
            $('.error-message').remove();
            $('#register-student').removeClass('form-has-error'); // add the form-has-error-class
            $('#blocking').removeClass('hidethis').addClass('showthis');
            $('#loading').removeClass('hidethis').addClass('showthis');
            $('.submit-success').remove();
            //Add the success stuff
            $(form).addClass('success');

            setTimeout(function(){
                $('#blocking').removeClass('showthis').addClass('hidethis');
                $('#loading').removeClass('showthis').addClass('hidethis');
                $('#register-student').append('<div class="submit-success"><p>' + data.successmessage + '</p></div>');
                $(form).find('input, :text').val('');
                //Run the Get operation on the database to add newly added records to the list

            }, 5000);
            //Clear the form upon successful completion

        }
        //.fail referes to an unsuccessful completion of the form
    })
    .fail(function(data){
        //If there is a failed submission lets log the errors
        console.log(data);
    });
    //Stop the broweser from submitting the form
    event.preventDefault();
});

输入要注册的学生信息
名字：
姓氏：
注册学生
$（文档）.ready（函数（）{
var students=$.ajax（{//创建一个ajax请求以加载\u page.php
键入：“获取”，
url:“fetch_students.php”，
数据类型：“html”，//希望返回html
成功：功能（响应）{
$（“#注册学生”）.html（回复）；
//警报（响应）；
}
});
});

fetch_students.php

<form id="register-student" method="post" action="process_student_registration.php" class="basic-form not-toggled">
    <h2>Enter Student Info to Register</h2>
    <fieldset id="student-name-group" class="form-group">
      <div class="split">
        <fieldset id="student-firstname-group">
          <label for="student-first-name">First Name:</label>
          <input id="student-first-name" type="text" name="student_first_name">
        </fieldset>
      </div>
      <div class="split">
        <fieldset id="student-lastname-group">
          <label for="student-last-name">Last Name:</label>
          <input id="student-last-name" type="text" name="student_last_name">
        </fieldset>
      </div>
    </fieldset>
    <fieldset class="submit-button">
      <div id="loading" class="hidethis"><img id="loading-image" src="../../images/ajax-loader.gif" alt="Loading..." /></div>
      <button id="register-student-button" type="submit" class="btn btn-success" name="register-student-button">Register Student</button>
    </fieldset>
  </form>
  <script>
     $(document).ready(function() { 
         var students = $.ajax({    //create an ajax request to load_page.php
            type: "GET",
            url: "fetch_students.php",             
            dataType: "html",   //expect html to be returned                
            success: function(response){                    
                $("#registered-students").html(response); 
                //alert(response);
            }

        });
    });
  </script>
<div id="registered-students"></div><!--End # registered-students-->

<?php
//Fetch the Students

//First lets make sure the user is allowed
require_once('../auth/agency_session.php');
//App Functions
require_once('../../includes/functions/app_functions.php');
//Agents Home Page
require_once('../../db_config.php');
$db_connect = connectDB($mysqli);
$agency_id = $_SESSION['ID'];

//Here we display all the students the agent has registered
//First check the connection
if(!mysqli_connect_errno()){
    if($stmt = $db_connect->prepare("SELECT student_id, student_first_name, student_last_name, student_email FROM students WHERE agency_id = ?")){
        //Bind Parameters
        $stmt->bind_param('i', $agency_id);
        //Execute
        $stmt->execute();
        //Store Results
        $stmt->store_result();
        //Get the rows
        $num_rows = $stmt->num_rows;
        //Bind the results
        $stmt->bind_result($student_id, $student_first_name, $student_last_name, $student_email);
        if($stmt->num_rows < 1){
            echo'<h3>No Students Registered</h3>';
        }
        else{ 
            //Fetch the values
            echo'<h3>Registered Students</h3>';
            echo'<ul class="grid">';
            while($stmt->fetch()){
                echo '<li id="'.$student_id.'" class="col"><a href="student_application/student_index.php?student='.$student_id.'">'.$student_first_name.' '.$student_last_name.'<span>'.$student_email.'</span></a></li>';
            }//End While
            echo'</ul>';
        }//End else
    }//End if no prepare statment happens
}//End if No connection
?>

jQuery(document).ready(function($){
// Get the form and place it into a variable
var form = $('#register-student');
//Creating an Event Listener for the submit buttom on the contact form
$(form).submit(function(event){
    $('.form-group').removeClass('.has-error');//Remove the error class on the things that have the error class
    $('.error-message').remove();//Remove the error messages completeley
    //Serialize the Form Data (Converts the data the user has entered into a key/value string that can be sent with an AJAX request)
    var formData = $(form).serialize();
    //Submit the form using AJAX
    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: formData,
        dataType :'json',
        encode:true
        //.done refers to a successful completion of the form
    })
    .done(function(data){
        //Log the data into the console so that we can be sure what is happening
        console.log(data);
        //If we do have errors create the 
        if(!data.successmessage){
            if(data.errors){
                $('.error').remove();
                $('.error-message').remove();

                $('#register-student').addClass('form-has-error'); // add the form-has-error-class
                $('#register-student-button').after('<p class="error">Please check the errors above.</p>');

                $(form).removeClass('success');
                $('.submit-success').remove();

            if(data.errors.student_first_name){
                $('#student-firstname-group').addClass('has-error'); // add the error class to show red input
                $('#student-firstname-group').append('<div class="error-message"><p>' + data.errors.student_first_name + '</p></div>'); // add the actual error message under our input
            }
            if(data.errors.student_last_name){
                $('#student-lastname-group').addClass('has-error'); // add the error class to show red input
                $('#student-lastname-group').append('<div class="error-message"><p>' + data.errors.student_last_name + '</p></div>'); // add the actual error message under our input
            }
        }
        } else if(data.successmessage){

            //Remove the errors stuff
            $('.error').remove();
            $('.error-message').remove();
            $('#register-student').removeClass('form-has-error'); // add the form-has-error-class
            $('#blocking').removeClass('hidethis').addClass('showthis');
            $('#loading').removeClass('hidethis').addClass('showthis');
            $('.submit-success').remove();
            //Add the success stuff
            $(form).addClass('success');

            setTimeout(function(){
                $('#blocking').removeClass('showthis').addClass('hidethis');
                $('#loading').removeClass('showthis').addClass('hidethis');
                $('#register-student').append('<div class="submit-success"><p>' + data.successmessage + '</p></div>');
                $(form).find('input, :text').val('');
                //Run the Get operation on the database to add newly added records to the list

            }, 5000);
            //Clear the form upon successful completion

        }
        //.fail referes to an unsuccessful completion of the form
    })
    .fail(function(data){
        //If there is a failed submission lets log the errors
        console.log(data);
    });
    //Stop the broweser from submitting the form
    event.preventDefault();
});

处理学生注册。php

<form id="register-student" method="post" action="process_student_registration.php" class="basic-form not-toggled">
    <h2>Enter Student Info to Register</h2>
    <fieldset id="student-name-group" class="form-group">
      <div class="split">
        <fieldset id="student-firstname-group">
          <label for="student-first-name">First Name:</label>
          <input id="student-first-name" type="text" name="student_first_name">
        </fieldset>
      </div>
      <div class="split">
        <fieldset id="student-lastname-group">
          <label for="student-last-name">Last Name:</label>
          <input id="student-last-name" type="text" name="student_last_name">
        </fieldset>
      </div>
    </fieldset>
    <fieldset class="submit-button">
      <div id="loading" class="hidethis"><img id="loading-image" src="../../images/ajax-loader.gif" alt="Loading..." /></div>
      <button id="register-student-button" type="submit" class="btn btn-success" name="register-student-button">Register Student</button>
    </fieldset>
  </form>
  <script>
     $(document).ready(function() { 
         var students = $.ajax({    //create an ajax request to load_page.php
            type: "GET",
            url: "fetch_students.php",             
            dataType: "html",   //expect html to be returned                
            success: function(response){                    
                $("#registered-students").html(response); 
                //alert(response);
            }

        });
    });
  </script>
<div id="registered-students"></div><!--End # registered-students-->

<?php
//Fetch the Students

//First lets make sure the user is allowed
require_once('../auth/agency_session.php');
//App Functions
require_once('../../includes/functions/app_functions.php');
//Agents Home Page
require_once('../../db_config.php');
$db_connect = connectDB($mysqli);
$agency_id = $_SESSION['ID'];

//Here we display all the students the agent has registered
//First check the connection
if(!mysqli_connect_errno()){
    if($stmt = $db_connect->prepare("SELECT student_id, student_first_name, student_last_name, student_email FROM students WHERE agency_id = ?")){
        //Bind Parameters
        $stmt->bind_param('i', $agency_id);
        //Execute
        $stmt->execute();
        //Store Results
        $stmt->store_result();
        //Get the rows
        $num_rows = $stmt->num_rows;
        //Bind the results
        $stmt->bind_result($student_id, $student_first_name, $student_last_name, $student_email);
        if($stmt->num_rows < 1){
            echo'<h3>No Students Registered</h3>';
        }
        else{ 
            //Fetch the values
            echo'<h3>Registered Students</h3>';
            echo'<ul class="grid">';
            while($stmt->fetch()){
                echo '<li id="'.$student_id.'" class="col"><a href="student_application/student_index.php?student='.$student_id.'">'.$student_first_name.' '.$student_last_name.'<span>'.$student_email.'</span></a></li>';
            }//End While
            echo'</ul>';
        }//End else
    }//End if no prepare statment happens
}//End if No connection
?>

jQuery(document).ready(function($){
// Get the form and place it into a variable
var form = $('#register-student');
//Creating an Event Listener for the submit buttom on the contact form
$(form).submit(function(event){
    $('.form-group').removeClass('.has-error');//Remove the error class on the things that have the error class
    $('.error-message').remove();//Remove the error messages completeley
    //Serialize the Form Data (Converts the data the user has entered into a key/value string that can be sent with an AJAX request)
    var formData = $(form).serialize();
    //Submit the form using AJAX
    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: formData,
        dataType :'json',
        encode:true
        //.done refers to a successful completion of the form
    })
    .done(function(data){
        //Log the data into the console so that we can be sure what is happening
        console.log(data);
        //If we do have errors create the 
        if(!data.successmessage){
            if(data.errors){
                $('.error').remove();
                $('.error-message').remove();

                $('#register-student').addClass('form-has-error'); // add the form-has-error-class
                $('#register-student-button').after('<p class="error">Please check the errors above.</p>');

                $(form).removeClass('success');
                $('.submit-success').remove();

            if(data.errors.student_first_name){
                $('#student-firstname-group').addClass('has-error'); // add the error class to show red input
                $('#student-firstname-group').append('<div class="error-message"><p>' + data.errors.student_first_name + '</p></div>'); // add the actual error message under our input
            }
            if(data.errors.student_last_name){
                $('#student-lastname-group').addClass('has-error'); // add the error class to show red input
                $('#student-lastname-group').append('<div class="error-message"><p>' + data.errors.student_last_name + '</p></div>'); // add the actual error message under our input
            }
        }
        } else if(data.successmessage){

            //Remove the errors stuff
            $('.error').remove();
            $('.error-message').remove();
            $('#register-student').removeClass('form-has-error'); // add the form-has-error-class
            $('#blocking').removeClass('hidethis').addClass('showthis');
            $('#loading').removeClass('hidethis').addClass('showthis');
            $('.submit-success').remove();
            //Add the success stuff
            $(form).addClass('success');

            setTimeout(function(){
                $('#blocking').removeClass('showthis').addClass('hidethis');
                $('#loading').removeClass('showthis').addClass('hidethis');
                $('#register-student').append('<div class="submit-success"><p>' + data.successmessage + '</p></div>');
                $(form).find('input, :text').val('');
                //Run the Get operation on the database to add newly added records to the list

            }, 5000);
            //Clear the form upon successful completion

        }
        //.fail referes to an unsuccessful completion of the form
    })
    .fail(function(data){
        //If there is a failed submission lets log the errors
        console.log(data);
    });
    //Stop the broweser from submitting the form
    event.preventDefault();
});

jQuery（文档）.ready（函数（$）{
//获取表单并将其放入变量中
变量形式=$（“#注册学生”）；
//为联系人表单上的submit按钮创建事件侦听器
$（表格）。提交（功能（事件）{
$（'.form group'）.removeClass（'.has error'）；//删除具有error类的对象上的error类
$（'.error message'）.remove（）；//完全删除错误消息
//序列化表单数据（将用户输入的数据转换为可以通过AJAX请求发送的键/值字符串）
var formData=$（form）.serialize（）；
//使用AJAX提交表单
$.ajax({
键入：“POST”，
url:$（form.attr（'action'），
数据：formData，
数据类型：'json'，
编码：正确
//。完成是指成功完成表格
})
.完成（功能（数据）{
//将数据记录到控制台中，以便我们能够确定发生了什么
控制台日志（数据）；
//如果我们确实有错误，请创建
如果（！data.successmessage）{
if（data.errors）{
$（'.error'）.remove（）；
$（'.error message'）.remove（）；
$（“#注册学生”）.addClass（'form-has-error'）；//添加form-has error类
$（“#注册学生按钮”）。在（“
之后，请检查上面的错误。
”；
$（form.removeClass（'success'）；
$（'.submit success'）.remove（）；
if（data.errors.student\u first\u name）{
$（“#学生名组”）.addClass（'has-error'）；//添加错误类以显示红色输入
$（“#学生名组”）.append（“”+data.errors.student#u first_name+”
”）//在输入下添加实际的错误消息
}
if（数据.错误.学生姓氏）{
$（“#学生姓氏组”）.addClass（'has-error'）；//添加错误类以显示红色输入
$（“#学生姓氏组”）。追加（“”+data.errors.student_last_name+”
”）；//在输入下添加实际的错误消息
}
}
}else if（data.successmessage）{
//删除错误内容
$（'.error'）.remove（）；
$（'.error message'）.remove（）；
$（“#注册学生”）.removeClass（'form-has-error'）；//添加form-has error类
$（'#blocking'）.removeClass（'hidethis'）.addClass（'showthis'）；
$（“#加载”）.removeClass（'hidethis'）.addClass（'showthis'）；
$（'.submit success'）.remove（）；
//添加成功的东西
$（form.addClass（'success'）；
setTimeout（函数（）{
$（'#blocking'）.removeClass（'showthis'）.addClass（'hidethis'）；
$（“#加载”）.removeClass（'showthis'）.addClass（'hidethis'）；
$（“#注册学生”）.append（“”+data.successmessage+”
）；
$（form）.find（'input，：text'）.val（''）；
//在数据库上运行Get操作，将新添加的记录添加到列表中
}, 5000);
//成功完成后清除表格
}
//.失败指填写表格失败
})
.失败（功能（数据）{
//如果提交失败，让我们记录错误
控制台日志（数据）；
});
//阻止浏览者提交表单
event.preventDefault（）；
});

---

}))

我也有类似的问题。。。您正在处理两个不同的php文件：

process\u student\u registration.php

和

fetch\u students.php

我相信，如果您从一个文件执行所有处理，您的问题可能会得到解决：

您只传递了两条数据。您不必从

表单

收集数据，而可以通过

输入

收集数据，然后直接进入

jQuery

您的HTML集合如下所示：请注意用下划线替换的破折号

 <h2>Enter Student Info to Register</h2>    

    <input type="hidden" id="processStudent" value="process_student_registration.php">

    <fieldset id="student-name-group" class="form-group">
      <div class="split">
        <fieldset id="student_firstname_group">
          <label for="student_first_name">First Name:</label>
          <input id="student_first_name" type="text" name="student_first_name">
        </fieldset>
      </div>
      <div class="split">
        <fieldset id="student_lastname_group">
          <label for="student_last_name">Last Name:</label>
          <input id="student_last_name" type="text" name="student_last_name">
        </fieldset>
      </div>
    </fieldset>
    <fieldset class="submit_button">
      <div id="loading" class="hidethis"><img id="loading_image" src="../../images/ajax_loader.gif" alt="Loading..." /></div>
      <button id="register_student_button" type="submit" class="btn btn_success" name="register_student_button">Register Student</button>
    </fieldset>

    <div id="registered-students"></div>

输入要注册的学生信息
名字：
姓氏：
注册学生

你的jQuery

<script>
 $(document).ready(function() {
     $( "#register-student-button" ).click(function(){ 
        var url = $('#processStudent').val(); 
        var student_first_name = $('#student_first_name').val();    
        var student_last_name = $('#student_last_name').val();                              
        var postit = $.post( url, {student_first_name:student_first_name,student_last_name:student_last_name});     
            postit.done(function( data ) {
                alert('Student has been processed');
                $('#registered-students').html(data);
            });
    });     
});

$（文档）.ready（函数（）{
$（“#注册学生按钮”）。单击（函数（）{
var url=$（'#processStudent'）.val（）；
var student_first_name=$（'#student_first_name'）.val（）；
var student_last_name=$（'student_last_name'）.val（）；
var posit=$.post（url，{student