javascript - 如何在同一页面上异步显示表单发布数据(不刷新页面)？

标签 javascript php html ajax

我正在做一个小项目.. 在一个模块中，我需要使用多种形式做一些条目。我需要在添加每个值后将添加的表单数据(相应的表数据)显示在同一页面中。 因此，该用户将知道他插入了哪些数据。

请看代码

<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 查询插入。 现在我需要的是，我需要将输入的数据显示在同一页面中。每次我添加新值时，表格都应该更新。

最佳答案 

$.ajax({

    type:"GET",

    url:"path/to/file",

    data: 'your data',

    success:function(html){

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

关于javascript - 如何在同一页面上异步显示表单发布数据(不刷新页面)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47131820/

上一篇：javascript - 如何以 Angular 发送附加数据和表单数据

下一篇：javascript - 组合图(面积和条形图)高位图

相关文章：

php - 第一个数据全局网关虚拟终端中的 key 文件

php - Beanstalk + Pheanstalk 延迟现有作业

javascript - Polymer 修复搞乱了 Javascript

javascript - 试图控制同步轮播

javascript - 每个句子的开头大写

javascript - 从 csv、xml 或 json 中存储的数据生成 HTML 代码

php - Drupal 8 Url 更改与 processOutbound 和 preg_replace

javascript - 将修改后的字符串传递回其原始 HTML 元素

javascript - Angular $httpBackend.expectGET - 响应 409 状态和自定义 statusText

javascript - 在静态 html 页面中保存计数器

©2024 IT工具网  联系我们