angularJs 之form提交

angularjs提交表单

你可以通过两种方式提交表单：

使用一个按钮元件与NG点击属性。

用NG提交属性（指令）的形式元素。

在这两种情况下，一个JavaScript函数调用对象的范围。你把这个JavaScript函数的范围对象在您的控制器功能。JavaScript函数将数据从形式到你的服务器，通过AJAX。

这里是一个使用表单的NG点击属性按钮元素：

<body>
    <form name="myForm" id="myForm" ng-submit="save()" ng-controller="TestFormModule">
        <input type="text" name="userName" ng-model="user.userName" required="" />
        <input type="password" name="password" ng-model="user.userPassword" required="" />
        <input type="submit" ng-disable="myForm.$invalid" />
    </form>
</body>

<script type="text/javascript">
    var appModule = angular.module('TestFormModule', []);
    appModule.controller('TestFormModule', function ($scope, $http) {
        $scope.user = {
            userName: 'lisi',
            userPassword: '1234'
        };
        $scope.save = function () {

            //var dataObject = {
            //    userName : $scope.user.userName
            //    ,userPassword  : $scope.user.userPassword
            //};
            var o = {};
            var a = $("#myForm").serializeArray();
            $.each(a, function () {
                if (o[this.name]) {
                    if (!o[this.name].push) {
                        o[this.name] = [o[this.name]];
                    }
                    o[this.name].push(this.value || '');
                } else {
                    o[this.name] = this.value || '';
                }
            });
            var responsePromise = $http.post("/Home/FormPost", JSON.stringify(o), {});
            responsePromise.success(function (dataFromServer, status, headers, config) {
                console.log(dataFromServer.title);
            });
            responsePromise.error(function(data, status, headers, config) {
                alert("Submitting form failed!");
            });
            //$.ajax(
            //        {
            //            type: "post",
            //            contentType: "application/json",
            //            url: "/Home/FormPost",
            //            data: JSON.stringify(o),//转换数据格式
            //            success: function (msg) {
            //                alert(p);
            //            },
            //            error: function (XMLHttpRequest, textStatus, errorThrown) {
            //                alert(XMLHttpRequest.statusText);
            //            }
            //        });
        }
    });
</script>

angularJs 之form提交

angularJs 之form提交

相关推荐