[SOLUCIONADO] Enviar datos con AJAX y recibirlos con JSON

Tik3r · #1 (**permalink**) 12/09/2017, 10:19

Buenas!!

Tengo un problema y es que quiero enviar unos datos de un formulario para recibir unos datos en JSON del servidor.

Pongo el código haber si veis que puede estar fallando ya que no me realiza ninguna acción....

HTML:

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="author" content="Antonio Romero">
        <meta name="robots" content="noindex, nofollow">
        <meta name="description" content="Aplicación para calcular el IBAN">
        <title>Calcular IBAN</title>
        <!-- Latest compiled and minified Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
        <!-- jQuery library 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
    </head>
    <body>
        <noscript>
            <div class="container">
                <div class="alert alert-warning alert-dismissible fade show" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                    <p>Para la funcionalidad completa de este sitio es necesario habilitar JavaScript. Estas son las <a href="http://www.enable-javascript.com/" target="_blank">instrucciones</a> para habilitar JavaScript en su navegador web</p>
                </div>
            </div>
        </noscript>
        <div class="container">
        <header class="row justify-content-center">
            <h1>Calcular IBAN</h1>
        </header>
        </div>
        <div id="data" class="container">
            <div id="calcform" class="border border-primary rounded">
            <form id="calculator" action="#" method="post" accept-charset="utf-8">
                <div class="form-group">
                    <label class="form-control-label" for="bank">
                        <span class="badge badge-info">Entidad</span>
                    </label>
                    <input id="bank" name="bank" type="text" class="form-control" placeholder="Código del banco" maxlength="20">
                </div>
                <div class="form-group">
                    <label class="form-control-label" for="office">
                        <span class="badge badge-info">Oficina</span>
                    </label>
                    <input id="office" name="office" type="text" class="form-control" placeholder="Código de la oficina" maxlength="4">
                </div>
                <div class="form-group">
                    <label class="form-control-label" for="DC">
                        <span class="badge badge-info">DC</span>
                    </label>
                    <input id="DC" name="DC" type="text" class="form-control" placeholder="Dígito de control" maxlength="2">
                </div>
                <div class="form-group">
                    <label class="form-control-label" for="BAC">
                        <span class="badge badge-info">Número de cuenta</span>
                    </label>
                    <input id="BAC" name="BAC" type="text" class="form-control" placeholder="Número de la cuenta bancaria" maxlength="10">
                </div>
                <div class="form-group">
                    <div class="row justify-content-center">
                    <button id="calc" type="button" class="btn btn-primary">Calcular</button>
                    </div>
                </div>
            </form>
            </div>
                <div id="msg"></div>
        </div>
        <div class="container">
            <footer class="row justify-content-center">
            <p>Diseñado y codificado por <span>Antonio Romero</span></p>
            </footer>
        </div>
        <!-- <div class="clearfix visible-sm-block"></div> -->
        <!-- jQuery library -->
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <!-- Popper -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
        <!-- Latest compiled and minified Bootstrap JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
        <script src="js/lib.js" type="text/javascript"></script>
    </body>
</html>

JS:

Código Javascript:

Ver original$(document).ready(function() {
    $('#calc').click(function(e) {
        e.preventDefault();
        $.ajax({
                url: 'IBAN.php',
                type: 'POST',
                data: $('#calculator').serialize(),
                beforeSend: function (obj) {
                    $('#data').html('<br><img alt="loading" src="img/loading.svg">');
                },
                complete: function (obj,check) {
                    if (check!="success") 
                    {
                        $('#msg').html('<br><div class="alert alert-danger" role="alert"><p>¡Ha ocurrido un error!</p></div>');
                    }
                },
                success: function (resp) {
                    $('#msg').html('');
                    
                    if ('IBAN' in resp) {
                        
                        var IBAN=resp.IBAN;
                        var Bank=IBAN.substr(4,4);
                        var Office=IBAN.substr(8,4);
                        var DC=IBAN.substr(12,2);
                        var BAC=IBAN.substr(14,10);
                        
                        $('#data').html('<table class="table table-hover table-responsive"><thead><tr class="bg-primary"><th>Descripción</th><th>Resultado</th></tr></thead><tbody><tr><th scope="row">Banco</th><td>'+resp.NameBank+'</td></tr><tr><th scope="row">Código Banco</th><td>'+Bank+'</td></tr><tr><th scope="row">Código Sucursal</th><td>'+Office+'</td></tr><tr><th scope="row">Dígito de control</th><td>'+DC+'</td></tr><tr><th scope="row">Número de cuenta</th><td>'+BAC+'</td></tr><tr><th scope="row">IBAN</th><td>'+IBAN+'</td></tr><tr><th scope="row">BIC</th><td>'+resp.BIC+'</td></tr><tr><th scope="row">Domiciliación de cuenta</th><td>'+Bank+' '+Office+' '+DC+' '+BAC+'</td></tr></tbody></table><div class="form-group"><div class="row justify-content-center"><button id="reset" type="button" class="btn btn-primary">Nuevo</button></div></div>');
                    }
                    else
                        {
                         $('#msg').html('<br><div class="alert alert-danger" role="alert"><p>'+resp+'</p></div>');   
                        }
                    
                }
            });
        });
});

PHP:

Código PHP:

Ver original<?php
if (isset($_POST['bank']))
 {
    require_once('lib/IBAN.class.php');
    
    $bank=$_POST['bank'];
    $office=$_POST['office'];
    $DC2=$_POST['DC'];
    $BAC=$_POST['BAC'];
    $obj=new IBAN($bank,$office,$DC2,$BAC);
     
     if ($BIC=$obj->getBIC())
     {
         if ($NameBank=$obj->getNameBank())
         {
             if ($IBAN=$obj->getIBAN())
             {
                 header('Content-type: application/json; charset=utf-8');
                 echo json_encode(array("IBAN"=>$IBAN,"NameBank"=>$NameBank,"BIC"=>$BIC));
             }
             else
             {
                 echo $obj->getError();
             }
         }
         else
         {
             echo $obj->getError();
         }
     }
     else
     {
         echo $obj->getError();
     }
}
else
{
    echo
    '<!DOCTYPE html>
    <html>
    <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>Calcular IBAN</title>
    <style type="text/css">
    #cuerpo { position: absolute; width: 50%; height: 30%; top: 35%; left: 25%; background: red; }
    img { position:relative; width: 15%; height: 45%; display:block; margin:auto; top:10%; }
    p { text-align: center; color:white; font-weight:bold; font-size:22pt; }
    </style>
    </head>
    <body>
    <div id="cuerpo">
    <br><img alt="OOPS" src="img/oops.jpg">
    <br><p>USA EL FORMULARIO</p>
    </div>
    </body>
    </html>';
}
exit;
 ?>

Gracias por adelantado!! Haber si me podéis echar una mano :D

Un saludo.

Alexis88 · #2 (**permalink**) 12/09/2017, 11:45

En el cuerpo de opciones de $.ajax(), coloca el par atributo-valor dataType: "JSON".

Tik3r · #3 (**permalink**) 12/09/2017, 12:11

Buenas!

Lo he probado y nada... :(

No lo puse para que el datatype fuese dinámico...

El problema es que no me carga ni esto:

Código Javascript:

Ver original$('#data').html('<br><img alt="loading" src="img/loading.svg">');

Además, le he puesto un alert y tampoco me sale:

Código Javascript:

Ver originalbeforeSend: function (obj) {
                    //alert("Envio");
                    $('#msg').html('envio');
                    //$('#msg').html('<br><img alt="loading" src="img/loading.svg">');

No sé que podrá ser la verdad... pero gracias por la respuesta.

Alexis88 · #4 (**permalink**) 12/09/2017, 13:51

Si no deseas añadir ese par atributo-valor (que es precisamente para procesar respuestas en formato JSON), puedes utilizar el método JSON.parse(). Si ninguna de ambas formas funciona, entonces el problema puede estar en el lado del servidor, es decir, desde donde viene la respuesta. Te sugiero utilizar la herramienta para desarrolladores del navegador para ver el problema que se presenta:

1. Pulsa la tecla F12. Se desplegará un panel ya sea en la parte derecha o inferior de la ventana.
2. Recarga la página.
3. Selecciona la pestaña "Network".
4. De la lista con nombres de archivos que se cargará en el panel, ubica al que corresponde con el archivo hacia el cual enviaste la petición.
5. Selecciónalo. Se cargará un panel a la derecha.
6. En ese último panel, selecciona la pestaña "Response". Allí se mostrará la respuesta del servidor.

Si ni con esto logras hallar el problema, quizá pueda estar antes, es decir, al momento de lanzar la petición. Quizá algún dato no sea correcto, como la dirección del archivo de destino, por ejemplo. En ese caso, pulsa la tecla F12 y ve directamente a la pestaña "Console". Se mostrará un mensaje en caso de que se haya producido alguna anomalía.

NOTA: Los pasos y nombres indicados son correspondientes a Google Chrome. En otros navegadores, la situación es bastante similar, difiriendo en la nomenclatura, aunque no en todos los casos.

mortiprogramador · #5 (**permalink**) 12/09/2017, 14:05

Saludo

¿Te aparece algún error en la consola del navegador?

En mi caso, ejecutando lo que pasaste, muestra esto:

Código Javascript:

Ver original$.ajax is not a function

Y pues como no encuentra el elemento ajax de jquery,
pues por eso es que no hace nada.

Si haces un alert antes del $.ajax verás que ese si se muestra,
en cuyo caso el problema es que tu versión de jquery
no tiene la funcionalidad de ajax, y lo que te toca es buscar
la versión que la trae, en tu caso, podrías hacer uso de esta.

Código Javascript:

Ver original<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Sin quitar la que ya tienes.

Tik3r · #6 (**permalink**) 13/09/2017, 05:06

Buenas a todos.

Gracias por todas las respuestas.

Si, parece que es la librería (copie la de bootstrap)... he activado la que tenía en comentario (la de google apis) y ya funciona el ajax.

Parece ser un conflicto entre dos librerías jquery ya que he querido usar bootstrap.

Saludos y mil gracias a los dos.