jquery.form.js实现将form提交转为ajax方式提交的方法


Posted in Javascript onApril 07, 2015

本文实例讲述了jquery.form.js实现将form提交转为ajax方式提交的方法。分享给大家供大家参考。具体分析如下:

这个框架集合form提交、验证、上传的功能。
这个框架必须和jquery完整版结合,否则使用min则无效。
原理:利用js进行对form进行组装成ajax的url和data,原理还是用ajax来提交,其实这完全可以自己写,但是有这个框架可能会更简单。

一、最简单例子:

第一步:引用js

<!--这里的min是自己用js压缩工具对完整版进行的压缩
并不是真正的min,所以好使-->
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>

第二步:页面写form

<form id="showDataForm" 
action="/024pm/f_shopUser.do?method=login" method="post">
 <input type="text" value="" name="name" maxlength="2"/>
 <input type="password" value="" name="password" maxlength="2"/>
 <input type="submit" value="提交"/>
</form>
<div id="output1" 
style="width:1000px;height:200px;background-color:#eee;">
</div>

第三步:写js调用jquery.form.js,对form表单进行ajax提交

$(document).ready(function() {
 var options = {
  target: '#output1',
  // 从服务传过来的数据显示在这个div内部
 也就是ajax局部刷新
  beforeSubmit: showRequest,
 // ajax提交之前的处理
  success:  showResponse
 // 处理之后的处理
 };
 $('#showDataForm').submit(function() {
  $(this).ajaxSubmit(options);
  return false; 
  //非常重要,如果是false,则表明是不跳转
  //在本页上处理,也就是ajax,如果是非false,则传统的form跳转。
 });
});
function showResponse(responseText, statusText, xhr, $form) {
 alert(xhr.responseText+"=="+$form.attr("method")+'status: ' + 
 statusText + '\n\nresponseText: \n' + responseText);
//xhr:说明你可以用ajax来自己再次发出请求
//$form:是那个form对象,是一个jquery对象
//statusText:状态,成功则为success
//responseText,服务器返回的是字符串(当然包括html,不包括json)
}
function showRequest(formData, jqForm, options) {
 //formData是数组,就是各个input的键值map数组
 //通过这个方法来进行处理出来拼凑出来字符串。
 //formData:拼凑出来的form字符串,比如name=hera&password,
 //其实就是各个表单中的input的键值对,
 //如果加上method=XXXX,那也就是相当于ajax内的data。
 var queryString = $.param(formData);
 alert(queryString+"======"+formData.length);
 for (var i=0; i < formData.length; i++) {
 alert(formData[i].value+"==============="+formData[i].name);
 }
 //jqForm,jquery form对象
 var formElement = jqForm[0];
 alert($(formElement).attr("method"));
 alert($(jqForm[0].name).attr("maxlength"));
 //非常重要,返回true则说明在提交ajax之前你验证
 //成功,则提交ajax form
 //如果验证不成功,则返回非true,不提交
 return true;
}

二、options对象内的值有哪些?

主要的有那么几个常用的属性:

var options = {
 target: '#output1', 
 data:{param1:"我自己的第一个额外的参数"},
//这个参数是指通过ajax来给服务器提交除了form内部input的参数
//在后台中使用String param1=req.getParameter("param1");获取。
 // dataType: null,
 dataType:'json',
//这个参数值的是服务器返回的数据类型,默认的是null
//也就是服务器可以默认返回字符串,然后将这些字符串放在target内部
//当然还有json、xml,其中最常用的便是null和json
//对于json的使用,我们会稍后讲解到
 beforeSubmit: showRequest,
 success:  successRes,
 type:'POST'
 //提交方式,默认是自己在form标签上指定的method
 //如果没有指定,则使用get。
 url:''
 //重新提交的url,即url可以在form中配置
 //也可以在这里配置。
};

三、如何解析服务器传递过来的json数据

我们知道,使用jquery提供的ajax方法,如果服务器传递回来的是json数据,是可以转换为js的json对象,然后可以通过json.xxx来获取相应的值。那么这个框架呢?
1)首先options参数中指定dataType:'json'
2)通过框架进行提交
3)服务器接收
4)服务器返回json
5)页面js接收json
关键是第五步,如何js接收json,是可以通过success: 指定的方法内部进行如下操作:

var options = {
 target: '#output1', 
 dataType:'json',
 beforeSubmit: showRequest,
 success:  successRes
//注意了,successRes方法看起来并没有有参数
//但是为何下面的方法就能有参数了呢,是可以这么传递的。
function successRes(jsonData){
 alert(jsonData.param1);
}

四、如何通过这个框架进行简单的验证呢?

说到验证,那肯定是在beforeSubmit的方法内部进行验证的,如何验证,因为这个方法已经将jqform对象,还有formData都传给你了,你可以拿这两个参数进行获取相应的input,然后进行自己的判定,如果判定成功,则提交。

function showRequest(formData, jqForm, options) {
 for (var i=0; i < formData.length; i++) {
 alert(formData[i].value+"========"+formData[i].name);
 if (!formData[i].value) {
  //验证是否填写完整
  alert('input有没有填写的选项');
  //如果验证不通过,则返回false
  return false;
 }
 }
 var formElement = jqForm[0];
 alert($(jqForm[0].name).attr("maxlength"));
 return true;
}

jquery.form.js文件点击此处本站下载。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript 自动填写表单的实现方法
Apr 09 Javascript
HTML中的setCapture和releaseCapture使用介绍
Mar 21 Javascript
JS的replace方法介绍
Oct 20 Javascript
Js获取下拉框选定项的值和文本的实现代码
Feb 26 Javascript
Javascript控制input输入时间格式的方法
Jan 28 Javascript
jquery mobile移动端幻灯片滑动切换效果
Apr 15 Javascript
微信JS SDK接入的几点注意事项(必看篇)
Jun 23 Javascript
JS实现监控微信小程序的原理
Jun 15 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
vue.js中使用echarts实现数据动态刷新功能
Apr 16 Javascript
Javascript 关于基本类型和引用类型的个人理解
Nov 01 Javascript
node创建Vue项目步骤详解
Mar 06 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 #Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
Apr 07 #Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
Apr 07 #Javascript
JS 作用域与作用域链详解
Apr 07 #Javascript
JavaScript实现在页面间传值的方法
Apr 07 #Javascript
简易的投票系统以及js刷票思路和方法
Apr 07 #Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
Apr 07 #Javascript
You might like
967 个函式
2006/10/09 PHP
php实现二进制和文本相互转换的方法
2015/04/18 PHP
Zend Framework上传文件重命名的实现方法
2016/11/25 PHP
javascript 写类方式之五
2009/07/05 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
document.write的几点使用心得
2014/05/14 Javascript
js实现兼容IE和FF的上下层的移动
2015/05/04 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
JavaScript函数节流概念与用法实例详解
2016/06/20 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
jQuery基于ajax操作json数据简单示例
2017/01/05 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
2018/07/26 Javascript
AngularJS修改model值时,显示内容不变的实例
2018/09/13 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
[02:30]DOTA2放量测试专访海涛:呼吁保护新手玩家
2013/08/26 DOTA
爬山算法简介和Python实现实例
2014/04/26 Python
Python 实现使用dict 创建二维数据、DataFrame
2018/04/13 Python
python numpy 部分排序 寻找最大的前几个数的方法
2018/06/27 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
python基础知识(一)变量与简单数据类型详解
2019/04/17 Python
Python matplotlib画图与中文设置操作实例分析
2019/04/23 Python
Pycharm及python安装详细步骤及PyCharm配置整理(推荐)
2020/07/31 Python
校园安全检查制度
2014/02/03 职场文书
采购类个人求职的自我评价
2014/02/18 职场文书
毕业晚会主持词
2014/03/24 职场文书
校园广播稿范文
2015/08/19 职场文书
2019终止劳动合同协议书最新范本!
2019/07/09 职场文书
JS实现简单九宫格抽奖
2022/06/28 Javascript