Javascript 如何使用AngularJS将数据从html添加到数据库？
我在我的项目中使用AngularJS/Django/Python。我的一个页面通过输入字段和单选按钮接收用户的输入，并需要将这些值存储到数据库中。如何使用AngularJS实现这一点？提前谢谢 html和JS：Javascript 如何使用AngularJS将数据从html添加到数据库？,javascript,python,angularjs,django,Javascript,Python,Angularjs,Django,我在我的项目中使用AngularJS/Django/Python。我的一个页面通过输入字段和单选按钮接收用户的输入，并需要将这些值存储到数据库中。如何使用AngularJS实现这一点？提前谢谢 html和JS： {% extends "base.html" %} {% load static %} {% block stylesheets %} <!--<html ng-app="ui.bootstrap.demo">--> <link href="{% stati
{% extends "base.html" %}
{% load static %}
{% block stylesheets %}
<!--<html ng-app="ui.bootstrap.demo">-->
<link href="{% static 'bootstrap-v3.3.2/css/bootstrap.min.css' %}" rel="stylesheet" xmlns="http://www.w3.org/1999/html">
<link href="{% static 'bootstrap-v3.3.2/css/bootstrap-theme.min.css' %}" rel="stylesheet">
<link href="{% static 'css/screen.css' %}" rel="stylesheet">
<link href="{% static 'css/project.css' %}" rel="stylesheet">
<link href="{% static 'css/jquery-ui.css' %}" rel="stylesheet">
<link href="{% static 'css/ss.css' %}" rel="stylesheet">
<link href="{% static 'css/check_binning.css' %}" rel="stylesheet">
{% endblock %}
{% block mainbody %}
{% include 'orc_navigation_section.html' %}
<br><br>
<h1> <b>Check Binning Setup</b></h1><br>
<div class="well">
<div class="well" ng-controller="LayerCtrl">
<table>
<tr>
<td>
<div class="input-group">
<span class="input-group-addon">Fab</span>
<select class="form-control" name="fab">
{% for f in fab %}
<option value="{{f}}">{{f}}</option>
{% endfor %}
</select>
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">Technode</span>
<select class="form-control" ng-model="selected_technode" ng-options="l.value as l.label for l in technodes"></select>
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">Layer</span>
<!--<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">-->
{%verbatim%}
<!--<select class="form-control" name="layer" >-->
<!--<option ng-repeat="l in layer_list" value="{{l}}">{{l}}</option>-->
<!--</select>-->
<select class="form-control" ng-model="selected_layer" ng-options="l as l for l in layerlist"></select>
{%endverbatim%}
</div>
</td>
</tr>
</table>
</div>
<div><h3>ORC binning setup history:</h3></div>
<br/><br/>
<!--Check fields and Radio Buttons-->
<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 Check here" ng-model="v.input">
<b>Functional check</b> <input type="radio" name="{{ k }}" value="fc" ng-model="v.props">
<b>CFM issue</b> <input type="radio" name="{{ k }}" value="cfm" ng-model="v.props">
<b>Defect 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 Check</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>
Choose File...
<input type="file" style='position:absolute;z-index:2;top:0;left:0;
filter: alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity:0;background-color:transparent;color:transparent;' name="file_source" size="40" onchange='$("#upload-file-info").html($(this).val());'>
</a>
<span class='label label-info' id="upload-file-info"></span>
<button ng-click="uploadAttachFile()" class="btn btn-small btn-default" id="uploadfile" name="uploadfile" disabled>
<span class="glyphicon glyphicon-cloud-upload"></span> Import File</button>
</div>
</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 ECN*<input type="text" class="form-control" placeholder="Add ECN here">
</td>
</tr>
<form ng-submit="submit()" ng-controller="ExampleController">
<tr>
<td>
<button type="submit" id="submit" class="btn btn-small btn-success"><span class="glyphicon glyphicon-pencil"></span> Update check DB</button>
<button class="btn btn-small btn-grey"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
</td>
</tr>
</form>
<!--<tr><td><div ng-controller="ModalDemoCtrl">-->
<!--<script type="text/ng-template" id="orc_enable.html">-->
<!--</script>-->
<!--<button type="button" class="btn btn-default" ng-click="open('lg')">Pop-up</button>-->
<!--</div></td></tr>-->
</table>
</div>
<script>
angular.module('submitExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.list = [];
$scope.text = 'hello';
$scope.submit = function() {
if ($scope.text) {
$scope.list.push(this.text);
$scope.text = '';
}
};
}]);
</script>
{% endblock %}
您还必须设置服务器端以接受post 这里有很多步骤
POSTng模型
您需要将张贴在上。在Angular中，您可以使用$resource
和$http
执行此操作。两者都有很好的记录。你想要的只是普通的POST
，没有什么特别的。确保表单的内容在帖子的正文中
您可能会遇到内容类型问题。。。您可能希望将ContentType设置为application/json；charset=utf-8
如果您正在处理js
这里有很多步骤
您的服务器（Django）需要可以从客户端接收POST
您的客户端需要捕获用户输入。角度是一种方式，但决不是唯一的方式。如果您正在努力解决这个问题，jQuery的可访问性要高得多。如果你想坚持使用Angular，请像Alvaro提到的那样查看ng模型
您需要将张贴在上。在Angular中，您可以使用$resource
和$http
执行此操作。两者都有很好的记录。你想要的只是普通的POST
，没有什么特别的。确保表单的内容在帖子的正文中
您可能会遇到内容类型问题。。。您可能希望将ContentType设置为application/json；charset=utf-8
如果您正在处理js
你的问题是什么？有很多关于表单和表单控件如何在angular中工作的教程。建议您从学习ng model的基础知识开始，因为您的旅程很长，所以请从客户端开始。当你能够发送一篇文章，并附上想要保存的正文时，你应该发布另一个问题。关于python和数据库。你的问题是什么？有很多关于表单和表单控件在angular中如何工作的教程。建议您从学习ng model的基础知识开始，因为您的旅程很长，所以请从客户端开始。当你能够发送一篇文章，并附上想要保存的正文时，你应该发布另一个问题。关于python和数据库。我需要在html文件中做哪些更改？我需要在html文件中做哪些更改？
{% block extrascript %}
{{ ngapp }}.controller("LayerCtrl", function ($scope, $http, $resource){
var layerresource_url = $resource("{% url 'api_dispatch_list' 'v1' 'layer' %}");
$scope.technodes = [
{'value': 22, 'label': 22},
{'value': 28, 'label': 28},
];
console.log('initializing....')
$scope.$watch('selected_technode', function () {
<!--alert($scope.selected_technode);-->
$scope.update_layer();
});
$scope.update_layer = function(){
console.log('Stage1: Initializing Primary Data... ');
layerresource_url.get({techtype__contains: $scope.selected_technode, limit:1500},
function(data){
$scope.layerlist = 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 %}
class CheckBinningView(JSONResponseMixin, ListView):
template_name = "orc_enable.html"
model = OrcRecord
def get_context_data(self, *args, **kwargs):
context = super(CheckBinningView, self).get_context_data(*args, **kwargs)
fab = GroupProfile.objects.get(id=self.request.session['ACL_gid']).fab
gp = GroupProfile.objects.get(id=self.request.session['ACL_gid'])
layer = []
technode = []
for l in self.model.objects.raw('SELECT distinct layer, id FROM orc_orcrecord GROUP BY layer'):
layer.append(l.layer)
if fab == "ALL":
SQL = "SELECT distinct process_id, id FROM orc_orcrecord GROUP BY process_id"
else:
SQL = "SELECT distinct process_id, id FROM orc_orcrecord \
WHERE process_id LIKE '0" + fab +"%%' or process_id LIKE '" + fab + "%%' GROUP BY process_id"
print SQL
for t in self.model.objects.raw(SQL):
sql = "SELECT distinct process_id, id FROM orc_orcrecord GROUP BY process_id"
else:
sql = "SELECT distinct process_id, id FROM orc_orcrecord \
WHERE process_id LIKE '0" + fab +"%%' or process_id LIKE '" + fab + "%%' GROUP BY process_id"
print sql
for t in self.model.objects.raw(sql):
try:
technode.append(t.get_technode)
except Exception, e:
print e
continue
# for t in self.model.objects.filter(process_id__startswith=fab, is_main_record=True,
# mantis_id__isnull=False).values_list('id', flat=True).order_by('id').distinct()[:100]:
# technode.append(self.model.objects.get(id=t).get_technode)
# context['technode'] = gp.technology
context['fab'] = gp.fab
context['technode'] = list(set(technode))
# context['layer'] = list(set(layer))
context['technode'] = list(set(technode))
context['ngapp'] = "CMOD"
return context
var layerresource_url = $resource("{% url 'api_dispatch_list' 'v1' 'layer' %}");
layerresource_url.field1 = "teste";
layerresource_url.field2 = true;
layerresource_url.field1.$save();
//will make a post to the URL passed in $resource
var layerresource_url = $resource("{% url 'api_dispatch_list' 'v1' 'layer' % ,
{},{ save:{method:'POST'}}
}");
layerresource_url.save(model)