<!doctype html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">
  <title>签到test</title>

  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit">

  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp"/>

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
  <meta name="msapplication-TileColor" content="#0e90d2">

  <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
  <!--
  <link rel="canonical" href="http://www.example.com/">
  -->

  <link rel="stylesheet" href="assets/css/amazeui.min.css">
  <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a
  href="http://browsehappy.com/" target="_blank">升级浏览器</a>
  以获得更好的体验！</p>
<![endif]-->
<!-- 开始写代码 -->
<!-- banner -->
  <div data-am-widget="slider" class="am-slider am-slider-a1" data-am-slider='{"directionNav":false}' >
    <ul class="am-slides">
        <li>
            <img src="assets/img/banner1.png">
        </li>
        <li>
            <img src="assets/img/banner1.png">

        </li>
    </ul>
  </div>
  <form class="form_box" id="form" action="/users/login">
    <div class="form_group">
      <div class="group_box">
        <span class="am-fl"><i class="icon iconfont"></i></span>
        <input type="text" placeholder="姓名" name="name">
      </div>
    </div>
    <div class="form_group">
      <div class="group_box">
        <span class="am-fl"><i class="icon iconfont"></i></span>
        <input type="text" name="phone" placeholder="电话">
      </div>
    </div>

    <div class="am-form-group">
      <div class="am-u-sm-12 tc">
        <button type="button" class="am-btn am-btn-default" onclick="login()">登录</button>
      </div>
    </div>
  </form>

<!-- 代码结束 -->
<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!--<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/jquery.validate.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#form').validate({

            rules:{
                user:{
                    required:true,
                    minlength:2,
                },
                phone:{
                    required:true,
                    minlength:11,
                },
            },
            messages:{
                user:{
                    required:'账号不得为空',
                    minlength:'账号不得小于2位',
                    isMobile : true
                },
                phone:{
                     required : "请输入手机号",
                     minlength : "不能小于11个字符",
                     isMobile : "请正确填写手机号码"
                },
            },

        });
    })
    var  name='夏小夏'+'18211013898';//用参数拼接的方法
    //ajax提交表单
    function login() {
            $.ajax({
            //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "" ,//url
                data: {mid:'4900310296747830231',name:name,password:'123456'},//$('#form').serialize(),
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result.resultCode == 200) {
                        alert("SUCCESS");
                    }
                },
                error : function() {
                    alert("异常！");
                }
            });
        }
</script>

 </body>
</html>

要注意的问题：

1、如果是form提交的话，可以用submit；如果是ajax提交表单用type=button,这样更方便；

2、//$('#form').serialize(),//序列化表单—— 注释的这句不建议使用，不够灵活，因为在ajax需要灵活的提交所需要的参数

Ajax提交表单初接触的更多相关文章

  1. Jquery ajax提交表单几种方法

    在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$('#表单ID').serialize();就行了,下面我来介绍两个提交表单数据的方法. ...

  2. Validator验证Ajax提交表单的方法

    Validator验证Ajax提交表单的方法 转自:http://hunanpengdake.iteye.com/blog/1671360 当我们在一些稍微复杂的业务时,可能会遇到需要多个表单form ...

  3. lavarel框架中如何使用ajax提交表单

    开门见山,因为laravel以post形式提交数据时候需要加{{csrf_field()}}防止跨站攻击,所以当你用ajax提交表单时候自然也要加 在网上看了很多的解决方式,我是用下面这种方法解决的: ...

  4. Jquery ajax提交表单几种方法详解

    [导读] 在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的 ...

  5. ajax提交表单序列化（serialize()）数据

    知识点: $("#form").serialize();将表单数据序列化为标准URL编码文本字符串(key1=value1&key2=value2…). 以下用一个例子来演 ...

  6. jquery实现ajax提交表单

    一般情况下,我们提交form表单采用的是submit的方法,典型的场景如下. <form id="thisForm" method="post" acti ...

  7. ajax提交表单、ajax实现文件上传

    ajax提交表单.ajax实现文件上传,有需要的朋友可以参考下. 方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单 方式二:使用 ...

  8. KindEditor：Ajax提交表单时获取不到HTML内容

    当用Ajax提交表单时,KindEditor的内容获取不到,HTML数据获取不了 原因:当ajax提交时,KindEdito的HTML数据还没有同步到表单中来,那怎么去获取HTML数据呢? ----- ...

  9. php使用jquery Form ajax 提交表单，并上传文件

    在html5中我们通过FormData就可以ajax上传文件数据,不过因为兼容问题.我们选用jquery.form.min.js来进行ajax的表单提交.   一.jquery.form.js下载地址 ...

随机推荐

  1. linux_shell 编程学习-初识she'll

    一.she'll编程规范 1.she'll脚本命名一般为英文的大小写; 2.不能用特殊符号.空格来命名; 3.she'll脚本后缀以.sh结尾; 4.不建议she'll命名为纯数字,一般以脚本功能命名 ...

  2. CSS3 font-face使用

    在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体. 通过 CSS3,web 设计师可以使用他们喜欢的任意字体. 当您找到或购买到希望使用的字体时,可将该字体文件存放到 web 服 ...

  3. Dynamics 365执行操作报SQL Server已超时，更改这个超时设置的方法

    本人微信公众号:微软动态CRM专家罗勇 ,回复291或者20190110可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me . 当执 ...

  4. 国外线下技术俱乐部建设(1) - Belgrade Python技术俱乐部2019-01-25活动感悟

    这是<国外线下技术俱乐部建设>系列文章之一.   虽然之前接触过Belgrade的.NET技术俱乐部,但是它最近活动要春节后了. 出于观摩别人是怎么搞线下社区的心态,还有自己也有在用Pyt ...

  5. IEC104协议规约解析

    一.四遥信息体基地址范围 104调度规约有1997年和2002年两个版本,在流程上没有什么变化,02版只是在97版上扩展了遥测.遥信等信息体基体址,区别如下: 类别 1997版基地址 2002版基地址 ...

  6. SQL语句（理论）

    1.SQL已经成为关系数据库的标准语言 2.SQL是一个非过程化的语言,因为他一次处理一个记录 3.SQL命令比较简单,最高级的命令几天之内便可掌握. 有属下类型的命令: 查询数据. 在表中插入.修改 ...

  7. IDEWorkspaceChecks.plist文件是干什么用的？

    在提交PR的时候,无意间发现了在xcworkspace/xcshareddata中多了一个名为IDEWorkspaceChecks.plist的文件.自己并没有手动创建此文件,在网上查了一下,最终对其 ...

  8. Python基础——3特性

    特性 切片 L=[0,1,2,3,4,5,6,7,8,9,10] L[:3]=[0,1,2] L[-2:]=[9,10] L[1:3]=[1,2] L[::3]=[0,3,6,9] L[:5:2]=[ ...

  9. HBase 是列式存储数据库吗

    在介绍 HBase 是不是列式存储数据库之前,我们先来了解一下什么是行式数据库和列式数据库. 行式数据库和列式数据库 在维基百科里面,对行式数据库和列式数据库的定义为:列式数据库是以列相关存储架构进行 ...

  10. 【入门】Spring-Boot项目配置Mysql数据库

    前言 前面参照SpringBoot官网,自动生成了简单项目点击打开链接 配置数据库和代码遇到的问题 问题1:cannot load driver class :com.mysql.jdbc.Drive ...