如何在同一页面上显示表单发布数据异步（没有刷新页面）？

Question

i am working on small project.. In one module, i need to do some entries using multiple forms. and i need that added form data(respective table data) to be displayed in same page after adding each value. So, that user will get to know what data he inserted.

Pls look at the code.

<div class="container">
<div class="row">
<br><br>
<h4> School Name:   <?php echo $sn; ?>
</h4>
</div>
</div>
 <div class="container col-md-offset-1 col-md-7">
  <h3>Budget/Students Count:</h3>
  <br>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#home">K6</a></li>
    <li><a href="#menu1">K7</a></li>
    <li><a href="#menu2">K8</a></li>
    <li><a href="#menu3">K9</a></li>
    <li><a href="#menu4">K10</a></li>
    <li><a href="#menu5">K11 SC</a></li>
    <li><a href="#menu6">K12 SC</a></li>
    <li><a href="#menu7">K11 NSC</a></li>
    <li><a href="#menu8">K12 NSC</a></li>
  </ul>
 
  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <form name="add_name" id="add_name" class="col-md-5">
        <table class="table" id="dynamic_field">
        <tr>
        <td><label style="font-size:10px;"></label></td>
        <td><label style="font-size:10px;"></label></td>
        <td><label style="font-size:12px;">Section</label></td>
        <td><label style="font-size:12px;">#of students</label> </td>
        <td><label style="font-size:10px;"></label></td>
        </tr>
        <tr>
        <td> <input type="text" name="idref" id="idref" class="form-control input-xs" value="<?php echo $idk; ?>" style=" width:35px; height:20px; visibility: hidden;"> </td>
        <td> K6: <input type="text" name="clas" id="clas" class="form-control input-xs" value="6" style=" width:35px; height:20px; visibility: hidden;"> </td>
        <td> <input type="text" name="k[]" id="k" class="form-control k_list " style="width:45px; height:28px"> </td>
        <td> <input type="text" name="name[]" id="name" class="form-control name_list" style="width:80px; height:28px"> </td>
        <td> <button type="button" name="add" id="add" class="btn btn-success btn-xs">add</button> </td>
        </tr>
        </table>
        <input type="submit" name="submit" id="submit" value="submit" class="btn-success btn-xs" style="margin-left:170px;">
        <input type="reset" name="Reset" class="btn-success btn-xs">
        </form>
    </div>
    <div id="menu1" class="tab-pane fade">
      <form name="add_name1" id="add_name1" class="col-md-5">
        <table class="table" id="dynamic_field1">
        <tr>
        <td><label style="font-size:10px;"></label></td>
        <td><label style="font-size:10px;"></label></td>
        <td><label style="font-size:12px;">Section</label></td>
        <td><label style="font-size:12px;">#of students</label> </td>
        </tr>
        <tr>
        <td> <input type="text" name="idref" id="idref" class="form-control input-xs" value="<?php echo $idk; ?>" style=" width:35px; height:20px; visibility: hidden;"> </td>
        <td> K7: <input type="text" name="clas" id="clas" class="form-control input-xs" value="7" style=" width:35px; height:20px; visibility: hidden;"> </td>
        <td> <input type="text" name="k[]" id="k" class="form-control k_list" style="width:45px; height:28px"> </td>
        <td> <input type="text" name="name[]" id="name" class="form-control name_list" style="width:80px; height:28px"> </td>
        <td> <button type="button" name="add" id="add1" class="btn btn-success btn-xs">add</button> </td>
        </tr>
        </table>
        <input type="submit" name="submit" id="submit1" value="submit" class="btn-success btn-xs" style="margin-left:170px;">
        <input type="reset" name="Reset" class="btn-success btn-xs">
        </form>
    </div>
    <div id="menu2" class="tab-pane fade">
      <form name="add_name2" id="add_name2" class="col-md-5">
        <table class="table" id="dynamic_field2">
        <tr>
        <td><label style="font-size:10px;"></label></td>
        <td><label style="font-size:10px;"></label></td>
        <td><label style="font-size:12px;">Section</label></td>
        <td><label style="font-size:12px;">#of students</label> </td>
        </tr>
        <tr>
        <td> <input type="text" name="idref" id="idref" class="form-control input-xs" value="<?php echo $idk; ?>" style=" width:35px; height:20px; visibility: hidden;"> </td>
        <td> K8: <input type="text" name="clas" id="clas" class="form-control input-xs" value="8" style="width:35px; height:20px; visibility: hidden;"> </td>
        <td> <input type="text" name="k[]" id="k" class="form-control k_list" style="width:45px; height:28px"> </td>
        <td> <input type="text" name="name[]" id="name" class="form-control name_list" style="width:80px; height:28px"> </td>
        <td> <button type="button" name="add" id="add2" class="btn btn-success btn-xs">add</button> </td>
        </tr>
        </table>
        <input type="submit" name="submit" id="submit2" value="submit" class="btn-success btn-xs" style="margin-left:170px;">
        <input type="reset" name="Reset" class="btn-success btn-xs">
        </form>
    </div>

Script:

$(document).ready(function() {
    $(".nav-tabs a").click(function(){
        $(this).tab('show');
    });
});

$(function() {
    var i = 1;
    $("#add").click(function() {
    i++;
    $('#dynamic_field').append('<tr id="row'+i+'"><td></td><td></td><td> <input type="text" name="k[]" id="k'+i+'" class="form-control name_list" style="width:35px; height:20px" > </td><td> <input type="text" name="name[]" id="name" class="form-control name_list" style="width:55px; height:20px"> </td><td> <button name="remove" id="'+i+'" class="btn btn-danger btn_remove btn-xs">X</button> </td></tr>');
});
$(document).on('click','.btn_remove', function(){
    var button_id = $(this).attr("id");
    $('#row'+button_id+'').remove();
});
$("#add1").click(function() {
    i++;
    $('#dynamic_field1').append('<tr id="row'+i+'"><td></td><td></td><td> <input type="text" name="k[]" id="k'+i+'" class="form-control name_list" style="width:35px; height:20px" > </td><td> <input type="text" name="name[]" id="name" class="form-control name_list" style="width:55px; height:20px"> </td><td> <button name="remove" id="'+i+'" class="btn btn-danger btn_remove btn-xs">X</button> </td></tr>');
});
$(document).on('click','.btn_remove', function() {
    var button_id = $(this).attr("id");
    $('#row'+button_id+'').remove();
});
$('#submit').click(function() {
    $.ajax({
        url: "section.php",
        data: $('#add_name').serialize(),
        success: function(data) {
            alert(data);
            $('#add_name')[0].reset();
        }
    });
});
    
$('#submit1').click(function() {
    $.ajax({
        url: "section.php",
        data: $('#add_name1').serialize(),
        success: function(data) {
            alert(data);
            $('#add_name1')[0].reset();
        }
    });
});

In section.php i have written sql query insertion. Now what i need is, i need this entered data to be displayed in same page. and table should be updated every time when i add new value.

</div>

Answer 1

$.ajax({

    type:"GET",

    url:"path/to/file",

    data: 'your data',

    success:function(html){

        $('.response').html(html); //this return response to your page
    }
 })