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

Question

我正在做一个小项目。在一个模块中，我需要使用多种形式进行一些条目。并且我需要在添加每个值后将添加的表单数据（相应的表格数据）显示在同一页面中。 这样，该用户就会知道他插入了哪些数据。

请看代码。

<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>

脚本：

$(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();
        }
    });
});

在 section.php 中，我编写了 sql 查询插入。 现在我需要的是，我需要将输入的数据显示在同一页面中。每次添加新值时都应该更新表格。

Answer 1

$.ajax({

    type:"GET",

    url:"path/to/file",

    data: 'your data',

    success:function(html){

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