Foros del Web - Ver Mensaje Individual - 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.