Jquery 在html中单击按钮时调用Ajax

我正在学习Ajax调用，并尝试实现以下代码。我已经在HTML中创建了一个按钮，单击该按钮就会转到使用Ajax调用的指定URL

代码如下：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">    
            <p>{{user}}</p>
            </ul>
            <button id="button" onclick="test()">Click Me</button>
            <p></p>

            <script> 
                function test() {
                    var username = "test@liferay.com";
                    var password = "test";

                    function auth(username, password) {
                        var token = username+ ':' + password;
                        var hash = btoa(token);
                        return "Basic" + hash;
                    }

                    $.ajax({
                        type: 'GET',
                        url: 'http://192.166.7.23:8080/api/jsonws/user/get-user-by-id/user-id/10198',
                        success: function(data) {
                            $("p").text(data);
                        },
                        beforeSend: function(xhr) {
                            xhr.setRequestHeader('Authorization', auth(username, password));
                        },
                        complete:function() {},
                        error: function(data) {
                            alert(data)
                        }
                    });
                }
            </script>
        </div>
    </div>
</div>

但点击按钮时，呼叫不会发生。

---

请告诉我哪里做错了。

您看到控制台中有错误吗？没有。我没有看到任何错误，除非http://192.168.1.17:8080 将呼叫域精确匹配到端口号，则对您的请求的响应将被同一来源策略阻止。如果是这种情况，您应该会在控制台中看到有关警告。当我尝试时，我发现XHR无法加载。请求的源上不存在“访问控制允许源”。