AngularJS提交SharePoint列表REST API失败：表单数据消失且未提交的问题排查求助

阿华AIGC实验室

2026-4-2

各位大佬好，我最近碰到个头疼的问题：用AngularJS写了一个Tour Request表单，想通过SharePoint REST API把数据提交到指定列表，但点击提交后表单直接刷新（输入的数据全清空），而且SharePoint列表里完全没新增数据。代码没语法错误，控制台也没抛出明显报错，实在找不到问题所在，麻烦帮我排查一下！

完整HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
    <link rel="stylesheet" href="calendar.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="form-container">
                    <h2 class="text-center" style="font-weight: bold;">Tour Request Form</h2>
                    <form action="#" method="post" enctype="multipart/form-data">
                        <div class="form-group">
                            <div ng-controller="calendarController as calendar">
                                <label for="tourRequest">Tour Request</label>
                                <input type="text" class="form-control" id="tourRequest" name="tourRequest" required>
                                <input class="btn-primary" type="submit" value="add">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="calendar.js"></script>
</body>
</html>

AngularJS控制器代码（calendar.js）

angular.module('mcalendarapp', [])
.controller('myController', function($scope, $http) {
    $scope.newItem = {
        Title: $scope.tourRequest,
        // Description: ''
    };

    $scope.addItem = function() {
        var listName = 'TourRequest';
        var apiUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('" + listName + "')/items";
        
        var dataPayload = {
            '__metadata': {
                'type': 'SP.Data.' + listName + 'ListItem'
            },
            'Title': $scope.newItem.Title
            // 'Description': $scope.newItem.Description
        };

        $http({
            method: 'POST',
            url: "/_api/web/lists/getByTitle('mylist')/items",
            headers: {
                'Accept': 'application/json; odata=verbose',
                'Content-Type': 'application/json; odata=verbose',
                'X-RequestDigest': jQuery('#__REQUESTDIGEST').val()
            },
            data: JSON.stringify(dataPayload)
        }).then(function(response) {
            alert('Item added successfully!');
            $scope.newItem = {};
        }).catch(function(error) {
            console.error('Error adding item:', error);
            alert('Failed to add item. Check console for details.');
        });
    };
});