在自定义ASPX页面中通过URL传递文件夹名称给SPO Rest API调用

Question

我有一个页面列出不同的文件夹url。点击链接应该会触发第二页上的代码，使用从第一页的URL传递过来的参数。

我试图通过URL传递文件夹名称参数，以便在SPO上的自定义ASPX页面中加载API调用。链接到下面第二个页面代码的URL将包含文件夹的详细信息。

URL格式从第一页-<<<SPO_SITE>>>/teams/<<<SPO_TENANT>>>/SiteAssets/Image.aspx?Folder="<<<FOLDER_NAME>>>"

<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(function(){
var requestUri = "<<<SPO_SITE>>>/teams/<<<SPO_TENANT>>>/_api/web/getfolderbyserverrelativeurl('<<<SPO_DOC_LIB>>>/<<<FOLDER>>>')/Files?$top=2000&$select=ServerRelativeUrl";
$.ajax({
url: requestUri,
type: "GET",
headers: {
"accept":"application/json; odata=verbose"
},
success: onSuccess,
});

function onSuccess(data) {
var objItems = data.d.results;

var divContent = '<div class="row" id="myList">';
for (var i = 0; i < objItems.length; i++) {

divContent += '<div class="col-md-3"><div class="card mb-4 shadow-sm"><img src="<<<SPO_SITE>>>/' + objItems[i].ServerRelativeUrl + '"><a class="stretched-link" target="_blank" href="<<<SPO_SITE>>>/' + objItems[i].ServerRelativeUrl + '"></a></div></div>';

}
$('#ImgGrid').append(divContent);
}
});
</script>
<main role="main">
<section class="pt-4 pb-4 text-center">
<div class="container">

</div>
</section>
<div class="container">
<div id="myList">
<div id="ImgGrid"></div>
</div>
</div>
</main>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>

请查看代码和建议。

Answer 1

如果url中的图片是这样的:

https://Tenantname.sharepoint.com/sites/sitename/SPO_DOC_LIB/FOLDER

那么在getfolderbyserverrelativeurl中，请像这样传递相对url:

/_api/web/getfolderbyserverrelativeurl('/网站/sitename/& lt; & lt; & lt; SPO_DOC_LIB>在祝辞/& lt; & lt;在祝辞的)/文件吗? = 2000,选择美元= ServerRelativeUrl

更新完整的代码片段:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.6.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
$(function () {
var relativeurl = "/sites/dev/Share Documents/" + GetParameterValues("Folder");
var requestUri = _spPageContextInfo.webAbsoluteUrl +"/_api/web/getfolderbyserverrelativeurl('"+relativeurl+"')/Files?$top=2000&$select=ServerRelativeUrl";
$.ajax({
url: requestUri,
type: "GET",
headers: {
"accept": "application/json; odata=verbose"
},
success: onSuccess,
});

});
function onSuccess(data) {
var objItems = data.d.results;
console.log(objItems);
var divContent = '<div class="row" id="myList">';
for (var i = 0; i < objItems.length; i++) {
divContent += '<div class="col-md-3"><div class="card mb-4 shadow-sm"><img src="' + objItems[i].ServerRelativeUrl + '"><a class="stretched-link" target="_blank" href="' + objItems[i].ServerRelativeUrl + '"></a></div></div>';
}
$('#ImgGrid').append(divContent);
}
function GetParameterValues(param) {
var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for (var i = 0; i < url.length; i++) {
var urlparam = url[i].split('=');
if (urlparam[0] == param) {
return urlparam[1];
}
}
}
</script>
<main role="main">
<section class="pt-4 pb-4 text-center">
<div class="container">

</div>
</section>
<div class="container">
<div id="myList">
<div id="ImgGrid"></div>
</div>
</div>

在上面的代码演示中，我的站点url是https://tenant.sharepoint.com/sites/dev/

所以相对url是使用/sites/dev/Shared Documents/folder1

更新:

在第二页中像这样获取url中的文件夹查询字符串参数:

JSRequest.EnsureSetup();
var itemId = JSRequest.QueryString["Folder"];