0

Tengo el siguiente código que realiza una petición a un WS por jquery:

<!DOCTYPE html>
<html>
 <head>
    <meta charset="UTF-8">
    <title>Calling Web Service from jQuery</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript">
        function CallWebService(){ 

                $.ajax({ 
                type: "POST", 
                url: "urldelWS",
                dataType: "json",
                contentType: 'application/json; charset=utf-8',
                data: "{parámetros de la petición}", 
                cache: false,
                async: false,
                success: function (data){}, 
                error: function (data){} 
                 }); 

        }
    </script>
</head>
<body>
    <h3>
        Calling Web Services with jQuery/AJAX
    </h3>
    <input type="submit" onclick="CallWebService()" value="Call web service"  />
</body>
</html>

Mi problema es que cuando presiono el botón, en la consola del navegador me muestra el siguiente error:

SCRIPT5009: '$' is undefined

Alguna idea de donde esta el error.

19
  • serciorate que te carga bien el jquery
    – jhbosch
    el 1 sep. 2017 a las 18:24
  • como puedo cerciorarme?
    – iRaver
    el 1 sep. 2017 a las 18:25
  • Puede ser un problema del DOM, que no esté listo cuando es invocado el código jQuery. Rodea tu código por: $(function() { function CallWebService(){ // resto del código } }); También pon https:// en lugar de http:// en la url de la librería jQuery y de paso usa una librería más actualizada, ya está en su versión 3: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    – A. Cedano
    el 1 sep. 2017 a las 18:39
  • con el inspector de codigo del navegador en la pestaña red o network si esta en ingles.prove el ejemplo que pones solo cambiando la url y me funciono, la maquina donde pruebas esto debe estar conectada a internet.Otra prueba que puedes hacer es copiar esto direccion http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js en una pestaña y ver si carga.
    – jhbosch
    el 1 sep. 2017 a las 18:40
  • Al rodear mi código con la sintaxis que me indicaron me arroja el siguiente error: SCRIPT5009: 'CallWebService' is undefined
    – iRaver
    el 1 sep. 2017 a las 18:46

1 respuesta 1

0

Respuesta editada con algunos cambios:

Veo dos cosas que debes mejorar en el código:

  1. La librería jQuery: conviene usar una url que empiece por https:// y usar una librería más actualizada. Ya la librería va por su versión 3. He optado por la librería de jQuery oficial, la de google me daba un error de url

  2. Hay que controlar que el DOM esté listo cuando invocamos nuestro código jQuery, rodeándolo por $(function() { ... });:

También, he optado por usar el elemento button directamente, escuchando el evento click del mismo desde jQuery.

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Calling Web Service from jQuery</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript"> 

    $(function() {
        $( "#btnCallWS" ).click(function() {
        alert("ok");
        myUrl="ruta/archivo.php"; //sustituir por datos reales
        valor="test"; //sustituir por datos reales
        datos={ clave : valor };  //sustituir por datos reales
        var request = $.ajax({
            url: myUrl,
            method: "POST",
            data: datos,
            dataType: "json",
            contentType: 'application/json; charset=utf-8',
            cache: false,
            async: false
        });

            request.done(function( msg ) {
                alert("Hubo éxito en la petición");
                console.log(msg);
            });

            request.fail(function( jqXHR, textStatus ) {
                alert( "Hubo un error: " + textStatus );
            });
        });
    });

    </script>
    </head>
    <body>
    <h3>
        Calling Web Services with jQuery/AJAX
     </h3>
     <button id="btnCallWS">Call Web Service</button>

Nota: Habría más cosas a mejorar en un futuro, como el uso de done en lugar de success para manejar la respuesta Ajax. Para ello puedes consultar: ¿Cual es la diferencia entre success y done?

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.