<!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. 【Spring】Autowired原理及与Resource注解区别

    Autowired注解 Autowired顾名思义,表示自动注入,如下是Autowired注解的源代码: @Target({ElementType.CONSTRUCTOR, ElementType.M ...

  2. 【开源】Netty轻松实现聊天室，附带数据记录，聊天历史

    阅读本文约“2.5分钟” 听说快七夕······ 不对,这不是今天的主题,嘿嘿. 今天说说一个小的网页聊天室,功能如下 群聊无限制 记录用户群聊信息 下次登录显示聊天历史 消息发送速度(光速) 聊天历 ...

  3. ASP.NET SignalR介绍

    是什么? 简单来说,ASP.NET SignalR是一个开源的实时通讯(real-time)库,有了ASP.NET SignalR,我们可以在 详细介绍参考:https://docs.microsof ...

  4. Form提交表单后页面刷新不跳转的实现

    <form action="" id="" method="post" target="nm_iframe"> ...

  5. Chrome下面查看placeholder的样式

    在Chrome下面默认是看不到placeholder的样式的 我们可以通过在当前页面的开发者工具里面的settings 勾选下面这个选项,就可以看到了 下面是效果

  6. 从.Net到Java学习第八篇——SpringBoot实现session共享和国际化

    从.Net到Java学习系列目录 SpringBoot Session共享 修改pom.xml添加依赖 <!--spring session--> <dependency> & ...

  7. 钉钉JSAPI前端鉴权

    钉钉二次开发分为如下表所示三种类型的开发,只有企业内部应用才需要对JSAPI鉴权. 类型 开发方式 JSAPI鉴权 应用场景 第三方企业应用 E应用开发 不需要 用于发布到钉钉应用市场,供广大用户下载 ...

  8. 用WijmoJS搭建您的前端Web应用 —— React

    前文回顾 在本系列文章中,我们已经介绍了Angular和Vue框架下 WijmoJS 的玩法. 而今天,我们将展示如何使用 WijmoJS 来搭建一款具备独特创新性.出色性能和简单代码逻辑的 Reac ...

  9. 虹软2.0 离线人脸识别 Android 开发 Demo

    环境要求1.运行环境 armeabi-v7a2.系统要求 Android 5.0 (API Level 21)及以上3.开发环境 Android Studio 下载地址:https://github. ...

  10. 容器化系列 - 通过Grafana监测InfluxDB数据 on Docker

    本文演示在Docker中运行Grafana和InfluxDB,并通过Grafana展示InfluxDB曲线图. 1 准备工作 1.1 安装Docker 请参考这里 1.2 下载镜像 $ docker ...