CODEWITHSUNDEEP
javascriptjqueryhtml
Laodao
Laodao

Reputation: 1689

jquery ajax call can be simply run through plain html

I am new to UI dev. Right now, I am trying to use jQuery ajax call to fetch data from some existing api. Below is my code in a plain html.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
        $(document).ready(function () {
            $.ajax({
                    'url': 'http://baseURL/endpoint/',
                    'type': 'GET',
                    'content-Type': 'x-www-form-urlencoded',
                    'dataType': 'json',
                    'headers': {
                        'Authorization': 'Token 1234567890'
                    },
                    'success': function () {
                        alert('success');
                    },
                    'error': function () {
                        alert('Error');
                    }
            });
        });
    </script>

However, when I try to load this page on my local (copy url http://localhost:63342/dirctorypath/html/index.html to IE and hit enter). It doesn't show alert at all. I start to wonder if I can simply load page like this to make the embedded ajax call run. Or I have to deploy it using some web server. Please help.

Upvotes: 0

Views: 54

Answers (1)

Adam
Adam

Reputation: 1159

You've got your JS tags mixed up, the following should give you a better start. It moves the actual JS code into it's own 'script' tags.

Furthermore, you should move this line

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

into the head of your HTML.

<script>
        $(document).ready(function () {
            $.ajax({
                    'url': 'http://baseURL/endpoint/',
                    'type': 'GET',
                    'content-Type': 'x-www-form-urlencoded',
                    'dataType': 'json',
                    'headers': {
                        'Authorization': 'Token 1234567890'
                    },
                    'success': function () {
                        alert('success');
                    },
                    'error': function () {
                        alert('Error');
                    }
            });
        });
    </script>

Upvotes: 3

Related Questions