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.
3 answers
solution1
10 2013-03-24 04:06:53
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.
solution2
3 ACCPTED 2013-03-30 07:24:50
Did you check your URL that you have given to access the list.
url: "http://serverName/Lists/Temp/listsView.aspx",
In this URL if you are accessing the local machine then you have to give localhost in server name.
url: "http://localhost:80/Lists/Temp/listsView.aspx",
Try using this and let me know if it works or not.
solution3
1 2013-03-23 22:49:37
An old question, but to help others looking for an answer ...
The simplest way to "retrieve list data using jQuery" is to use the SharePoint URL protocol. It can return list data in XML and doesn't require you to build SOAP requests. All you need is the list GUID and the ows_ attribute names (use FireBug to inspect the returned XML).
The simple example below will display announcement data. Paste the code into an empty HTML page on your SharePoint site and replace the siteUrl and listId values with your own.
Microsoft Reference: URL Protocol
If you need to do more than just read list data then have a look at jQuery.SPServices by Marc D Anderson.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
/* Tested with WSS3,IE9,FF19 */
$(document).ready( function() {
var siteUrl = "//london",
listId = "{1EC2EC89-B3DC-434D-A63E-AAEBF72E4E89}";
$.get( siteUrl + "/_vti_bin/owssvr.dll?Cmd=Display&XMLDATA=TRUE&List=" + listId,
function( xml ) {
var zrow = xml.getElementsByTagName("z:row");
for(var i=0; i<zrow.length; i++) {
$("#table1 tbody").append(
"<tr><td>"
+ zrow[i].getAttribute("ows_Attachments")
+ "</td><td>"
+ zrow[i].getAttribute("ows_LinkTitle")
+ "</td><td>"
+ zrow[i].getAttribute("ows_Body")
+ "</td></tr>"
);
}
});
});
</script>
<table id="table1">
<caption>Announcements</caption>
<tbody></tbody>
</table>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.