阅读SharePoint列表并通过JavaScript函数将数据放在HTML文件中 [英] Read a SharePoint List and put the data on a HTML file through JavaScript function

查看:208
本文介绍了阅读SharePoint列表并通过JavaScript函数将数据放在HTML文件中的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个SharePoint网址,它只是一个包含一些列和行数据的SharePoint列表。

I have a SharePoint URL which is just a SharePoint list with some columns and rows of data.

我想从该特定网址读取该信息并将其放入通过JavaScript函数在HTML文件上的数据。

I will like to read that information from that specific URL and put the data on a HTML file through a JavaScript function.

我没有关于JavaScript& amp;完全是HTML5,我不知道如何调用这些函数来检索数据。

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.

这就是我到目前为止所做的一切都没有:

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>

如果我尝试打开index.html没有任何反应,所以我不知道如何调用我的HTML文件的功能。另外,我不知道如何在HTML文件中定义SP.ClientContext。

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.

提前多多谢谢。

推荐答案

SPServices库将很容易为您完成。

你想要使用这个电话。我通常将它封装在我自己的函数中以使代码更漂亮,特别是如果我正在进行大量的AJAX列表查询。

You'll want to use this call. I usually encapsulate it in my own function to make the code prettier, especially if I'm making a lot of AJAX list queries.

基本上会发生什么是SharePoint会返回一个丑陋的XML文档,其中包含 Microsoft文档。您将使用SPServices遍历此文档,如下所示:

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:

<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"/>`

逐行:< br>
< script type =text / javascriptsrc =filelink / jquery-1.6.1.min.js>< / script>

SPServices需要JQuery

< script type =text / javascriptsrc =filelink / jquery.SPServices-0.6.2.min .js>< / script>

包括SP服务

$(文件).ready(function(){

当加载DOM时,执行此函数

$()。SPServices({

这是一个SPServices函数


操作:GetListItems,

我们正在使用'GetListItems'网络服务

async:false,

不同步,立即行动< br>
listName:公告,

我们正在使用列表'公告'

CAMLViewFields:< ViewFields>< FieldRef Name ='Title'/>< / Vi ewFields>,

不要担心这一行

completefunc:function(xData,Status){

请求完成后运行此函数。数据作为xData传递,完成状态作为状态传递

$(xData.responseXML).SPFilterNode(z:row)。each(function(){

获取响应字符串并仅获取行XML节点。对于每个节点,运行此函数...

var liHtml =< li>+ $(this).attr(ows_Title)+< / li>;

创建一个名为liHtml的变量,它等于li标签,XML属性ows_Title

$(#tasksUL)。append(liHtml); < br>
将此列表项追加到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 line
completefunc: 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'"

这篇关于阅读SharePoint列表并通过JavaScript函数将数据放在HTML文件中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆