Angular之【form提交问题】

前端页面是这样:

  <form class="form-horizontal" role="form" name="LoginForm" >
      <div class="list list-inset">
          <label class="item item-input">
              <input type="text" placeholder="用户名" ng-model="userInfo.username">
          </label>
          <label class="item item-input">
              <input type="password" placeholder="密码" ng-model="userInfo.password">
          </label>
      </div>
      <button type="submit" ng-disabled="LoginForm.$invalid"  class="button button-block button-balanced" ng-click="login()">登录</button>
      <p class="text-center"> <a ui-sref="register">注册</a></p>
    </form>

 而angular是这样的

var McardController = angular.module(‘McardController‘, [ ‘angular-flash.service‘, ‘angular-flash.flash-alert-directive‘ ])
                                .config(function (flashProvider) {
                                    // Support bootstrap 3.0 "alert-danger" class with error flash types
                                    flashProvider.errorClassnames.push(‘alert-danger‘);
                                });

McardController.controller(‘LoginCtrl‘, function($scope, $http, $window, $location, flash, LoginService, $ionicPopup, $state) {
    $scope.userInfo = {};//这里如果没有初始化,表单提交过来是接收不到数据的。这个地方值得我们注意下

/*     $http.get(‘/api/login‘)
          .success(function(data){

          //  $scope.cards = data;
            }).error(function(data){

                console.log(‘Error:‘+data);
            });*/
    $scope.failed_login = "";
    $scope.login = function() {
      console.log($scope.userInfo);
        $scope.$parent.failed_login = "";
            var user = {"username": $scope.userInfo.username, "password": $scope.userInfo.password};
            console.log(user);

            if($scope.userInfo.username!==undefined || $scope.userInfo.password !==undefined){
            //    $http({method: ‘POST‘, url: ‘/api/login‘, user:user}).
            $http.post(‘/api/login‘, $scope.userInfo).
                    success(function(data, status, headers, config) {
                        console.log("login success");
                        flash.success = "Success";
                       // $window.location.href="/configure";
                       $location.path(‘/configure‘);
                    }).
                      error(function(data, status, headers, config) {
                         var alertPopup = $ionicPopup.alert({
                        title: ‘登录失败!‘,
                        template: ‘请检查你的账号!‘
                       });
                    });
            }
/*        LoginService.loginUser($scope.userInfo).success(function(data) {

       //   var user = {"username": $scope.username, "password": $scope.password};

             $http.post(‘/api/signup‘, $scope.userInfo)
                .success(function(data){
                $location.path(‘/home‘);
            }).error(function(data){
                console.log(‘Error:‘+data);
            });
            $state.go(‘tab.dash‘);
        }).error(function(data) {
            var alertPopup = $ionicPopup.alert({
                title: ‘登录失败!‘,
                template: ‘请检查你的账户!‘
            });
        });*/
    }

})

  

时间: 2024-12-29 09:20:59

Angular之【form提交问题】的相关文章

2016 系统设计第一期 (档案一)jQuery ajax serialize()方法form提交数据

jQuery ajax serialize()方法form提交数据,有个很奇怪的问题,好像不能取到隐藏控件的值. //点击提交按钮保存数据 $('#btn_submitUser').click(function () { var UserId = $('#UserId').val(); if (UserId == "") { $.ajax({ type: "POST", url: '/Users/Create/', data: $("#SaveUserFo

jQuery的ajax的form提交方法应用

1.如果不用ajax的form提交,就必须把表单的每一条数据进行获取,并提交给action进行处理.这样做比较麻烦,现在用了jQuery的easyui,使用封装好的ajax的form提交.脚本代码如下: //提交表单 function sysusersave(){ if($.formValidator.pageIsValid()){//校验表单输入信息是否合法 //使用jquery的ajax from提交,指定from的id和回调方法,提交的url使用提from中的action,参数为空,传递J

asp.net MVC中form提交和控制器接受form提交过来的数据

MVC中form提交和在控制器中怎样接受 1.cshtml页面form提交2.控制器处理表单提交数据4种方式方法1:使用传统的Request请求取值[HttpPost]public ActionResult AddNews(){    string a=Request["text1"];    string b=Request["text2"];}方法2:Action参数名与表单元素name值一一对应[HttpPost]public ActionResult Add

asp.net MVC中控制器获取表单form提交的数据之实体类数据

第一次写记录文章,难免有不足之处:欢迎指出. 1.新建一个mvc项目如: 2.新建一个Test.cs 注意get,set方法不能简写 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 using System; using System.Collections.Generic; using System.Linq; usi

form提交时,传递额外的参数

在进行表单提交时,会遇到在提交前增加额外参数的情况,对此有如下几种解决方法: 1. 在表单里使用hidden的input,将参数放到里面. 缺点:在form表单里会增加一些input节点,感觉不爽. 2. 在提交前使用javascript动态在表单里添加input. 缺点:需要写脚本. 3. 使用ajax提交拼接参数. 缺点:如果表单里有文件需要上传,就行不通了. form提交时,传递额外的参数,布布扣,bubuko.com

解析:使用easyui的form提交表单,在IE下出现类似附件下载时提示是否保存的现象

原文:解析:使用easyui的form提交表单,在IE下出现类似附件下载时提示是否保存的现象 之前开发时遇到的一个问题,使用easyui的form提交表单,在Chrome下时没问题的,但是在IE下出现类似附件下载时提示是否保存的现象. 这里记录一下如何解决的.其实这个现象不光是easyui的form,还有其他一些form插件也是一样的,使用不当就会遇到这个问题. 前台: <!DOCTYPE html> <html> <head> <meta http-equiv=

使用HttpURLConnection请求multipart/form-data类型的form提交

写一个小程序,模拟Http POST请求来从网站中获取数据.使用Jsoup(http://jsoup.org/)来解析HTML. Jsoup封装了HttpConnection的功能,可以向服务器提交请求.但分析了目标网站(http://rapdb.dna.affrc.go.jp/tools/converter/run)的数据提交方式后,决定自己用代码来模拟Content-type为 multipart/form-data的form表单提交. 1.HttpURLConnection :A URLC

form提交表单

菜鸟的第一篇文章,今天在工作中遇到一个问题.下面来说说,也许很多大神都知道了,但作为菜鸟还是想说说. 对于table表格里面的数据,如下: [html] view plain copy print? <pre name="code" class="html">  <table> <tr> <td>ID</td> <td>姓名</td> <td>年龄</td> 

jquery.validate+jquery.form提交的三种方式

原文:http://www.cnblogs.com/datoubaba/archive/2012/06/06/2538873.html jquery.validate+jquery.form提交的三种方式 概述:本篇主要讨论jquery.validate结合jquery.form实现对表单的验证和提交方案. 方式一:是通过jquery.validate的submitHandler选项,即当表单通过验证时运行回调函数.在这个回调函数中通过jquery.form来提交表单: 方式二:是通过jquer

easyUI form提交与springMVC交互时服务端返回的错误处理

asyUI form的submit接口中没有提供error回调函数,网上一种解决方案是串联.success(function(){}).error(function(){}),然后通过jqXHR进行统一处理:但是我发现这种方案不论服务端返回正确还是异常,都会调用.error(),而且这样写代码也有点乱.经过两天摸索,基本找到了解答.对于post提交的数据,服务端的controller定义为void,不必返回值,通过在controller上注解的方式控制返回的http头.在这里发现对于easyUI