JavaScript execution error

Question

JavaScript execution error

Navigation

#1 by (0 votes)

0

I have the following code that makes a request to a WS by 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>

My problem is that when I press the button, the browser shows me the following error:

SCRIPT5009: '$' is undefined

Some idea of where the error is.

javascript jquery html ajax

asked by iRaver 01.09.2017 в 20:21

source

1 answer

How can I resize the images before they are uploaded to the server? RAZOR - C # - WebMatrix [duplicated] Unhandled error event using node.js

score 0 · Answer 1

Response edited with some changes:

I see two things that you should improve in the code:

The jQuery library: you should use a url that starts with https:// and use a more updated library. The library is already going for version 3. I opted for the official jQuery library, the google library gave me a url error

We must control that the DOM is ready when we invoke our jQuery code, surrounding it with $(function() { ... }); :

Also, I have chosen to use the button element directly, listening to the event click of it from 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>

Note: There would be more things to improve in the future, such as the use of done instead of success to handle the Ajax response. For this you can consult: What is the difference between success and done?