Javascript jqueryajax调用可以简单地通过普通html运行

我是UI开发新手。现在，我正在尝试使用jQueryAjax调用从一些现有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>

$（文档）.ready（函数（）{
$.ajax({
“url”：”http://baseURL/endpoint/',
'type'：'GET'，
“内容类型”：“x-www-form-urlencoded”，
“数据类型”：“json”，
“标题”：{
“授权”：“令牌1234567890”
},
“成功”：函数（）{
警惕（“成功”）；
},
“错误”：函数（）{
警报（“错误”）；
}
});
});

---

但是，当我尝试在本地加载此页面时（将url复制到IE并点击enter）。它根本不显示警报。我开始怀疑是否可以像这样简单地加载页面以运行嵌入式ajax调用。或者我必须使用一些web服务器来部署它。请帮忙。

你的JS标签搞错了，下面应该给你一个更好的开始。它将实际的JS代码移动到自己的“脚本”标记中

此外，你应该移动这条线

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

$（文档）.ready（函数（）{
$.ajax({
“url”：”http://baseURL/endpoint/',
'type'：'GET'，
“内容类型”：“x-www-form-urlencoded”，
“数据类型”：“json”，
“标题”：{
“授权”：“令牌1234567890”
},
“成功”：函数（）{
警惕（“成功”）；
},
“错误”：函数（）{
警报（“错误”）；
}
});
});

你的JS标签弄混了，下面应该给你一个更好的开始。它将实际的JS代码移动到自己的“脚本”标记中

此外，你应该移动这条线

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

$（文档）.ready（函数（）{
$.ajax({
“url”：”http://baseURL/endpoint/',
'type'：'GET'，
“内容类型”：“x-www-form-urlencoded”，
“数据类型”：“json”，
“标题”：{
“授权”：“令牌1234567890”
},
“成功”：函数（）{
警惕（“成功”）；
},
“错误”：函数（）{
警报（“错误”）；
}
});
});

您在控制台中看到了什么？哪个控制台？我使用F12，可以在Debugger选项卡中看到上面的代码。此外，根据日志，似乎没有API请求进入我的API服务器。这可能意味着api请求甚至没有发出。如果您在开发者工具中按Esc键（按F12的窗口），它将打开一个控制台，错误和日志命令将打印到该控制台，您可以在该控制台中动态执行JavaScript。编辑：假设您使用的是Chrome。如果没有，Esc快捷方式可能不起作用，但在同一个开发人员工具窗口中仍然应该有一个控制台选项卡。您在控制台中看到了什么？哪个控制台？我使用F12，可以在Debugger选项卡中看到上面的代码。此外，根据日志，似乎没有API请求进入我的API服务器。这可能意味着api请求甚至没有发出。如果您在开发者工具中按Esc键（按F12的窗口），它将打开一个控制台，错误和日志命令将打印到该控制台，您可以在该控制台中动态执行JavaScript。编辑：假设您使用的是Chrome。如果不是的话，Esc快捷方式可能不起作用，但在同一个开发者工具窗口中仍然应该有一个控制台选项卡。我会明确地添加这样做的原因-您不能在同一个脚本标记中将src属性与实际JavaScript内容混合，将jQuery脚本标记移动到头部将确保在页面其余部分之前加载它。了解它为什么不起作用，而不仅仅是如何修复它，有助于避免将来出现类似的问题。我要明确说明这样做的原因——不能将src属性与同一脚本标记中的实际JavaScript内容混合使用，将jQuery脚本标记移动到头部将确保在页面其余部分之前加载它。了解它为什么不起作用，而不仅仅是如何修复它，有助于避免将来出现类似问题。