代码下载：https://files.cnblogs.com/files/xiandedanteng/angularjsFormSubmit.rar

前台代码：

<%@ page contentType="text/html; charset=UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html ng-app="notesApp">
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <meta charset="utf-8">
    <script src="angular1.4.6.min.js"></script>
  </head>

  <body ng-controller="MainCtrl as ctrl">
    <form action="Verify" id="form1">
          Name:<input type="text" name="name" ng-model="ctrl.username"/><br/>
          You typed:{{ctrl.username}}<br/>
          Pswd:<input type="password" name="pswd"  ng-model="ctrl.password"/><br/>
          You typed:<span ng-bind="ctrl.password"></span><br/>
          <button type="button" ng-click="ctrl.reset()">Reset</button> <!-- 注意这里不写 type="button" 会导致表单提交-->
          <button type="button" ng-click="ctrl.submit()">Submit</button>

    </form>
  </body>
</html>

<script type="text/javascript">
<!--
    angular.module('notesApp',[])
     .controller('MainCtrl',[function(){
       var self=this;

       self.reset=function(){
               self.username="";
               self.password="";
       };

       // 在Chrome正常，在FirxFox中self.username，self.password是undefined
       self.submit=function(){
               alert("self.username="+self.username);
               alert("self.password="+self.password);
               if(self.username!="" && self.password!=""){
                   alert(2);
                   document.forms[0].submit();
               }else{
                   alert(3);
                   alert("用户名或密码不全");
               }
               alert(4);

       };

     }]);
//-->
</script>

后台代码：

package com.test;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class VerifyServlet extends HttpServlet {
    private static final long serialVersionUID = 56890894234786L;

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, java.io.IOException {
        request.setCharacterEncoding("UTF-8");

        String name=request.getParameter("name");
        String pswd=request.getParameter("pswd");

        request.setAttribute("name", name);
        System.out.println("name="+name);
        request.setAttribute("pswd", pswd);
        System.out.println("pswd="+pswd);

        RequestDispatcher dispatcher = request.getRequestDispatcher("result.jsp");
        dispatcher.forward(request, response);
        return;
    }

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, java.io.IOException {
        doPost(request, response);
    }
}

AngularJS的表单验证提交示例的更多相关文章

  1. 表单验证提交——submit与button

    之前做东西接触过表单验证提交,但是都是为了完成工作,做完就做完了,没有注过表单验证提交有几种方法,各方法都有啥区别.今天瞎折腾了一下,对他们研究了一下,如下是我个人的理解: submit: 从字面上看 ...

  2. 基于angularJS的表单验证练习

    今天看了一下angularJS的表单验证,看的有点云里雾里(也有可能是雾霾吸多了),于是做了一个小练习来巩固一下. html: <div ng-controller="Aaa" ...

  3. 第一百五十四节，封装库--JavaScript，表单验证--提交验证

    封装库--JavaScript,表单验证--提交验证 将表单的所有必填项,做一个判断函数,填写正确时返回布尔值 最后在提交时,判断每一项是否正确,全部正确才可以 提交 html <div id= ...

  4. 【AngularJs】---表单验证

    1. 必填项 验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required /> 2 ...

  5. angularJS 过滤器 表单验证

    过滤器1.filter的作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果,主要用于数据的格式化.2.内置过滤器(1)Currency(货币)将一个数值格式化为货币格式,默认为$(2)D ...

  6. AngularJS 的表单验证

    最近开始学习angularjs,学到表单验证的时候发现有必要学习下大神的好文章: 转:http://www.oschina.net/translate/angularjs-form-validatio ...

  7. angularjs的表单验证

    angularjs内置了常用的表单验证指令,比如min,require等.下面是演示: <!DOCTYPE html> <html> <head> <meta ...

  8. AngularJS复习------表单验证

    在AngularJS中能够将HTML5表单验证功能同自己的验证指令结合起来使用,这里介绍使用的核心功能. 使用表单验证,首先要确保表单的每个控件都有name属性 如果想要屏蔽浏览器对表单的默认验证行为 ...

  9. MVC身份验证.MVC过滤器.MVC6关键字Task,Async.前端模拟表单验证,提交.自定义匿名集合.Edge导出到Excel.BootstrapTree树状菜单的全选和反选.bootstrap可搜索可多选可全选下拉框

    1.MVC身份验证. 有两种方式.一个是传统的所有控制器继承自定义Control,然后再里面用MVC的过滤器拦截.所以每次网站的后台被访问时.就会先走入拦截器.进行前端和后端的验证 一个是利用(MVC ...

随机推荐

  1. Selenium WebDriver-判断页面中某一元素是否可操作

    driver.get("http://127.0.0.1/test_enable.html") i1=driver.find_element_by_id("input1& ...

  2. NumPy数值计算（1）

    NumPy数值计算(1) 将列表转为NumPy中的array from __future__ import print_function from numpy import * import oper ...

  3. 聊聊、Jstack 解决生产问题

    最近项目很多,所在公司是一家金融企业.从 APP 端到 基金公司,整个体系涉及到很多系统.而我所负责的,正好是整个体系尾部,业务核心.前段时间,隔几天总会有用户购买理财产品失败,但是日志里面没有任何异 ...

  4. [译]pycache是什么？

    原回答: https://stackoverflow.com/questions/16869024/what-is-pycache 当你用python运行一个程序时,解释器首先将它编译成字节码(这是一 ...

  5. PHP服务接口测试

    最近百度Hi项目拟针对内部员工版本增加设备绑定功能,也许是公司出于对员工聊天信息安全性的考虑,同时也考虑到后期会有相应的员工名片等功能的推出,设备绑定的过程也是为了员工名片功能做个准备吧!设备绑定的服 ...

  6. 【bzoj3073】[Pa2011]Journeys 线段树优化建图+堆优化Dijkstra

    题目描述 Seter建造了一个很大的星球,他准备建造N个国家和无数双向道路.N个国家很快建造好了,用1..N编号,但是他发现道路实在太多了,他要一条条建简直是不可能的!于是他以如下方式建造道路:(a, ...

  7. 【Luogu】P2389电脑班的裁员（DP）

    题目链接 sbt交了三遍才过是我的耻辱…… 就是设f[i][j]搞个三重循环DP一下,以上. #include<cstdio> #include<cstdlib> #inclu ...

  8. 【Luogu】P1411树（树形高精DP）

    题目链接 我貌似又做了一道高精题呢(笑) 这题的DP方程很好想,设f[i][j]表示i为根的子树,i所在联通块大小为j的最大值,然后乱搞 但是要高精,那么搞是得要高精除的 所以考虑f[i][j]是除以 ...

  9. kb-01-e<取余操作，宽搜，巧妙>；

    题目描述: n属于1到200,找到对应的一个数只含有0和1,并且是n的倍数: 分析: 本题有几个数会是大数:所以要考虑大数: 用到余数的性质:例如n=6,1%6=1: 1*10%6=4:       ...

  10. 喵星球上的点名（bzoj 2754）

    Description a180285幸运地被选做了地球到喵星球的留学生.他发现喵星人在上课前的点名现象非常有趣.   假设课堂上有N个喵星人,每个喵星人的名字由姓和名构成.喵星球上的老师会选择M个串 ...