如何使用 REST API 将表单数据从 ionic 应用程序发送到 parse.com MBaaS

How to send form data from ionic app to parse.com MBaaS using REST API

本文关键字：应用程序 parse MBaaS com ionic REST 何使用 API 数据 表单      更新时间：2023-09-26

我对Ionic/Angular非常陌生（出于必要，今天开始

），

借助教程和文档，

我一直在创建一个演示/测试应用程序，将数据提交到 MBaaS 服务 Parse.com。

但是某处出了点问题，不知道如何添加三个表单字段

详细信息：应用名称为测试应用类/表名是数据

有三列，fname，lname和uname（用于名字姓氏和用户名）

这是我一直在遵循的代码。任何帮助都将是非常有义务的。

索引.html

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->
    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>
    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">

<div>
    <div>
        <ion-nav-bar class="bar-stable">
            <ion-nav-back-button class="button-icon icon ion-ios7-arrow-back">Back</ion-nav-back-button>
        </ion-nav-bar>
        <ion-nav-view></ion-nav-view>
    </div>
</div>
    <!-- Center content -->
   <ion-view title="Add Data">
    <ion-content padding="true" scroll="false" class="has-header">
        <div class="spacer" style="height: 100px;"></div>
        <form ng-controller="defaultCtrl">
            <ion-list>
                <label class="item item-input">
                    <span class="input-label">First Name</span>
                    <input type="text" placeholder="First Name here" name="fname" ng-model="starter.fname">
                </label>
                <label class="item item-input">
                    <span class="input-label">Last Name</span>
                    <input type="text" placeholder="Surname Here" name="lname" ng-model="starter.lname">
                </label>
                <label class="item item-input">
                    <span class="input-label">Username</span>
                    <input type="text" placeholder="Username here" name="uname" ng-model="starter.uname">
                </label>
            </ion-list>
            <button class="button button-calm button-block" type='submit' ng-click="create(starter)">Add data</button>
        </form>
    </ion-content>
</ion-view>


<script type="text/javascript">

angular.module('starter',['ionic']).factory('starter',['$http','PARSE_CREDENTIALS',function($http,PARSE_CREDENTIALS){
    return {
        create:function(data){
            return $http.post('https://api.parse.com/1/classes/data',data,{
                headers:{
                    'X-Parse-Application-Id': PARSE_CREDENTIALS.APP_ID,
                    'X-Parse-REST-API-Key':PARSE_CREDENTIALS.REST_API_KEY,
                    'Content-Type':'application/json'
                }
            });
        }
    }
}]).value('PARSE_CREDENTIALS',{
    APP_ID: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    REST_API_KEY:'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
});

angular.module('starter', ['ionic'])
.controller("defaultCtrl", function ($scope) {
$scope.starter = {};
 $scope.create=function(){
        starter.create({fname:$scope.starter.fname}).success(function(data){
        });


});
</script>

  </body>
</html>

设置身份验证标头

PARSE_HEADER_CREDENTIALS = {
    "x-parse-application-id": "PARSE-APPLICATION-ID",
    "x-parse-rest-api-key": "PARSE-REST-API-KEY"
};

法典

addObject: function (_params) {
    // for POST, we only need to set the authentication header
    var settings = {
        headers: PARSE_HEADER_CREDENTIALS,
    };
    // for POST, we need to specify data to add, AND convert it to 
    // a string before passing it in as seperate parameter data
    var dataObject = {
        "name": _params.name,
        "room": _params.room,
    };
    var dataObjectString = JSON.stringify(dataObject);
    // $http returns a promise, which has a then function
    return $http.post(baseURL + 'classes/stuff', dataObjectString, settings)
        .then(function (response) {
            // In the response resp.data contains the result
            // check the console to see all of the data returned
            console.log('addObject', response);
            return response.data;
        });
},

完整示例发布在项目中：https://github.com/aaronksaunders/info-rest-api-ionic-sample

相关文章：