javascript - jquery ajax 调用可以简单地通过纯 html 运行

Question

我是 UI 开发新手。现在，我正在尝试使用 jQuery ajax 调用从一些现有的 api 中获取数据。下面是我的纯 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>

但是，当我尝试在本地加载此页面时(将 url http://localhost:63342/dirctorypath/html/index.html 复制到 IE 并按 Enter 键)。它根本没有表现出警觉。我开始想知道是否可以简单地加载这样的页面来运行嵌入式 ajax 调用。或者我必须使用一些网络服务器来部署它。请帮忙。

Answer 1

你的 JS 标签混淆了，下面的内容应该会给你一个更好的开始。它将实际的 JS 代码移动到它自己的“script”标签中。

此外，您应该移动此行

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

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