Javascript 如何使用AngularJS（Django框架）将值保存到数据库

嗨，我的项目在Django框架上工作，并使用了AngularJS。我需要实现的是，当我单击页面上的submit（html）时，它应该保存我输入到数据库中的所有值。我听说我只需要一个简单的提交按钮，主要的更改在views.py中。我对Django和AngularJS都是新手。以下是我的代码。提前谢谢

Html和AngularJS：

{% extends "base.html" %}
{% load static %}
{% block stylesheets %}
<link href="{% static 'css/xxg.css' %}" rel="stylesheet">


{% endblock %}

{% block mainbody %}

<br><br>
<div class="well">
        <div class="well" ng-controller="LayerCtrl">
            <table>
                <tr>
                    <td>
                        <div class="input-group">
                            <span class="input-group-addon">jj</span>
                            <select class="form-control" name="jj">
                                {% for f in fab %}
                                <option value="{{f}}">{{f}}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </td>

                    <td>
                        <div class="input-group">
                            {% for f in jj%}
                            {% if f == '1' %}
                            <span class="input-group-addon">yy</span>
                            <select class="form-control" ng-model="rr" ng-options="l.value as l.label for l in yyy"></select>
                            {% endif %}
                            {% if f == '8' %}
                            <span class="input-group-addon">tt</span>
                            <select class="form-control" ng-model="selected_technode" ng-options="l.value as l.label for l in rrr"></select>
                            {% endif %}
                            {% endfor %}
                        </div>
                    </td>

                    <td>
                        <div class="input-group">
                            <span class="input-group-addon">DD</span>
                            <!--<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">-->
                            {%verbatim%}

                            <select class="form-control" ng-model="selected_dd" ng-options="l as l for l in tt"></select>
                            {%endverbatim%}
                        </div>
                    </td>
                </tr>
            </table>
        </div>

        <div><h3>history:</h3></div>
        <br/><br/>

        <div ng-controller="AlertDemoCtrl">

            <table class="table">

                {% verbatim %}

                <tr>

                    <td class="input-group" ng-repeat="(k,v) in alerts">

                        <span class="input-group-addon" ng-hide="v.hide">Check {{ k }}</span>
                    <span ng-hide="v.hide">
                    <input type="text" class="form-control" placeholder="Add gg here" ng-model="v.input">
                    <b>QQQ</b><input type="radio" name="{{ k }}" value="fc" ng-model="v.props">
                    <b>issue</b><input type="radio" name="{{ k }}" value="rr" ng-model="v.props">
                    <b>risk</b><input type="radio" name="{{ k }}" value="dr" ng-model="v.props">
                        <a type="reset" ng-click="reset()">
                            <span class="glyphicon glyphicon-repeat"></span>
                        </a>&nbsp;&nbsp;&nbsp;

                        <a href="" ng-click="remove(v)">
                            <span class="glyphicon glyphicon-trash"></span></a>
                        </span>
                        {% endverbatim %}
                <tr>
                    <td>
                        <button type="button" class='btn btn-info' ng-click="addAlert()">
                            <span class="glyphicon glyphicon-plus"></span>
                            &nbsp;Add</button>
                        <button type="reset" ng-click="reset()" class="btn btn-danger">
                            <span class="glyphicon glyphicon-repeat"></span>
                            &nbsp;Reset All</button>
                    </td>
                </tr>
            </table>
        </div>
        <table class="table">
            <!--IMPORT FILE-->
            <tr>
                <td>
                    <div style="position:relative;">
                        <a class='btn btn-primary' href='javascript:;' disabled>
                                           </td>
            </tr>

            <!--ADD COMMENTS-->

            <tr>
                <td>
                    Add Comments*<div class="span5"><textarea name="bugnote_text" placeholder="Add comments here (max=600 characters)" rows="3" class="span10 ng-pristine
                ng-valid ng-valid-maxlength" ng-maxlength="600"></textarea></div>
                </td>
                <td>
                    Add ftt*<input type="text" class="form-control" placeholder="Add ftthere">

                </td>
            </tr>
            <form ng-submit="submit()" ng-controller="ExampleController">
                <tr>
                    <td>
                        <button type="submit" id="submit" ngClick="Submit" class="btn btn-small btn-success"><span class="glyphicon glyphicon-pencil"></span>&nbsp;Submit</button>
                        <button class="btn btn-small btn-grey"><span class="glyphicon glyphicon-remove"></span>&nbsp;Cancel</button>
                    </td>

                </tr>
            </form>
        </table>
</div>

{% endblock %}


{% block extrascript %}


{{ ngapp }}.controller("LayerCtrl", function ($scope, $http, $resource){

var layerresource_url = $resource("{% url 'api_list' 'v1' 'layer' %}");



console.log('initializing....')

$scope.$watch('yy', function () {
<!--alert($scope.yy);-->
$scope.update_layer();
});

$scope.update_layer = function(){;
    console.log('Stage1: Initializing Primary Data... ');
    layerresource_url.get({techtype__contains: $scope.selected, limit:1500},
    function(data){
    $scope.list = data['objects'][0]['layer'];
    console.log($scope.layerlist);
},function(data, status){
    console.log('Stage1: Internal error while loading initial data:'+status );
    <!--alert('internal error');-->
}
);
};
});





{{ ngapp }}.controller("AlertDemoCtrl", function ($scope, $http, $resource){

    $scope.alerts = [];

    $scope.addAlert = function() {
    $scope.alerts.push({msg: 'Another alert!', props : 0, input : ""});
};

    $scope.closeAlert = function(index) {
    $scope.alerts.splice(index, 1);
};

    $scope.reset = function() {
    angular.forEach($scope.alerts, function(v){
    v.input = "";
    v.props = 0;
});
};

$scope.remove = function(v){
    v.hide = 1;
}

$scope.reset();
});

{% endblock %}

{%extends“base.html”%}
{%load static%}
{%块样式表%}
{%endblock%}
{%block mainbody%}



林俊杰
{fab%中f的%s}
{{f}}
{%endfor%}
{jj%中f的%s}
{%f='1%}
yy
{%endif%}
{%f='8%}
tt
{%endif%}
{%endfor%}
DD
{%verbatim%}
{%endverbatim%}
历史：



{%verbatim%}
检查{{k}
QQQ
问题
风险
{%endverbatim%}
添加
全部重置
添加评论*
添加ftt*
提交
取消
{%endblock%}
{%block extrascript%}
{{ngapp}}.controller（“LayerCtrl”，函数（$scope，$http，$resource）{
var layerresource_url=$resource（“{%url”api_列表“v1”层“%}”）；
console.log（'正在初始化…'）
$scope.$watch（'yy'，function（）{
$scope.update_layer（）；
});
$scope.update_layer=函数（）{；
log（'Stage1:初始化主数据…'）；
layerresource\u url.get（{techtype\u包含：$scope.selected，limit:1500}，
功能（数据）{
$scope.list=数据['objects'][0]['layer']；
log（$scope.layerlist）；
}，功能（数据、状态）{
console.log（'Stage1:加载初始数据时出现内部错误：'+状态）；
}
);
};
});
{{ngapp}}.controller（“AlertDemoCtrl”，函数（$scope，$http，$resource）{
$scope.alerts=[]；
$scope.addAlert=函数（）{
$scope.alerts.push（{msg:'other alert！'，props:0，input:”“}）；
};
$scope.closeAlert=函数（索引）{
$scope.alerts.splice（索引1）；
};
$scope.reset=函数（）{
angular.forEach（$scope.alerts，函数（v）{
v、 输入=”；
v、 道具=0；
});
};
$scope.remove=函数（v）{
v、 hide=1；
}
$scope.reset（）；
});
{%endblock%}

如果不想使用表单，可以使用AJAX。在AngularJS中，它看起来是这样的。注意：控制器应具有所需的参数：

$scope.addsomething = function() {
      token = $window.localStorage.token;
      //data to be submitted 
      $scope.data = {"name": $scope.name,"project": project_id,"some_url": someURL,"status": "1","type": 1};
      $http.defaults.headers.common.Authorization = 'token '+$window.localStorage.token;
      req = $http({
            method: "POST",
            url:"your_url/",
            data:$scope.data,
            headers: {
                'Content-Type': 'application/json'
            },
      });
      req.success(function(data,status) {
         //do something on success
      });
      req.error(function(data, status, headers, config) {
        //do something on error
      });
    }

---

在您的后端，您只需将此URL指向一个视图即可将其保存在数据库中。希望这有帮助。

从正确创建表单开始。建议您学习一些基本的表单教程，包括使用django后端。问题太宽泛了，你们需要把你们的问题缩小到更具体的范围。我这里不使用django表单。只是AngJS和viewsDoesn没关系。。。表单无法如图所示工作，它是无效的html，不包含用户输入元素。实际上，什么是您提到的项目id？只是一个变量名，想展示如何将变量值传递到数据中