jquery ajaxの呼び出しは単純なhtmlで簡単に実行できます

Question

私はUI開発者が初めてです。今、私はいくつかの既存のAPIからデータを取得するためにjQuery ajax呼び出しを使用しようとしています。以下は普通の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> 

、私は私の地元でこのページをロードしよう（IEへのURLをコピーhttp://localhost:63342/dirctorypath/html/index.htmlと入力してヒット）。アラートは一切表示されません。私は組み込みのajax呼び出しを実行するためにこのようなページを単にロードできるかどうか疑問に思います。または、私はそれをいくつかのWebサーバーを使って展開する必要があります。助けてください。

Answer 1

あなたはあなたのJSタグが混ざっているので、次の方が良いスタートを与えるはずです。実際のJSコードを独自の「スクリプト」タグに移動します。

さらに、あなたのHTMLの頭の中に

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

この行を移動する必要があります。

<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>