使用 AngularJS Http Post 将表单 html 中的数据发布到服务器

Posting data in form html to server using AngularJS Http Post

本文关键字:数据 服务器 html Http AngularJS Post 表单 使用      更新时间:2023-09-26

我想问一下发布问题,实际上我在下面有一个表格,在该表格中,我使用了 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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</a>
        </div>
    </div><!-- /row -->
    <p>&nbsp;</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 中输入的键

  1. 地址
  2. 电话
  3. 出生
  4. 名字

我想使用 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 变量不会按原样绑定到驼峰变量。需要完成一些配置。