How Retrieve Sharepoint List data using Jquery

Question

I am trying to retrieve list data using Jquery. But I am getting the whole list Html page not the values from the List. Jquery Code is as follows

<script src="../_layouts/15/SharePointProject1/Scripts/jquery-1.3.2.js"></script>
<script language = "javascript" type="text/javascript">
    function GetAnnouncementData() {
        var soapPacket = "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
   <soapenv:Body> \
    <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
     <listName>Temp</listName> \
     <viewFields> \
      <ViewFields> \
        <FieldRef Name='Title' /> \
      </ViewFields> \
     </viewFields> \
    </GetListItems> \
   </soapenv:Body> \
  </soapenv:Envelope>";
        jQuery.ajax({
            url: "http://serverName/Lists/Temp/listsView.aspx",
            type: "POST",
            dataType: "xml",
            data: soapPacket,
            complete: processResult,
            contentType: "text/xml; charset=\"utf-8\""
        });
    }

    function processResult(xData, status) {
        //jQuery(xData.responseXML).find("z\\:row").each(function () {
        //    $("<li>" + $(this).attr("ows_Title") + "</li>").appendTo("#AnnouncementData");
        //});
        //alert($(this).attr("ows_Title"));
        alert(xData.responseText);
        //alert(status.toString());
        document.getElementById("tarea").value = xData.responseText;
        document.getElementById("div1").innerHTML = xData.responseText;
    }
    $(document).ready(function () {
        GetAnnouncementData();
    });
</script>

This code is giving me The list page not list data. I tried to get xml file in div tag so that I can view what it is returning me. It returns me the HTML page of that list.
Please Help.

Answer 1

For me the best option is using REST calls receiving the data as json, is much more cleaner and easier to use.

Also, the good thing is that REST calls on SharePoint are made using Linq, so in this way is more flexible when you create the query, like for example you can do a better pagination, instead of using the crappy paginations of sharepoint that only allow you to do a next items.

var ajaxCall = $.getJSON("http://SharePointSiteUrl/_vti_bin/listdata.svc/ListName");

ajaxCall.success(function (jsonData) { callbackSuccessFunction(jsonData.d.results); });
ajaxCall.error(function () { callbackErrorFunction({ status: 'error', data: 'error message.' }); });

The returned data will be received as json in the following format:

{d: {results: [arrays of items]}

In case you need to know the name of the list to do the rest call, just call the url:

http://SharePointSiteUrl/_vti_bin/listdata.svc/

Here is some info: http://msdn.microsoft.com/en-us/library/ff798339.aspx

I hope it helps.