jquery ajax调用可以简单地通过普通的html运行

时间:2017-08-31 20:11:22

标签: javascript jquery html

我是UI dev的新手。现在,我正在尝试使用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>

但是,当我尝试在我的本地加载此页面时(将网址http://localhost:63342/dirctorypath/html/index.html复制到IE并点击回车)。它根本不显示警报。我开始怀疑我是否可以简单地加载这样的页面以使嵌入式ajax调用运行。或者我必须使用一些Web服务器部署它。请帮忙。

1 个答案:

答案 0 :(得分:3)

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