SharePoint 365 REST API基本处理-将结果放入div吗？

Question

Very new to all this.

As a learning exercise I'm trying to update a div id "message" on a SharePoint page with a result returned from a REST API call.

I can copy/paste my query url into my browser and get a result so I can't imagine that's the problem, but when I embed the following script I can't seem to get the success or failure to do anything.

Any help would be much appreciated.

<div id="message"></div>

<input type="button" value="Get" onclick="doGet();" >
<script>

function doGet()
  {

var call = jQuery.ajax({
        url: "https://X/sites/forms/_api/web/lists/getByTitle('Y')/items?$select=Z&$top=1",
        type: "GET",
        dataType: "json",
        headers: {
            Accept: "application/json;odata=verbose"
        }
    });

    call.done(function (data,textStatus, jqXHR) {
    alert("CallDone");
    var message = jQuery("#message");

    jQuery.each(data.d.results, function (index, item) {
    message.append("<br/>");
    message.append(item.Z);
    $get("message").innerHTML = item.Z;

    });
 });
    call.fail(function (jqXHR,textStatus,errorThrown){
    alert("Call failed");            
    alert("Error retrieving: " + errorThrown);  

    });

}


</script>

Answer 1

just make sure that you are making the correct call for the SP REST service:

<button id="button" type="button">Get Data</button>

$('#button').click(function (e) {
  e.preventDefault();
  doGet();
});

function doGet() {
var resultDiv = $('#message');
$.ajax({
    url: "https://X/sites/forms/_api/web/lists/getByTitle('Y')/items?$select=Z&$top=1",
    type: "GET",
    dataType: "json",
    headers: {
        Accept: "application/json;odata=verbose"
    },
    beforeSend: function () {
        console.info("Loading Data");
        resultDiv.empty();
        resultDiv.append(
            $('<p>', { class: 'bg-warning', text: 'Loading....' })
        );
    },
    success: function (data) {
        resultDiv.empty();
        $.each(data.value, function (index, value) {
            resultDiv.append(
                $('<p>', { class: 'bg-warning', text: value.YOURPROPERTY })
            );
        })
    },
    error: function (data) {
        console.error("Error retieving: " + data);
        resultDiv.empty();
        resultDiv.append(
            $('<p>', { class: 'bg-error', text: data })
        );
    }
});

}

Hope this helps, and if it does, do not forget to mark it as an answer