如何使用 AngularJS（Django 框架）将值保存到数据库
Posted
技术标签:
【中文标题】如何使用 AngularJS（Django 框架）将值保存到数据库【英文标题】：How to save values to database using AngularJS (Django Frame Work) 【发布时间】：2015-12-10 01:25:03 【问题描述】：您好，我的项目使用 AngularJS 在 Django 框架上运行。我需要实现的是当我点击我的页面（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>
<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>
Add</button>
<button type="reset" ng-click="reset()" class="btn btn-danger">
<span class="glyphicon glyphicon-repeat"></span>
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> Submit</button>
<button class="btn btn-small btn-grey"><span class="glyphicon glyphicon-remove"></span> 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 %
【问题讨论】：
从正确创建表单开始。建议你学习一些基本的表单教程，包括使用 django 后端。问题太宽泛，您需要将问题范围缩小到更具体的问题 嗨 Charlietfl，我没有在这里使用 django-forms。只是 AngJS 和视图 没关系...表单无法如图所示工作，它是无效的 html 并且不包含用户输入元素 【参考方案1】：如果您不想使用表单，可以使用 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 指向一个视图，该视图会将其保存在数据库中。希望这会有所帮助。
【讨论】：
你提到的project_id到底是什么？ 只是一个变量名，想展示如何将变量值传递给数据以上是关于如何使用 AngularJS（Django 框架）将值保存到数据库的主要内容，如果未能解决你的问题，请参考以下文章
Django + AngularJS：没有使用普通 URL 和视图的 Django REST 框架的类 REST 端点？
Facebook Auth 与 AngularJS 和 Django REST 框架
Python Django-REST框架和Angularjs的文件夹结构