使用 AngularJS Http Post 将表单 html 中的数据发布到服务器
Posting data in form html to server using AngularJS Http Post
我想问一下发布问题,实际上我在下面有一个表格,在该表格中,我使用了 ng-submit 和 ng-click 作为该功能,但它不起作用,谁能帮我?
<form method="post" class="sky-form" name="form">
<div class="row">
<div class="col col-12"><img src="public/images/icon_namapasien.png" alt=""/> Nama Pasien</div>
</div>
<div class="row">
<div class="col col-10">
<div ng-repeat="profile in profil">
<label class="input disabled">
<input type="text" ng-model="profile.name">
</label>
</div>
</div>
<div class="col col-2">
<a class="btnstatus"> </a>
</div>
</div><!-- /row -->
<div class="row">
<div class="col col-12"><img src="public/images/icon_tgl.png" alt=""/> Tanggal Lahir</div>
</div>
<div class="row">
<div class="col col-3">
<label class="select">
<div ng-repeat="profile in profil">
<select name="gender" ng-model="profile.birth_date">
<option ng-repeat="n in range(01,31)" value="{{n}}">{{n}}</option>
</select>
<i></i>
</div>
</label>
</div>
<div class="col col-4">
<label class="select">
<div ng-repeat="profile in profil">
<select name="gender" ng-model="profile.birth_month">
<option value="01">Januari</option>
<option value="02">Februari</option>
<option value="03">Maret</option>
<option value="04">April</option>
<option value="05">Mei</option>
<option value="06">Juni</option>
<option value="07">Juli</option>
<option value="08">Agustus</option>
<option value="09">September</option>
<option value="10">Oktober</option>
<option value="11">November</option>
<option value="12">Desember</option>
</select>
<i></i>
</div>
</label>
</div>
<div class="col col-3">
<label class="select">
<div ng-repeat="profile in profil">
<select name="gender" ng-model="profile.birth_year">
<option ng-repeat="n in range(1910,2016)" value="{{n}}">{{n}}</option>
</select>
<i></i>
</div>
</label>
</div>
<div class="col col-2">
<a class="btnstatus"> </a>
</div>
</div><!-- /row -->
<div class="row">
<div class="col col-12"><img src="public/images/icon_gender.png" alt=""/> Jenis Kelamin</div>
</div>
<div class="row">
<div class="col col-10">
<div class="select">
<label class="select">
<div ng-repeat="profile in profil">
<select name="gender" ng-model="profile.gender">
<option value="1">Pria</option>
<option value="0">Wanita</option>
</select>
<i></i>
</div>
</label>
</div>
</div>
<div class="col col-2">
<a class="btnstatus"> </a>
</div>
</div><!-- /row -->
<div class="row">
<div class="col col-12"><img src="public/images/icon_alamat.png" alt=""/> Alamat</div>
</div>
<div class="row">
<div class="col col-10">
<div ng-repeat="profile in profil">
<label class="input disabled">
<input type="text" ng-model="profile.address"/>
<input type="hidden" name="name" value="0" ng-model="kodekota">
</label>
</div>
</div>
<div class="col col-2">
<a class="btnstatus"> </a>
</div>
</div><!-- /row -->
<div class="row">
<div class="col col-12"><img src="public/images/icon_telp.png" alt=""/> Nomor Telepon / Hp</div>
</div>
<div class="row">
<div class="col col-10">
<div ng-repeat="profile in profil">
<label class="input disabled">
<input type="text" value="" ng-model="profile.phone"/>
</label>
</div>
</div>
<div class="col col-2">
<a class="btnstatus"> </a>
</div>
</div><!-- /row -->
<p> </p>
<button class="btn-yellow" type="submit" name="submit" ng-click="postProfil()">Simpan Perubahan</button>
</form>
这是 angularjs 代码
$scope.getProfil = function(){
$http.get('/getUrl').success(function(data){
$scope.profil = data;
})
}
$scope.getProfil();
$scope.profile = {};
$scope.postProfil = function(){
$http.post('/postUrl').success(function(data){
$scope.getProfil();
}).error(function(data){
console.log(data);
})
}
$scope.range = function(min, max, step){
step = step || 1;
var input = [];
for (var i = min; i <= max; i += step) input.push(i);
return input;
};
有一件事是肯定的,我知道 http.post 只使用链接是一个坏主意,但在我这样做之前,我已经使用alert javascript函数对其进行了调试,例如我想从 profile.name 获取数据,所以我在postProfil函数中提醒它(profile.name),但它返回未定义。
这是应该在 http.post 中输入的键
- 地址
- 电话
- 出生
- 性
- 名字
我想使用 http 数组结构,例如
$http.post({
method: 'POST',
url: '/postUrl',
data: {
//data is here
}
})
你们怎么看?谢谢
编辑:
也许我会改变我的问题,你知道使用 AngularJS 从 apiUrl 中的先前数据更新数据的代码吗?所以我的问题是getProfil和postProfil在相同的键和值中(但我认为有些键是不同的)。
只需使用ng-model $scope.profile
:
$scope.postProfil = function(){
$http.post('/postUrl', $scope.profile).success(function(data){
$scope.getProfil();
}).error(function(data){
console.log(data);
})
}
$http.post('api/create/something', yourData)
应该为您的问题解决问题。
$http.post 接受(URL、数据、选项?)另一方面,$http直接接受(选项)。你可以像这样使用它
$http({
url: 'api/create/something',
data: yourData,
method: 'POST'
}).then(....)
此代码与上面的代码相同。
关于不准确的数据绑定。这可能是区分大小写的问题,也可能是来自 rest api 配置的序列化问题。有时 PascalCased 变量不会按原样绑定到驼峰变量。需要完成一些配置。
相关文章:
- 使用谷歌应用程序脚本将服务器端数据表返回到客户端
- 如何配置分析以将数据发送到我自己的服务器
- 如何将Knockout.JS与服务器已经在DOM中呈现的数据同步
- React路由器服务器端渲染和ajax获取数据
- 在HTML页面上显示node.js服务器中的数据
- 从服务器获取数据并在选择控件中使用ng选项无法显示选项
- 如何在服务器上保存数据以备日后使用
- 将JSON数据从服务器加载到knockout.jsobservable中
- 如何在Angular.js中循环动态添加Fields并获取数据并将其发送到服务器
- Highcharts可以从服务器加载数据,但不能更新
- JQGrid使用服务器编辑后的更新数据刷新数据
- 返回之前获取数据服务器端
- 验证后 JSON 数据服务器端
- Angular E2E 测试数据:ngMockE2E 或测试数据服务器
- 如何在 Meteor 中存储特定于客户端的数据服务器端
- 在我们的数据服务器上保存谷歌地图中的gData
- 如何从服务器接收数据(服务器用java编写,到HTML文件)
- 如何发送数据服务器(JAVA编写)到客户端(Node.js编写)
- 如何访问Backbone Fetch数据服务器端
- 发布数据服务器端并在提交表单时执行javascript代码