Angular JS表单重新加载页面-Java 学习之路

我是角色的新手我试图发布我的表单但是当我点击我的按钮时，我的表单重新加载了URL上的表单数据，我无法查看我的控制台数据 . 在这里我写了代码 .

<div class="large-7 columns" ng-app="registerform">
                  <div class="sign-up-container" ng-controller="registeruserdetail">
                    <h4 class="title">Not a member? {{2+2}}</h4>
                    <form ng-submit="userdata()">

                        <label>
                          <input type="text" name="firstname" ng-model="registeruser.firstname" placeholder="Firstname">
                        </label>

                        <label>
                          <input type="text" name="lastname" ng-model="registeruser.lastname" placeholder="Lastname">
                        </label>

                        <label>
                          <input type="text" name="email" ng-model="registeruser.email" placeholder="E-mail Address">
                        </label>

                        <label>
                          <input type="text" name="cemail" ng-model="registeruser.confirmemail" placeholder="Confirm E-mail Address">
                        </label>

                        <label>
                          <input type="password" name="password" ng-model="registeruser.password" placeholder="Password">
                        </label>

                        <label>
                          <input type="password" name="cpassword" ng-model="registeruser.confirmpassword" placeholder="Confirm Password">
                        </label>

                        <span class="gender">Gender :</span>
                        <input type="radio" name="gender" ng-model="registeruser.gender" value="male" id="male" ><label for="male">Male</label>
                        <input type="radio" name="gender" value="female" ng-model="registeruser.gender" id="female"><label for="female">Female</label>

                        <div class="button-holder">
                            <button class="" type="submit"><img src="img/sign-up.jpg" /></button>
                        </div>
                    </form>
                  </div>  
                </div>

custom.js

var validationApp = angular.module('registerform', []);

validationApp.controller('registeruserdetail',function($scope,$http){
//$scope.registeruser={};
    $scope.userdata=function(){
        console.log($scope.registeruser);

        $http({
            method:'POST',
            url:'/intern/admin-panel/public/register',
            data:$.param($scope.registeruser),
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},


        }).success(function(response) {
       console.log(response);

         alert('hi');
    }).error(function(response) {
       console.log(response);

       alert('hello');
    });
    alert('here i am');
    };

});

如果我在$ http方法下面应用警报（此处为我），在提交时我的代码将我带到这里，即此警报弹出但未获得任何其他记录 . 任何人都可以告诉我我犯了什么错误的代码 . 编辑：我发现原因，好像我在页面上应用控制器div我可以按照我的意愿处理，但当我在揭示模型上应用相同的控制器div我无法处理我得到了正如我上面提到的那样 . 我如何解决这个问题或揭示模型 .

2 回答

我找到了自己的问题的答案 .

所有代码都很好我只需要阻止显示模型提交表单的默认操作，就像这样 .

<form ng-submit="userdata($event)">  <!-- Pass event-->

                        <label>
                          <input type="text" name="firstname" ng-model="registeruser.firstname" placeholder="Firstname">


                </label>

. . .

和custom.js

$scope.userdata=function(e){ //add event 
         e.preventDefault();  //make change here
         console.log('hi i am here');
        //console.log($scope.registeruser);

回复于 2024-05-19T16:11:44+08:00

请看这里的例子：http://jsbin.com/xejek/2/

validationApp.controller('registeruserdetail',function($scope,$http){

  $scope.userdata=function(){
        console.log($scope.registeruser);

        $http({
            method:'POST',
            url:'/intern/admin-panel/public/register',
            data:$scope.registeruser,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},


        }).then(function(response) {
       console.log(response);

         alert('data posted');
    },function(response) {
       console.log(response);

       alert("can't post data");
    });

    };

});

回复于 2024-05-19T16:11:44+08:00

Angular JS表单重新加载页面

2 回答

相关问题