使用JavaScript调用SharePoint REST API获取列表报错求助

错误原因说明 #

你遇到的$ is not defined错误，是因为代码里用了jQuery的$.ajax方法，但页面没有加载jQuery库——$是jQuery的全局别名，未引入时浏览器无法识别这个符号。

修复方案（基于jQuery） #

1. 先引入jQuery库 #

在你的JS代码执行前，需要先加载jQuery。SharePoint环境里可以用两种方式：

• 直接引入CDN：在页面的<head>标签中添加：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

• 用SharePoint脚本加载器（SP.SOD）：避免脚本加载顺序问题，把你的函数包裹在加载回调里：

2. 修改后的代码（推荐异步写法，避免页面阻塞） #

// 注册并加载jQuery
SP.SOD.registerSod('jquery.min.js', 'https://code.jquery.com/jquery-3.7.1.min.js');
SP.SOD.executeFunc('jquery.min.js', null, async function() {
    // 从SharePoint列表获取数据转数组的函数
    async function arrayFromSharepointList() {
        let array = [];
        const appWebUrl = _spPageContextInfo.webAbsoluteUrl;

        try {
            const response = await $.ajax({
                url: `${appWebUrl}/_api/web/lists/getbyTitle('MyList')/items`,
                type: "GET",
                headers: {
                    "accept": "application/json;odata=verbose"
                }
            });
            array = response.d.results;
        } catch (err) {
            console.error('获取列表数据失败:', err);
        }
        return array;
    }

    // 关联HTML表单的示例：把列表数据填充到下拉框
    const listData = await arrayFromSharepointList();
    const selectElement = document.getElementById('myFormSelect');
    listData.forEach(item => {
        const option = document.createElement('option');
        option.value = item.ID; // 用列表项ID作为值
        option.textContent = item.Title; // 假设列表有Title字段，替换成你需要的字段
        selectElement.appendChild(option);
    });
});

替代方案（不用jQuery，原生JS实现） #

如果不想依赖jQuery，可以用浏览器原生的fetch API，代码更轻量化：

// 从SharePoint列表获取数据转数组
async function arrayFromSharepointList() {
    let array = [];
    const appWebUrl = _spPageContextInfo.webAbsoluteUrl;
    const apiUrl = `${appWebUrl}/_api/web/lists/getbyTitle('MyList')/items`;

    try {
        const response = await fetch(apiUrl, {
            method: 'GET',
            headers: {
                'Accept': 'application/json;odata=verbose'
            }
        });
        const data = await response.json();
        array = data.d.results;
    } catch (err) {
        console.error('获取列表数据失败:', err);
    }
    return array;
}

// 页面加载完成后关联表单
window.addEventListener('load', async function() {
    const listData = await arrayFromSharepointList();
    // 示例：填充表单下拉框
    const selectElement = document.getElementById('myFormSelect');
    listData.forEach(item => {
        const option = document.createElement('option');
        option.value = item.ID;
        option.textContent = item.Title;
        selectElement.appendChild(option);
    });
});

表单关联扩展说明 #

除了填充下拉框，你还可以根据需求实现其他关联逻辑：

• 把列表数据渲染成单选/多选按钮组
• 根据URL参数或用户选择，从列表中获取对应数据预填表单字段
• 提交表单时把数据写入SharePoint列表（需要调用POST类型的API）

内容的提问来源于stack exchange，提问作者Frenchineer Gaming