Ajax提交表单初接触
<!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提交表单初接触的更多相关文章
- Jquery ajax提交表单几种方法
在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$('#表单ID').serialize();就行了,下面我来介绍两个提交表单数据的方法. ...
- Validator验证Ajax提交表单的方法
Validator验证Ajax提交表单的方法 转自:http://hunanpengdake.iteye.com/blog/1671360 当我们在一些稍微复杂的业务时,可能会遇到需要多个表单form ...
- lavarel框架中如何使用ajax提交表单
开门见山,因为laravel以post形式提交数据时候需要加{{csrf_field()}}防止跨站攻击,所以当你用ajax提交表单时候自然也要加 在网上看了很多的解决方式,我是用下面这种方法解决的: ...
- Jquery ajax提交表单几种方法详解
[导读] 在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的 ...
- ajax提交表单序列化（serialize()）数据
知识点: $("#form").serialize();将表单数据序列化为标准URL编码文本字符串(key1=value1&key2=value2…). 以下用一个例子来演 ...
- jquery实现ajax提交表单
一般情况下,我们提交form表单采用的是submit的方法,典型的场景如下. <form id="thisForm" method="post" acti ...
- ajax提交表单、ajax实现文件上传
ajax提交表单.ajax实现文件上传,有需要的朋友可以参考下. 方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单 方式二:使用 ...
- KindEditor：Ajax提交表单时获取不到HTML内容
当用Ajax提交表单时,KindEditor的内容获取不到,HTML数据获取不了 原因:当ajax提交时,KindEdito的HTML数据还没有同步到表单中来,那怎么去获取HTML数据呢? ----- ...
- php使用jquery Form ajax 提交表单，并上传文件
在html5中我们通过FormData就可以ajax上传文件数据,不过因为兼容问题.我们选用jquery.form.min.js来进行ajax的表单提交. 一.jquery.form.js下载地址 ...
随机推荐
- [leetcode](4.21)4. 有效子数组的数目
给定一个整数数组 A,返回满足下面条件的 非空.连续 子数组的数目: 子数组中,最左侧的元素不大于其他元素. 示例 1: 输入:[1,4,2,5,3] 输出:11 解释:有 11 个有效子数组,分别是 ...
- Spring笔记04_AOP注解开发_模板_事务
目录 1. Spring基于AspectJ的注解的AOP开发 1. 1 SpringAOP的注解入门 1.2 Spring的AOP的注解通知类型 1.2.1 @Before:前置通知 1.2.2 @A ...
- SQL使用总结
本文为转载:对于SQL的学习与使用,推荐大家去这儿,讲的很系统: http://www.w3school.com.cn/sql/index.asp 练习SQL的使用,推荐大家去这里: https:// ...
- 关于HTTP中GET与POST的区别
GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一二. 看似很简单,其实是一道送命题 “标准答案”: GET在浏览器回退时是无害的,而POST会再次提交请求. ...
- pthread_exit在main线程中的用处
在main线程中调用pthread_exit会起到只让main线程退出,但是保留进程资源,供其他由main创建的线程使用,直至所有线程都结束,但在其他线程中不会有这种效果 https://stacko ...
- Android为TV端助力 eclipse build project 出现major.minor version 52.0的问题
那些网上说的JDK什么的的问题,我求你们不要误人子弟好吗? 出现在这个的原因就是ADT也就是你的SDK manager 的Tools版本跟你的SDK版本不兼容,如果你的是SDK 23.0.2那你的To ...
- [安卓]ListView 与 RecyclerView的比较
ListView与RecyclerView在在app应用非常广泛,相对于其他的view(button textview)来说比较复杂,接下来我将讲一下创建的流程以及两者的不同. 代码来自<第一行 ...
- C++析构函数可虚性探究
C++虚析构函数 析构函数是用来释放对象所申请的资源的函数. 当类内没有自定义的析构函数时,系统会自动调用默认的析构函数. 那么析构函数能否为虚函数呢? 虚函数的意义在于实现“多态性”.即:不同的个体 ...
- python3 判断数据类型
def estType(): eventList = [1, 'Tom', {'name': 'Lucy', 'age': 16, 'grade': 98}] print(type(eventList ...
- python3.x pool.map方法的实质
我使用多进程的一般方式,都是multiprocessing模块中的Pool.map()方法.下面写一个简单的示例和解析.至于此种方法使用多进程的效率问题,还希望大佬予以指正. 示例: "&q ...