Cómo conectar un archivo html con php ajax en servidor extensión Chrome

[Jdel]

Hola a todos:

Tengo una página html con un formulario en el cual se ingresa una cantidad "x" y ésta es recibida por una página php que devuelve el resultado habiendo realizado la conversión.

Hasta aquí funciona todo bien, en localhost y subiendo los archivos al servidor de dominio.

Ahora deseo que este formulario funcione como una extensión de Chrome, tengo todo hecho, pero me dicen que para que me muestre los resultados del "resultado.php", que tengo en el servidor, debo usar Ajax.

Y aquí es mi ignorancia supina, no se como implementar dicho código; lo que necesito es saber cual es el código y donde debo insertarlo, en el php? en un archivo aparte?.

Muchas gracias por la ayuda que puedan brindarme.

Jdel

[DRANXZ88]

Ajax debes situarlo en un archivo de javascript; tenes que crear tu ajax y pasar la ubicación de tu archivo php.

Este seria un ejemplo de ajax:

Código: [Seleccionar]

function eliminar_ajax(id) {
    var datos_formulario = "id_producto=" + id;
    console.log("--> " + datos_formulario);
    $.ajax({
        type: 'POST',
        url: "frm/productos/php/eliminar.php",
        data: datos_formulario,
        dataType: 'json',
        beforeSend: function (objeto) {
            mostrar_mensaje('footer', 'danger', 'Accediendo al servidor :)', 'Enviando datos al servidor.');
        },
        success: function (json) {
            $("#modalConfirmar").modal("hide");
            mostrar_mensaje('footer', 'danger', 'Opperación Existosa :)', 'Registro Guardado.');
            buscar();
            console.log("eliminar buscar");
        },
        error: function (e) {
            mostrar_mensaje('footer', 'danger', 'Corrige el error :)', 'No se puede conectar al servidor.');
        },
        complete: function (objeto, exito, error) {

        }
    });
Este código que yo hice es para eliminar un producto usando un formulario; donde dice el url tenes que pasarle la ubicación de tu archivo php que quieras llamar en tu caso parece resultado.php

[Jdel]

Hola DRANXZ788, primero muchas gracias por tu respuesta y por supuesto gracias a todos los del foro que me reciben.
Un par de dudas aún:
1) el link llamando a este archivo ".js" lo debo colocar en la cabecera de la página resultado.php o en la página que llama al php que es la que contiene el formulario a llenar.
2) debería cambiar "eliminar_ajax" por otro nombre? como así también "id_producto"?.

Nuevamente agradecido
Sdls.
Jdel

[DRANXZ88]

Si el archivo donde esta el ajax es .js si tenes que cambiar el nombre todo depende de que quiere que haga y el id recibe como parámetros pero puede ser sin parámetros cambien

Código: [Seleccionar]

  url: "frm/productos/php/eliminar.php",Donde esta url ahi tenes que poner la dirección de tu archivo php

[Jdel]

Sigo sin dar en la tecla:
1) en que lugar tengo que pegar el código ajax? en la home donde existe el formulario a llenar? en que lugar?
2) en la página resultado.php (que es llamada por la home para que realice el cáculo) en que parte de este php?
Se que no estoy lejos del reesultado pero no doy con él.
Todo el resto me funciona perfecto.
Muchas gracias y saludos
Jdel

[DRANXZ88]

Y podes cear una carpeta donde se va ir el archivo js. Yo estoy acostubrado a trabajar de esta manera seria algo asi.

Creas una carpeta para cada uno agrupando por programa o extensiones.

Ejemplo:

Carpeta css
Carpeta php
Carpeta js
y el index.php

[Jdel]

Correcto, así tengo yo los trabajos css, js, img, etc.
Ahora que tengo el ajax en la carpeta js, desde que página lo llamo? desde la home.html que tiene el fomulario o desde la resultado.php que es la que resuelve el cálculo?
Ejem: <script src="../../js/ajax.js"></script>

Realmente agradecido por la rápida respuesta.
Cordialmente
Jdel

[DRANXZ88]

No se si vos tenes algún botón para o asi directo si tenes botón podes poner por ejemplo

Código: [Seleccionar]

<script>
$("#botonIngresar").on('click', function () {
                IgresarProducto();
            });
</script>yo hago asi porque uso jquery IgresarProducto() seria tu función donde se encuentra en ajax y el script va a poner tu index donde se encuentra el formulario

[Jdel]

Nuevamente agradecido, ya bastante mas cerca de la solución creo:
Aquí copio código del php que esta en la pagina "resultado.php" y código de la index.html donde está el formulario que lo llama:

Página php de nombre "resultado.php, con el procesador del formulario:

Código: [Seleccionar]

<?php

// Hacemos los cálculos
// El operador * sirve para multiplicar.
$roble= $pies * 300 / 1000;  // 300 seria el número de pies para roble
$pino= $pies * 100 / 1000; // 100 seria el número de pies para pino 
$cedro= $pies * 100 / 1000; // 100 seria el número de pies para cedro


// Mostramos los resultados

echo "<br>";
echo "<h2>Necesitaremos lo siguiente:</h2>";
echo "<br>";
echo ''.$roble. '  pies  de roble, ';
echo "<br>";
echo ''.$pino.' pies de pino,';
echo "<br>";
echo ''.$cedro.' pies de cedro,';
echo "<br>";
?>


   Página index.html con el formulario
   
   

Código: [Seleccionar]

<form name='pies' method="get" action="resultado.php" accept-charset="utf-8">
        <div class="field name-box">

            <input  class="input" type="number" name="pies" id="pies" placeholder="Son...?" required maxlength="20" size="50"/>
            <label for="number">Cantidad</label>
           
        </div>
<br>
<br><div>
        <input class='input' type='submit' value='Enter'>
        </div>
  </form>

[DRANXZ88]

Una observación he visto que tu código php no esta recuperando el valor del "pies" eso lo que le pasa de tu formulario pero no recupera en tu php.

Tendría que ponerle un código para recuperar al principio seria así.

Código: [Seleccionar]

$pies=$_GET['pies'];
Aunque por cuestión de seguridad se recomienda usar post el método de envío y recuperación.

[DRANXZ88]

Modifiqué alguna cosa de tu ejercicios para usar con ajax te pego el código para guiarte.

Este es el index.php

Yo le llamo php puede ser html pero es mejor php. En este va a estar el formulario y el codigo javascript al final como uso jquery le agrego el enlace.

Código: [Seleccionar]

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>

        <form id = "formResultado">
            <div class = "field name-box">
                <input class = "input" type = "number" name = "pies" id = "pies" placeholder = "Son...?" required maxlength = "20" size = "50"/>
                <label for = "number">Cantidad</label>

            </div>
            <br>
            <br><div>
                <input id = "botonEnviar" type = 'button' value = 'Enter'>
            </div>
        </form>
        <div id = "resultado">

        </div>
        <script src="js/funciones.js" type="text/javascript"></script>
        <script src="js/jquery.min.js" type="text/javascript"></script>
        <script>
            $("#botonEnviar").on('click', function () {

                mostrarResultdo();
            });
        </script>
    </body>
</html>

Codigo php rultado.php

En este va a estar el codigo php que va a hacer los calculos.

Código: [Seleccionar]

<?php
// Hacemos los cálculos
// El operador * sirve para multiplicar.
$pies=$_POST['pies'];
$roble= $pies * 300 / 1000;  // 300 seria el número de pies para roble
$pino= $pies * 100 / 1000; // 100 seria el número de pies para pino 
$cedro= $pies * 100 / 1000; // 100 seria el número de pies para cedro


$datos ='<br>';
$datos.='<h2>';
$datos.='Necesitaremos lo siguiente:';
$datos.='</h2>';
$datos.='<br>';
$datos.=''.$roble. '  pies  de roble, ';
$datos.='<br>';
$datos.=''.$pino.' pies de pino,';
$datos.='<br>';
$datos.=''.$cedro.' pies de cedro,';
$datos.='<br>';

$arr = ["datos" => $datos];
echo json_encode($arr);



La función código javascrit

En este va a ir el ajax. El ajax se utiliza para que no se recargue la pagina cada vez que haga un procedimiento.

Código: [Seleccionar]

function mostrarResultdo() {
      var datos_formulario = $("#formResultado").serialize();
      console.log("datos_formulario--> "+datos_formulario);
    $.ajax({
        type: 'POST',
        url: 'php/resultado.php',
        data: datos_formulario,
        dataType: 'json',
        beforeSend: function (objeto) {

        },
        success: function (json) {
            $("#resultado").html(json.datos);
        },
        error: function (e) {

        },
        complete: function (objeto, exito, error) {

        }
    });
}
Y cada uno se va en una carpeta diferente.

Cualquier consulta y duda a la orden para eso estamos en el foro para ayudarnos.

[DRANXZ88]

Una cosa mas para publicar en el foro hay una norma a seguir te sugiero que lea este link.
https://www.aprenderaprogramar.com/foros/index.php?topic=1460.0