angularJS1 提交form表单demo

最新推荐文章于 2025-05-24 12:16:57 发布

原创最新推荐文章于 2025-05-24 12:16:57 发布 · 5.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs #表单

angularJS1 专栏收录该内容

21 篇文章

订阅专栏

本文展示了一个使用Angular框架创建的简单表单提交示例，包括HTML和JavaScript代码。通过这个例子，读者可以了解如何利用Angular来处理表单数据，并通过POST请求发送到服务器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

demo.html

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>form demo</title>
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <script type="text/javascript" src="js/angular.min.1.6.0.js"></script>
    </head>

    <body ng-app="app" ng-controller="myctrl">

        <form ng-submit="submitForm()">

            <div id="name" >
                <label>姓名（昵称）</label>
                <input type="text" name="name" placeholder="name" ng-model="user.name">

            </div>

            <div id="phone" >
                <label>手机号码</label>
                <input type="text" name="phone" placeholder="phone" ng-model="user.phone">

            </div>

        </form>
<p >{{user.name+","+user.phone}}</p>

    </body>
    <script>
        var formApp = angular.module('app', []);

        formApp.controller("myctrl", function($scope, $http) {
            $scope.user= {};
            $scope.submitForm = function() {
                $http({
                        method: 'POST',
                        url: 'https://101.231.204.80:5000/gateway/api/frontTransReq.do',
                        data: $.param($scope.user),
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                    .success(function(data) {

                        console.log(data);

                    });
            };
        });
    </script>

</html>