Javascript 按动作序列化表单
我有多个自动生成的表单，每个表单可能包含多个复选框，这些复选框具有不同的ID，它们表示数据库中的对象 我想序列化此表单以执行诸如发送消息、为选定元素生成脚本等操作 我该怎么做：Javascript 按动作序列化表单,javascript,django,angularjs,Javascript,Django,Angularjs,我有多个自动生成的表单，每个表单可能包含多个复选框，这些复选框具有不同的ID，它们表示数据库中的对象 我想序列化此表单以执行诸如发送消息、为选定元素生成脚本等操作 我该怎么做： <form action="{% verbatim %}{{item.assign_url}}{% endverbatim %}" id="form"> <input name="submissiongroup" type="checkbox" value="{{subItem.id}}" /&
<form action="{% verbatim %}{{item.assign_url}}{% endverbatim %}" id="form">
<input name="submissiongroup" type="checkbox" value="{{subItem.id}}" />
<a ng-click="getReport()" class="action-button"><i class="icon icon-file"></i> Pobierz raport</a>
<a ng-click="closeTask()" class="action-button"><i class="icon icon-times"></i> Zakończ zgłoszenie</a>
<a ng-click="sendSMS()" class="action-button"><i class="icon icon-envelope"></i> Wyślij SMS</a>
<a ng-click="assignSubmission(subItem.id)" class="action-button"><i class="icon icon-star"></i> Przypisz do mnie</a>
</form>
<input type="checkbox" name="submissiongroup" ng-change="selectCheckbox(subItem.id)" ng-model="subItem.id"/>
$scope.selectCheckbox = function(scope) {
console.log($scope.subItem);
};
可以使用表单数据对象子项来收集表单字段数据。例如，表单中有一个复选框“submissiongroup”和一个隐藏字段“submissiongroupname”。可以使用ng模型指令将输入值与模型数据绑定。然后使用函数序列化表单数据对象，并将其传递给$http.post函数的第二个参数 注意：在这种情况下，不必设置表单元素的action属性。Angular将通过重新加载整个页面防止表单提交表单数据到服务器的默认操作，除非表单元素指定了action属性 HTML: 截图：
默认情况下，表单数据以JSON的形式发送，JSON是已经序列化的。你想要的是什么不同的东西吗？那么我该如何把我的按钮绑定成这样呢？这似乎对我不起作用。当我选中一个或多个复选框时，$scope.subItem仍然为空。它应该以某种方式得到更新。我该怎么做？你使用了ng模型指令吗？您为它指定了什么值？请检查我编辑的名为“编辑1”的消息。我确实为ng模型使用了subItem.id。我已经创建了空范围对象，选中了一些复选框并触发了事件提交。控制台中有错误吗？selectCheckbox函数的输出是什么？到目前为止，这个函数是空的，它什么也不做-这个函数的目标是在选择项时选择元素的子元素。
<input type="checkbox" name="submissiongroup" ng-change="selectCheckbox(subItem.id)" ng-model="subItem.id"/>
$scope.selectCheckbox = function(scope) {
console.log($scope.subItem);
};
<body ng-app="MyApp">
<div ng-controller="MyCtrl">
<form id="form">
<input name="submissiongroup" type="checkbox" ng-model="subItem.id" />
<input name="submissiongroupname" type="hidden" ng-model="subItem.name" />
<a ng-click="getReport()" class="action-button"><i class="icon icon-file"></i> Pobierz raport</a>
<a ng-click="closeTask()" class="action-button"><i class="icon icon-times"></i> Zakończ zgłoszenie</a>
<a ng-click="sendSMS()" class="action-button"><i class="icon icon-envelope"></i> Wyślij SMS</a>
<a ng-click="assignSubmission(subItem.id)" class="action-button"><i class="icon icon-star"></i> Przypisz do mnie</a>
</form>
</div>
</body>
var module = angular.module("MyApp",[])
module.controller("MyCtrl",function($scope, $http){
//fake data
$scope.subItem = {id:1, name:"group1"};
//methods
$scope.getReport = function(){
}
$scope.closeTask = function(){
}
$scope.sendSMS = function(){
}
$scope.assignSubmission = function(id){
var url = Django.url('submission:assign', {
site : site,
pk: data
});
$http.post(url,$.param($scope.subItem))
.success(function(data) {
console.log('win!');
});
}
});