Jquery 中 ajaxSubmit 、ajaxForm使用讲解
最近在使用ajaxForm,随便把使用方法记下下来,以便以后回顾。
1 ,引入依赖脚本
<script type="text/JavaScript" src="/js/jQuery/jquery.form.js"></script> //ajaxForm 依赖脚本
<script type="text/javascript" src="/js/jquery/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="/js/jquery/jquery.easyui.min.js"></script>
2 使用方法
<form name="testForm" id="testForm" >
<input type="button" value="submit"/>
</form>
<script type="text/javascript">
var ajax_option={
url:"login",//默认是form action
success:function(data){
}
$('#testForm').ajaxSubmit(ajax_option);
}
</script>
//注意$("#testForm") 引号中名称必须要和form元素id值要保持一致
3 ajaxSubmit 和ajaxForm区别
ajaxForm不能提交表单。在document的ready函数中,使用ajaxForm来为AJAX提交表单进行准备。提交动作必须由submit开始
ajaxSubmit 马上由AJAX来提交表单。你可以在任何情况下进行该项提交。
4
option的参数
var options = {
target: '#output1', // target element(s) to be updated with server response
beforeSubmit: showRequest, // pre-submit callback
success: showResponse // post-submit callback
// other available options:
//url: url // override for form's 'action' attribute
//type: type // 'get' or 'post', override for form's 'method' attribute
//dataType: null // 'xml', 'script', or 'json' (expected server response type)
//clearForm: true // clear all form fields after successful submit
//resetForm: true // reset the form after successful submit
// $.ajax options can be used here too, for example:
//timeout: 3000
};
转自:http://blog.csdn.net/h70614959/article/details/8810270
====================================================================================
前几天在学习form表单提交时看到这两种方法,这两种方法都是实现form的ajax提交的方法,看了很多资料还是不太明白其用法和区别,最后直接自己写demo,很快就理解,所以说实操是学习的最快捷直接的途径。好了,下面回到正题:
在使用这两种方法之前,首先需要安装form.js的插件,下载就不放了,网上一搜就有;
<script src="/Tool/HtmlPage/S45/js/jquery-form.js"></script>
一、首先说用法,ajaxForm和ajaxSubmit都可以接收0或1个参数,该参数可以是一个变量、一个对象或回调函数,这个对象主要有以下参数:
var object= {
url:url, //form提交数据的地址
type:type, //form提交的方式(method:post/get)
target:target, //服务器返回的响应数据显示的元素(Id)号
beforeSerialize:function(){} //序列化提交数据之前的回调函数
beforeSubmit:function(){}, //提交前执行的回调函数
success:function(){}, //提交成功后执行的回调函数
error:function(){}, //提交失败执行的函数
dataType:null, //服务器返回数据类型
clearForm:true, //提交成功后是否清空表单中的字段值
restForm:true, //提交成功后是否重置表单中的字段值,即恢复到页面加载时的状态
timeout:6000 //设置请求时间,超过该时间后,自动退出请求,单位(毫秒)。
}
html代码:
<form action="" id="persondetail" method="post"> <div>姓名:<input name="text1" type="text" class="inputbox"></div> <div>年龄:<input name="text2" type="text" class="inputbox"></div> <div>爱好:<input name="text3" type="text" class="inputbox"></div> <div><input id="submitbtn" type="submit" value="提交"></div> </form>
JS代码:
ajaxForm
$(function(){$("form").ajaxForm(object);})
ajaxSubmit
$(function(){ $('#submitbtn').click(function(){$("form").ajaxSubmit(object); })})
参数也可以为一个回调函数
![](/assets/blank.gif)
$(function(){ $('#submitbtn').click(function(){$("form").ajaxSubmit(function(data){alert(data);}) })})
![](/assets/blank.gif)
二、再说这两种方法的区别
这两种方法主要的却别是ajaxForm不能主动提交form,函数只是为提交表单做准备需要以submit来触发提交。而ajaxSubmit会主动提交表单,同时可以在点击其他按钮时也可以触发提交,不一定是submit按钮。
ajaxForm执行的时候其实相当于
$("form").submit(function(){
$(this).ajaxSubmit();
return false; //此句解释了为什么ajaxSubmit会自动提交表单,想要阻止自动提交,必须return false;
})
转自:http://www.cnblogs.com/xiaosama/p/4747848.html
Jquery 中 ajaxSubmit 、ajaxForm使用讲解相关推荐
- Jquery 中 ajaxSubmit使用讲解
最近在使用ajaxForm,随便把使用方法记下下来,以便以后回顾. 1 ,引入依赖脚本 <script type="text/javascript" src="/j ...
- JQuery读书笔记--JQuery-Form中的AjaxForm和AjaxSubmit的区别
JQuery中的AjaxForm和AjaxSubmit使用差不多功能也差不多.很容易误解. 按照作者的解释: AjaxForm ajaxForm不能提交表单.在document的ready函数中,使用 ...
- 如何通过js获取html文本框中的值,js与jquery获取input输入框中的值实例讲解
如何用javascript获取input输入框中的值,js/jq通过name.id.class获取input输入框中的value 先准备一段 HTML 一.jquery获取input文本框中的值 通过 ...
- js中的window.onload和jquery中的load区别的讲解
JavaScript 中的以下代码 [javascript] view plaincopyprint? Window.onload = function (){ // 编写代码 } Wind ...
- 大白话讲解Promise(三)搞懂jquery中的Promise
前两篇我们讲了ES6中的Promise以及Promise/A+规范,在Promise的知识体系中,jquery当然是必不可少的一环,所以本篇就来讲讲jquery中的Promise,也就是我们所知道的D ...
- jQuery中FormData的使用
web中数据提交事件是常常发生的,但是大多数情况下我们不希望使用html中的form表单提交,因为form表单提交会中断当前浏览器的操作并且会调到另一个地址(即使这个地址是当前页面),并且会重复加载一 ...
- 关于JQuery中的ajax请求或者post请求的回调方法中的操作执行或者变量修改没反映的问题...
前段时间做一个项目,而项目中所有的请求都要用jquery 中的ajax请求或者post请求,但是开始处理一些简单操作还好,但是自己写了一些验证就出现问题了,比如表单提交的时候,要验证帐号的唯一性,所以 ...
- jquery中输入验证中一个不错的效果
在表单的输入验证中,经常要当用户没能正确输入后,要提示"XXXX输入错误" 这一类的信息,如何能搞到动态一点呢,今天发现jquery中的一个不错的效果,笔记之. 1 包含jquer ...
- jQuery中的常用内容总结(一)
jQuery中的常用内容总结(一) 前言 不好意思(✿◠‿◠),由于回家看病以及处理一些其它事情耽搁了,不然这篇博客本该上上周或者上周写的:同时闲谈几句:在这里建议各位开发的童鞋,如果有疾病尽快治 ...
最新文章
- nginx反向代理编译异常
- 隐藏层节点数对迭代次数分布规律的影响
- 用Python实现一个实时运动的大挂钟效果
- 【F3简介】一张图看懂FPGA-F3实例
- 在onelogin中使用OpenId Connect Implicit Flow
- 《剑指offer》旋转数组的最小数字
- 附加作业:源自刘乾老师的问题
- 移动IM开发那些事:技术选型和常见问题
- bootstrap3的 progress 进度条
- python调用hive与java调用区别_python3.6.5基于kerberos认证的hive和hdfs连接调用方式
- 【Cisco NA】单臂路由+DHCP+DHCP中继+GRE Tunnel
- 【转】计算机科学中最重要的32个算法
- 6.824 2020 视频笔记五:Go Concurrency
- 将Web项目War包部署到Tomcat服务器基本步骤
- cvs有机添加剂检测_固化剂检测,项目标准有哪些呢?
- MATLAB如何输出高分辨率图片?
- java 米与厘米 转换_米转码换算(米与码的换算关系)
- 【八校联考2013】百团大战
- 多目标优化算法:多目标黄金搜索优化算法MOGSO(提供MATLAB代码)
- oracle数据库设计思维导图,Oracle