使用AngularJS发送表单数据不起作用

时间:2017-09-27 09:53:28

标签: jquery angularjs

我想将用户数据插入数据库,但我无法通过数据发送 AngularJS和我是AngularJS的新手。我在insert.php中通过print_r($_POST)进行检查,但它显示为空数组。

如何使用PHP发送表单数据?

HTML

<form name="form" ng-submit="signup()">
    <div class="form-group">
        <label for="Name">Name</label>
        <input type="text" class="form-control" placeholder="Enter your  name" name="name" ng-pattern="/^[a-zA-Z]*$/" required ng-model="user.name">
        <span ng-show="form.name.$dirty && form.name.$error.required">Enter  your name</span>
        <span ng-show="form.name.$dirty && form.name.$error.pattern">Name in  characters only</span>
    </div>

    <div class="form-group">
        <label for="Mobile">Mobile Number</label>
        <input type="text" class="form-control" placeholder="Enter your mobile number" name="mobile" required ng-minlength="10" ng-maxlength="10" ng-model="user.mobile">
        <span ng-show="form.mobile.$dirty &&  form.mobile.$error.required">Enter your mobile number</span>
        <span ng-show="form.mobile.$dirty && (form.mobile.$error.minlength || form.mobile.$error.maxlength)">Mobile number should be 10 digits</span>
    </div>

    <div class="form-group">
        <label for="Name">Email</label>
        <input type="email" class="form-control" placeholder="Enter your email" name="email" required ng-model="user.email">
        <span ng-show="form.email.$dirty && form.email.$error.required">Enter your email</span>
        <span ng-show="form.email.$dirty && form.email.$error.email">Enter a valid email</span>
    </div>

    <div class="form-group">
        <label for="pwd">Password</label>
        <input type="password" class="form-control" placeholder="Enter password" name="password" required ng-minlength="8" ng-model="user.password">
        <span ng-show="form.password.$dirty && form.password.$error.required">Enter your password</span>
        <span ng-show="form.password.$dirty && form.password.$error.minlength">Password should be 8 characters</span>
    </div>

    <button class="btn btn-primary btn-block" name="login" id="login_btn" ng-disabled="form.$invalid">Sign up</button>
</form>

<br><br>

<p class="text-center" id="new"><span>Already have an account</span></p>
<a href="login.php" class="btn btn-default btn-block">Signin</a>
</div>
</div>
</body>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1  /jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

JS

var app = angular.module('MyApp', []);

app.controller('MyCtrl', function($scope, $http) {
    $scope.signup = function(){    
        var data = $scope.user; 

        $http.post("insert.php", data).then(function(resp){        
            console.log(resp);
        });
    }
});

2 个答案:

答案 0 :(得分:0)

首先,将您的脚本标记放在html标记内。

其次你的$ scope.signup函数缺少分号。

尝试在控制器的开头声明用户。

$scope.user = {};

如果您使用的是ng-submit

,则需要为按钮元素指定一种提交方式
<button type="submit"

最好在控制器中声明所有对象。在模板中声明可能会让你到达你不想去的地方。

答案 1 :(得分:0)

我试过并找到了我提出的这个问题的解决方案...谢谢大家。

    var app = angular.module('myApp', []);
        app.controller('MyCtrl', function($scope, $http) {
          $scope.signup = function(user) {
            var data = user;
            console.log(user)
            $http({
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                method:"POST",
                url:"insert.php",
                data: $.param({'data':user}),
                dataType:"json",

           });        
        }
    });