读取 SharePoint 列表，并通过 JavaScript 函数将数据放在 HTML 文件中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13478449/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Read a SharePoint List and put the data on a HTML file through JavaScript function
提问by Codelel
I have a SharePoint URL which is just a SharePoint list with some columns and rows of data.
我有一个 SharePoint URL，它只是一个包含一些列和行数据的 SharePoint 列表。
I will like to read that information from that specific URL and put the data on a HTML file through a JavaScript function.
我想从该特定 URL 读取该信息，并通过 JavaScript 函数将数据放在 HTML 文件中。
I have no experience about JavaScript & HTML5 at all so, I am not sure how to call to those functions in order to retrieve the data.
我对 JavaScript 和 HTML5 完全没有经验，所以我不确定如何调用这些函数来检索数据。
That's what I have so far and it is not working at all:
这就是我到目前为止所拥有的，它根本不起作用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
</head>
<script type="text/javascript" src="filelink/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="filelink/jquery.SPServices-0.6.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$().SPServices({
operation: "GetListItems",
webURL: "http://myURL.aspx",
async: false,
listName: "Announcements",
CAMLViewFields: "<ViewFields><FieldRef Name='Title' /></ViewFields>",
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function() {
var liHtml = "<li>" + $(this).attr("ows_Title") + "</li>";
$("#tasksUL").append(liHtml);
});
}
});
});
</script>
<ul id="tasksUL"/>
<body>
</body>
</html>
If I try to open the index.html nothing happens so I don't know how to call to my functions on my HTML file. Also, I don't know how to define SP.ClientContext in the HTML file.
如果我尝试打开 index.html 没有任何反应，所以我不知道如何调用我的 HTML 文件中的函数。另外，我不知道如何在 HTML 文件中定义 SP.ClientContext。
Thanks a lot in advance.
非常感谢。
采纳答案by jpumford
The SPServices librarywill do that for you very easily.
该SPServices库会为你做的很容易。
You'll want to use thiscall. I usually encapsulate it in my own function to make the code prettier, especially if I'm making a lot of AJAX list queries.
你会想要使用这个调用。我通常将它封装在我自己的函数中以使代码更漂亮，尤其是在我进行大量 AJAX 列表查询时。
Basically what will happen is SharePoint will return an ugly XML document that has all your list items as defined by the Microsoft Documentation. You'll traverse this document using SPServices like this:
基本上会发生的是 SharePoint 将返回一个丑陋的 XML 文档，其中包含Microsoft 文档定义的所有列表项。您将使用 SPServices 遍历此文档，如下所示：
<script type="text/javascript" src="filelink/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="filelink/jquery.SPServices-0.6.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$().SPServices({
operation: "GetListItems",
async: false,
listName: "Announcements",
CAMLViewFields: "<ViewFields><FieldRef Name='Title' /></ViewFields>",
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function() {
var liHtml = "<li>" + $(this).attr("ows_Title") + "</li>";
$("#tasksUL").append(liHtml);
});
}
});
});
</script>
<ul id="tasksUL"/>`
Line by line:<script type="text/javascript" src="filelink/jquery-1.6.1.min.js"></script>
JQuery is required by SPServices<script type="text/javascript" src="filelink/jquery.SPServices-0.6.2.min.js"></script>
Including SPServices$(document).ready(function() {
"When the DOM is loaded, execute this function"$().SPServices({
"This is an SPServices function"operation: "GetListItems",
"We are using the 'GetListItems' web service"async: false,
"Not asynchronous, do it now"listName: "Announcements",
"We're using the list 'Announcements"CAMLViewFields: "<ViewFields><FieldRef Name='Title' /></ViewFields>",
Don't worry about this linecompletefunc: function (xData, Status) {
"Run this function when the request is complete. The data is passed as xData, the completion status is passed as Status"$(xData.responseXML).SPFilterNode("z:row").each(function() {
"Take the response string and only take the "row" XML nodes. For each of these nodes, run this function..."var liHtml = "<li>" + $(this).attr("ows_Title") + "</li>";
"Create a variable called liHtml equal to an li tag and the XML attribute ows_Title"$("#tasksUL").append(liHtml);
"Append this list item to the element with an ID of 'tasksUL'"
逐行：<script type="text/javascript" src="filelink/jquery-1.6.1.min.js"></script>
SPServices 需要JQuery<script type="text/javascript" src="filelink/jquery.SPServices-0.6.2.min.js"></script>
包括SPServices $(document).ready(function() {
“加载DOM 时，执行这个函数” $().SPServices({
“这是一个SPServices 函数” operation: "GetListItems",
“我们正在使用'GetListItems' 网络服务” async: false,
“不是异步的，现在就做” listName: "Announcements",
“我们'正在使用列表 '公告'CAMLViewFields: "<ViewFields><FieldRef Name='Title' /></ViewFields>",
不用担心这一行completefunc: function (xData, Status) {
“当请求完成时运行这个函数。数据作为 xData 传递，完成状态作为状态传递” $(xData.responseXML).SPFilterNode("z:row").each(function() {
“取响应字符串，只取“ row" XML 节点。对于这些节点中的每一个，运行此函数..." var liHtml = "<li>" + $(this).attr("ows_Title") + "</li>";
"创建一个名为 liHtml 的变量，等于 li 标记和 XML 属性 ows_Title"$("#tasksUL").append(liHtml);
“将此列表项附加到 ID 为‘tasksUL’的元素”
回答by Christophe
There's a number of issues with your code.
您的代码存在许多问题。
First, it will only work in a SharePoint page, not as standalone, as you are using SharePoint functions like SP.ClientContext.
首先，它只能在 SharePoint 页面中工作，而不是像您使用 SP.ClientContext 等 SharePoint 功能那样独立工作。
Second, there seems to be errors in the snippet. For example, I think this.collListshould actually be var collList.
其次，代码片段中似乎存在错误。例如，我认为this.collList实际上应该是var collList.
Maybe try this other reference (but again it'll only work within a SharePoint 2010 or 2013 page):
也许试试这个其他参考（但同样只能在 SharePoint 2010 或 2013 页面中工作）：
http://msdn.microsoft.com/en-us/library/hh185007(v=office.14).aspx
http://msdn.microsoft.com/en-us/library/hh185007(v=office.14).aspx
回答by Ankur Madaan
Actually the code you are using is for the SPServices library written by Sympmarc and there in its documentation its mention that it is to be used within the pages running on SharePoint Context as for making calls it uses __REQUESTDIGEST post variable and this will not be available on normal HTML5 pages, the options i can give to you are these:-
实际上，您正在使用的代码是用于 Sympmarc 编写的 SPServices 库的，并且在其文档中提到它将在 SharePoint 上下文上运行的页面中使用，因为它使用 __REQUESTDIGEST 发布变量进行调用，这将不可用普通的 HTML5 页面，我可以给你的选项是：-
1) Enable Basic Http Authentication on the SharePoint Site and then use $ajax function of jquery with Basic Auth credentials in your call to service.
1) 在 SharePoint 站点上启用基本 Http 身份验证，然后在调用服务时使用带有基本身份验证凭据的 jquery 的 $ajax 函数。
2)Create a http handler with code to do your work and then pass json from jquery to bring data from this handler.
2）使用代码创建一个 http 处理程序来完成您的工作，然后从 jquery 传递 json 以从该处理程序中获取数据。
