【js】Ajax提交form表单(ajaxSubmit使用讲解 )
1 、引入依赖脚本
<script type="text/javascript" src="/js/jquery/jquery.form.js"></script> //ajaxForm 依赖脚本
脚本下载地址 http://download.csdn.net/detail/yjqyyjw/9488464
2、使用方法
//1、回调函数使用方法
$('#form1').ajaxForm(function() { $('#output1').html("提交成功!").show();
});
$('#form1').ajaxSubmit(function() { $('#output2').html("提交成功!").show();
}); //2、option对象使用方法
var ajax_option={target: '#output', //把服务器返回的内容放入id为output的元素中 beforeSubmit: showRequest, //提交前的回调函数 success: showResponse, //提交后的回调函数 url: url, //默认是form的action, 如果申明,则会覆盖 type: type, //默认是form的method(get or post),如果申明,则会覆盖 dataType: null, //html(默认), xml, script, json...接受服务端返回的类型 clearForm: true, //成功提交后,清除所有表单元素的值 resetForm: true, //成功提交后,重置所有表单元素的值 timeout: 3000 //限制请求的时间,当请求大于3秒后,跳出请求
};
//formData: 数组对象,提交表单时,Form插件会以Ajax方式自动提交这些数据,格式如:[{name:user,value:val },{name:pwd,value:pwd}]
//jqForm: jQuery对象,封装了表单的元素
//options: options对象
function showRequest(formData, jqForm, options){ var queryString = $.param(formData); //name=1&address=2 var formElement = jqForm[0]; //将jqForm转换为DOM对象 var address = formElement.address.value; //访问jqForm的DOM元素 return true; //只要不返回false,表单都会提交,在这里可以对表单元素进行验证
};
function showResponse(responseText, statusText){ //dataType=xml var name = $('name', responseXML).text(); var address = $('address', responseXML).text(); $("#xmlout").html(name + " " + address); //dataType=json $("#jsonout").html(data.name + " " + data.address);
};
$('#form1').ajaxSubmit(ajax_option);
3、实战
html 部分
<!-- 表单中若无文件上传,可不写enctype="multipart/form-data" -->
<form id="from1" name="from1" action="#" method="post" class="form-horizontal" enctype="multipart/form-data"><button type="button" id="save" class="btn blue">保存</button><button type="button" id="cancel" class="btn">取消</button>
</form>
js 部分
var ajax_option={url:"gfan_yyq!images_edit_save.action",success:function(data){var result = $.parseJSON(data);if (result.success) {var index = parent.layer.getFrameIndex();var parentWin = parent;parent.layer.msg(result.message, 1, 1, function(){parentWin.layer.close(index);parentWin.window.location.href=parentWin.window.location.href;});} else {parent.layer.msg(result.message, 1, 3);}}
};
$('#save').click(function(){alert(123);$('#from1').ajaxSubmit(ajax_option);
});
$('#cancel').click(function(){var index = parent.layer.getFrameIndex();parent.layer.close(index);
});
4、总结ajaxSubmit 和ajaxForm区别
ajaxForm不能提交表单。在document的ready函数中,使用ajaxForm来为AJAX提交表单进行准备。提交动作必须由submit开始
ajaxSubmit 马上由AJAX来提交表单。你可以在任何情况下进行该项提交。
【js】Ajax提交form表单(ajaxSubmit使用讲解 )相关推荐
- 使用ajax提交form表单,包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html...
使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){... },&quo ...
- 使用原生javascript实现ajax提交form表单
使用原生javascript实现ajax提交form表单 ============================ 1 准备表单 首先我们需要编写一个html代码,这里我是采用nodej ...
- 通过php jq ajax 提交form表单
参考http://www.php100.com/html/webkaifa/PHP/PHPyingyong/2013/0619/13568.html html <div id="con ...
- 学习日志day45(2021-09-09)(1、有道翻译API使用json格式数据 2、JSONP 3、Ajax提交form表单 4、Web Uploader)
学习内容:学习JavaWeb(Day45) 1.有道翻译API使用json格式数据 2.JSONP 3.Ajax提交form表单 4.Web Uploader 1.有道翻译API使用json格式数据 ...
- ajax 表单提交传文件,Ajax提交Form表单及文件上传
刚刚申请下来的博客,写得第一篇.有点小激动,本人以前是一名工业3D设计师突然有些变故做上了JavaWeb开发: 前几天,发现了一些小问题.我在写后台管理页面时,需要上传一张图片.于是我就用很普通的Fo ...
- 利用ajax提交form表单数据
利用thymeleaf引擎创建的html中,使用了adminLTE模板,ajax提交form表单数据,本以为很容易实现,却遇到了很多问题,这里进行总结. 1.get方式提交 通过serialize() ...
- ajax提交form表单后台@RequestBody接收json字符串
好久没搞ajax提交form表单了. 在修改过程中遇到报错: 1.Content type 'application/x-www-form-urlencoded;charset=UTF-8' not ...
- ajax提交form表单
ajax和form表单有很多有趣的互动,ajax提交form表单就是其中一种,这种方法主要是用来提交带图数据的. html页面,我把图片单独放到form表单内,其他数据放到form外即可 <fo ...
- ajax提交form表单到数据库(无刷新)
在静态页面提交表单到数据库很简单就是单纯的 <form action="test.php" method="post"> </form> ...
- form表单提交以及用Jquery实现ajax提交form表单
在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮(<input type='submit'>)就可以进行数据的提交,每一个input标签都 ...
最新文章
- php $this self,php中self与$this的区别
- 2018年4月22日笔记
- hibernate常见错误及解决方法总结
- foxmail邮箱怎么导入邮件_163企业邮箱登录后怎么导入联系人?
- [css] 你有用过clip-path吗?说说你对它的理解和它都有哪些运用场景?
- 计算机课程可在平板上做吗,老师做直播,孩子上网课,掌控线上学习就靠这个平板电脑了...
- 2006 飞行员配对(二分图最大匹配)
- Linux的最大文件限制数ulimit
- SQL中truncate 、delete与drop区别 (Rollback Segment)
- 机器学习实战 KNN实战
- Java高级编程9-姜国海 网络应用编程
- poj - 2586 - Y2K Accounting Bug
- (PTA)数据结构(作业)11、树和图
- knex mysql 操作_mysql – 使用knex.js的我的Sql Alter表
- easyrecovery2023最新版本电脑数据恢复软件特点介绍
- 【数据结构-ZZU】01. 绪论
- SCI数据库使用手册(无图版)
- 题解报告:hdu 1846 Brave Game(巴什博弈)
- 兵士不克不及怂就是干!美服龙战上传说--新浪炉石传说专区
- 译|深入理解Metaspace