使用 AJAX 向数据库插入新行后更新表

Question

我会尽量说清楚。我正在尝试编写 CRUD。我有一张表格，显示有关产品的所有信息。要注册一个新项目，我有一个模态表单，它使用 AJAX 将数据发送到一个名为“registro.php”的 .php 文件，其中数据被插入到 MySQL 表中。

我希望在单击新项目表单的“提交”按钮后，表格会自动重新加载并显示新行，而无需刷新页面。

INSERT INTO 工作正常，但在插入新项目后，显示所有数据的 <table> 只是消失

所以，这是我的表单@index.php

<div class="modal fade" id="myModalNorm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" id="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">&times;</span>
                	<span class="sr-only">Cerrar</span>
                </button>
                <h4 class="modal-title" id="myModalLabel"> Registrar un artículo </h4>
            </div>

            <div class="modal-body">
            	<!-- Modal form -->
                <form name="nuevo_registro" id="nuevo_registro" action="" onsubmit="registrarNew(); return false">
                	<div class="form-group">
                    	<label for="descripcion">Descripción</label>
                    	<input type="text" class="form-control" id="descripcion" name="descripcion" placeholder="Descripción del artículo"/>
                  	</div>
                  	<div class="form-group">
                    	<label for="precio">Precio</label>
                    	<div class="input-group">
                    		<span class="input-group-addon">Bs.</span>
                    		<input type="text" class="form-control" id="precio" name="precio" placeholder="Precio"/>
                    	</div>
                  	</div>
                  	<div class="form-group">
                    	<label for="existencia">Existencia</label>
                    	<input type="text" class="form-control" id="existencia" name="existencia" placeholder="Unidades en existencia"/>
                  	</div>
                  	<button type="submit" name="submit" id="submitmodal" class="btn btn-default">Guardar</button>
                </form>
            </div>
        </div>
    </div>
</div>

这是index.php

底部的ajax代码

$(document).ready(function() {
	$('#nuevo_registro').submit(function(e){

		e.preventDefault();

		$.ajax({
			url: 'registro.php',
			type: 'POST',
			data: $(this).serialize()
		})
		.done(function(data){
			$('#myModalNorm').modal('toggle');
			$('#lista_articulos').fadeOut('slow', function(){
				$('#lista_articulos').fadeIn('slow').html(data);
			});
		})
		.fail(function(){
			alert('Ajax Submit Failed ...');
		});
	});
});

这是 registro.php 数据插入 MySQL 表的地方

<?php
if ( $_POST ) {

require_once 'dbconnection.php';

$descripcion=$_POST['descripcion'];
$precio=$_POST['precio'];
$existencia=$_POST['existencia'];

$query = "INSERT INTO producto (descripcion, precio, existencia, estado) VALUES ('$descripcion', '$precio', '$existencia', 'A')";
$conexion->query($query);
$conexion->close();
}
?>

希望你能帮助我，非常感谢。

Answer 1

有一天我需要这样做，这是我的解决方案：

1. 发送数据到 PHP 文件并插入到 mysql 数据库
2. 获取最后插入的 ID，查找有关该行的所有可用数据
3. 从该数据中创建一个数组并对其进行 json_encode
4. 在包含表格的主页上，找到表格并预先或附加您刚刚收到的数据。