zoukankan      html  css  js  c++  java
  • Angular 1.63 双向数据绑定 通过 $http 发送数据

    html 部分

    <body ng-app="app">
    <form action="" method="">账号
    <div ng-controller="login">

    <label for=""><input type="text" ng-model="data.name" name="name" id="" value="" /></label>      //  ng-model="data.name"的数据进行绑定绑定
    <br />
    <label for="">密码<input type="text" ng-model="data.password" name="password" id="" value="" /></label>      //  ng-model="data.password"的数据进行绑定绑定
    <br />
    <input type="button" ng-click="login()" value="登录" />          //绑定点击事件login()

    </div>
    </form>
    </body>

    ------------------------------------------

    script部分

    <script type="text/javascript">
    var app = angular.module("app", [])
    app.controller("login", function($scope, $http) {     //注入依赖
    $scope.data = {
    name: "",
    password: ''
    };
    $scope.login = function() {                //创建点击事件发送数据
    console.log($scope.data);
    $http.post("/login", $scope.data)        //post发送数据
    .then(function(result) {}, function(error) {});  //两个回掉函数   一个是成功回调   一个是失败回调

    }

    })
    </script>

    -------------------------------

    总结     双向数据绑定

    1 创建一个 $scope.data  

    2将$scope.data   绑定在相应 input上 使用 ng-model绑定

     angular 传送数据

    1.在controller 注入依赖 $http

    2.创建发送数据的函数

    post方法    $http.post('/someUrl', data, config).then(successCallback, errorCallback);

    post方法   $http.get('/someUrl', config).then(successCallback, errorCallback);

  • 相关阅读:
    项目冲刺之任务场景分析
    一位数组的最大子数组(debug版)
    软件工程课堂五(地铁项目的优化)
    人月神话阅读笔记02
    软件工程第七周总结
    人月神话阅读笔记01
    软件工程第六周总结
    构建之法阅读笔记03
    软件工程第五周总结
    软件工程课堂四(合作开发项目-地铁线路查询)
  • 原文地址:https://www.cnblogs.com/nns4/p/7000318.html
Copyright © 2011-2022 走看看