ojgarciab/origen.html

## origen.html
<!DOCTYPE html>
<html lang="es">

<head>
    <title>Título de ejemplo</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
</head>

<body style="padding-top: 2rem;">
    <table id="ticket" style="border: 1px solid blue;">
        <thead>
            <th>IDP</th>
            <th>Nombre</th>
            <th>Marca</th>
            <th>Cantidad</th>
            <th>-</th>
        </thead>
        <tbody>
        </tbody>
    </table>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
    listarDetalle();
});

function listarDetalle(){
    var accion="listar";
    var URLprotocol = window.location.protocol;
    $.ajax({
        type: "post",
        url: "//localhost/258b5456d3767ead8989893953af2859/recepcion.php",
        data: { "accion":accion},
        dataType:'json',
        error: function(){
            alert("error petición ajax");
        },
        success: function(data){
            console.log(data);
            for (var i = 0; i < data.length; i++) {
                var newRow =
                    "<tr>" +
                    "<td>" + data[i].idp + "</td>" +
                    "<td>" + data[i].nombre + "</td>" +
                    "<td>" + data[i].marca + "</td>" +
                    "<td>" + data[i].cantidad + "</td>" +
                    "<td><input type='radio' id='"+data[i].idproducto+"' name='seleccion'/></td>"+
                    "</tr>";
                $(newRow).appendTo("#ticket tbody");
            }
        }
    }).fail( function( jqXHR, textStatus, errorThrown ) {
        if (jqXHR.status === 0) {
            alert('Not connect: Verify Network.');
        } else if (jqXHR.status == 404) {
            alert('Requested page not found [404]');
        } else if (jqXHR.status == 500) {
            alert('Internal Server Error [500].');
        } else if (textStatus === 'parsererror') {
            alert('Requested JSON parse failed.');
        } else if (textStatus === 'timeout') {
            alert('Time out error.');
        } else if (textStatus === 'abort') {
            alert('Ajax request aborted.');
        } else {
            alert('Uncaught Error: ' + jqXHR.responseText);
        }
    });
};
</script>
</body>

</html>

## recepcion.php
<?php
/* Listado de URLs (orígenes) que tienen acceso al API (sin / al final) */
$autorizados = [
  'http://1.2.3.4',
  'http://localhost',
  'https://localhost',
];
/* Comprobamos que el origen esté en el listado de orígenes permitidos */
if (
  isset($_SERVER['HTTP_ORIGIN'])
  && in_array($_SERVER['HTTP_ORIGIN'], $autorizados) === true
) {
  /* Sólo autorizamos el origen validado */
  header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
}
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
  /* No debe ejecutarse el resto del script mediante la consulta OPTIONS previa */
  die();
}
header('Content-Type: application/json; charset=utf-8');
echo json_encode([
  [
    'idp' => '1',
    'nombre' => 'Nombre 1',
    'marca' => 'Marca 1',
    'cantidad' => 4,
  ],
]);
	<!DOCTYPE html>
	<html lang="es">

	<head>
	<title>Título de ejemplo</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
	</head>

	<body style="padding-top: 2rem;">
	<table id="ticket" style="border: 1px solid blue;">
	<thead>
	<th>IDP</th>
	<th>Nombre</th>
	<th>Marca</th>
	<th>Cantidad</th>
	<th>-</th>
	</thead>
	<tbody>
	</tbody>
	</table>

	<!-- jQuery -->
	<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
	<script>
	$(document).ready(function() {
	listarDetalle();
	});

	function listarDetalle(){
	var accion="listar";
	var URLprotocol = window.location.protocol;
	$.ajax({
	type: "post",
	url: "//localhost/258b5456d3767ead8989893953af2859/recepcion.php",
	data: { "accion":accion},
	dataType:'json',
	error: function(){
	alert("error petición ajax");
	},
	success: function(data){
	console.log(data);
	for (var i = 0; i < data.length; i++) {
	var newRow =
	"<tr>" +
	"<td>" + data[i].idp + "</td>" +
	"<td>" + data[i].nombre + "</td>" +
	"<td>" + data[i].marca + "</td>" +
	"<td>" + data[i].cantidad + "</td>" +
	"<td><input type='radio' id='"+data[i].idproducto+"' name='seleccion'/></td>"+
	"</tr>";
	$(newRow).appendTo("#ticket tbody");
	}
	}
	}).fail( function( jqXHR, textStatus, errorThrown ) {
	if (jqXHR.status === 0) {
	alert('Not connect: Verify Network.');
	} else if (jqXHR.status == 404) {
	alert('Requested page not found [404]');
	} else if (jqXHR.status == 500) {
	alert('Internal Server Error [500].');
	} else if (textStatus === 'parsererror') {
	alert('Requested JSON parse failed.');
	} else if (textStatus === 'timeout') {
	alert('Time out error.');
	} else if (textStatus === 'abort') {
	alert('Ajax request aborted.');
	} else {
	alert('Uncaught Error: ' + jqXHR.responseText);
	}
	});
	};
	</script>
	</body>

	</html>
	<?php
	/* Listado de URLs (orígenes) que tienen acceso al API (sin / al final) */
	$autorizados = [
	'http://1.2.3.4',
	'http://localhost',
	'https://localhost',
	];
	/* Comprobamos que el origen esté en el listado de orígenes permitidos */
	if (
	isset($_SERVER['HTTP_ORIGIN'])
	&& in_array($_SERVER['HTTP_ORIGIN'], $autorizados) === true
	) {
	/* Sólo autorizamos el origen validado */
	header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
	}
	if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
	/* No debe ejecutarse el resto del script mediante la consulta OPTIONS previa */
	die();
	}
	header('Content-Type: application/json; charset=utf-8');
	echo json_encode([
	[
	'idp' => '1',
	'nombre' => 'Nombre 1',
	'marca' => 'Marca 1',
	'cantidad' => 4,
	],
	]);