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

时间:2017-03-09 19:13:35

标签: javascript php mysql ajax

我会努力尽可能清楚。我正在尝试编写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();
}
?>

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

1 个答案:

答案 0 :(得分:0)

我需要这样做,有一天,这是我的解决方案:

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