如何使用jquery的$ ajax调用进行REST调用?

时间:2014-09-23 00:00:28

标签: javascript jquery ajax rest

我正在使用this question给出的答案。 结果,我的html页面如下所示:

<!DOCTYPE html>
<html>
<head>
    <script src="path\jquery-2.1.1"></script>
    <script>
        function myFunction() {
            alert('Clicked!');
            $.ajax({
                url: "http://localhost:51399/api/webapi",
                type: 'GET',
                success: function (data) {
                    alert(data.error);
                    $('#demo').html(data);
                },
                error: function (data) {
                    alert(data);
                }
            });
        }
    </script>
</head>
<body>

    <p>Click the button to trigger a function.</p>

    <button onclick="myFunction()">Click me</button>

    <p id="demo"></p>
</body>
</html>

当我点击按钮时没有任何反应。我不确定是否进行了ajax调用或者回调是否成功。我错过了什么以及如何修复它以便GET REST调用进入我指定的URL?

P.S。:我是javascript和jquery的初学者。

2 个答案:

答案 0 :(得分:1)

也许试试:

$.ajax({
  url: "http://blockchain.info/latestblock",
  type: 'GET',
  success: function(data) {
            $('#demo').html(data);
  },
  error: function(jqXHR, textStatus, errorThrown) {
                console.log("error: " + errorThrown + " || status: " + textStatus + " || data: " + jqXHR);
        }
});

或(更现代的方式):

function myFunction(){
  $.ajax({
    url: "http://blockchain.info/latestblock",
    type: 'GET'
  });
}

function handleData(data) {
  $('#demo').html(data);
}

function handleError(jqXHR, textStatus, errorThrown) {
                console.log("error: " + errorThrown + " || status: " + textStatus + " || data: " + jqXHR);
}

myFunction().fail(handleError)
myFunction().done(handleData);

答案 1 :(得分:0)

Wold的上述答案完全有效。但是,我的代码的问题是我试图使用其禁止的绝对路径引用jquery.js文件。一旦我将路径设为相对路径(并添加了扩展名......愚蠢的我),呼叫就会完成。