如何通过AngularJS提交表单向JSON文件插入新数据

没问题，我来一步步教你完成这个需求——通过AngularJS的表单提交，把新的航空公司数据添加到你的现有JSON列表里。

1. 配置AngularJS模块与控制器 #

首先，你需要在JS里定义好指定的ng-app="ajsprogram"和ng-controller="outercont"，同时把初始的JSON数据挂载到控制器的作用域上：

// 定义AngularJS模块
var app = angular.module('ajsprogram', []);

// 定义控制器
app.controller('outercont', function($scope, $http) {
    // 初始化航空公司数据（就是你提供的JSON数组）
    $scope.airlines = [
        { "airline" : "British Airways", "hub" : "LHR", "url" : "http://britishairways.com", "callsign":"SPEEDBIRD" },
        { "airline" : "Air France", "hub" : "CDG", "url" : "http://airfrance.com", "callsign":"AIRFRANS" },
        { "airline" : "Virgin Atlantic", "hub" : "LGW", "url" : "http://virginatlantic.com", "callsign":"VIRGIN" },
        { "airline" : "RyanAir", "hub" : "DUB", "url" : "http://ryanair.com", "callsign":"RYANAIR" },
        { "airline" : "ANA", "hub" : "HND", "url" : "http://ana.com.jp", "callsign":"ALL NIPPON" },
        { "airline" : "Flydubai", "hub" : "DXB", "url" : "http://flydubai.com", "callsign":"SKY DUBAI" }
    ];

    // 后续添加提交函数...
});

2. 绑定表单到AngularJS模型 #

接下来写HTML表单，用ng-model把表单输入框和控制器里的变量绑定起来，提交按钮用ng-click触发提交函数：

<div ng-app="ajsprogram" ng-controller="outercont">
    <h3>添加新航空公司</h3>
    <form>
        <div>
            <label>航空公司名称：</label>
            <input type="text" ng-model="newAirline.airline" required>
        </div>
        <div>
            <label>枢纽机场：</label>
            <input type="text" ng-model="newAirline.hub" required>
        </div>
        <div>
            <label>官网地址：</label>
            <input type="url" ng-model="newAirline.url" required>
        </div>
        <div>
            <label>呼号：</label>
            <input type="text" ng-model="newAirline.callsign" required>
        </div>
        <button type="button" ng-click="addAirline()">提交添加</button>
    </form>

    <!-- 可以加个列表展示所有航空公司，方便验证是否添加成功 -->
    <h4>现有航空公司列表</h4>
    <ul>
        <li ng-repeat="airline in airlines">
            {{airline.airline}} ({{airline.hub}}) - 呼号：{{airline.callsign}}
        </li>
    </ul>
</div>

3. 实现表单提交函数 #

回到控制器里，添加addAirline函数，把表单绑定的新数据对象push到airlines数组里，之后重置表单：

// 在outercont控制器内部添加这个函数
$scope.addAirline = function() {
    // 检查表单数据是否完整（也可以依赖HTML的required验证）
    if ($scope.newAirline && $scope.newAirline.airline && $scope.newAirline.hub && $scope.newAirline.url && $scope.newAirline.callsign) {
        // 把新数据添加到数组
        $scope.airlines.push(angular.copy($scope.newAirline));
        // 重置表单模型，清空输入框
        $scope.newAirline = {};
        alert('新航空公司数据已添加！');
    } else {
        alert('请填写完整所有字段！');
    }
};

关键注意事项：关于修改本地JSON文件 #

这里要提醒你：前端JavaScript无法直接写入本地的JSON文件——这是浏览器的安全限制导致的。上面的代码只是把数据添加到前端的内存数组里，刷新页面后数据就会消失。

如果要持久化保存到JSON文件，你需要：

• 写一个后端接口（比如用Node.js、PHP等），接收前端发送的新数据
• 在控制器里用$http.post把新数据发送到后端接口，由后端来修改JSON文件或者存入数据库

示例的$http.post代码（替换上面的push部分）：

// 用$http发送数据到后端接口
$http.post('/api/add-airline', $scope.newAirline)
    .then(function(response) {
        // 后端返回成功后，更新前端数组
        $scope.airlines.push(angular.copy($scope.newAirline));
        $scope.newAirline = {};
        alert('数据已成功保存！');
    }, function(error) {
        alert('保存失败，请重试！');
        console.error(error);
    });

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