通過 URL 將文件夾名稱傳遞給 SPO Rest API 調用自定義 ASPX 頁面

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('/sites/sitename/<<<SPO_DOC_LIB>>>/<<>>')/Files?$top=2000&$select=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"];