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中为元素加上name属性的方法
May 09 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
Jquery遍历checkbox获取选中项value值的方法
Feb 13 Javascript
js由下向上不断上升冒气泡效果实例
May 07 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
IE和Firefox之间在JavaScript语法上的差异
Apr 22 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
May 25 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
Aug 02 Javascript
AngularJS中的JSONP实例解析
Dec 01 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
Sep 18 Javascript
javascript实现日历效果
Jun 17 Javascript
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
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
建立文件交换功能的脚本(一)
2006/10/09 PHP
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
全面解析Bootstrap表单使用方法(表单样式)
2015/11/24 Javascript
Javascript闭包实例详解
2015/11/29 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
JS实现滑动门效果的方法详解
2016/12/19 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
基于Vuejs的搜索匹配功能实现方法
2018/03/03 Javascript
详解JavaScript的BUG和错误
2018/05/07 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
2020/08/08 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
python3中set(集合)的语法总结分享
2017/03/24 Python
PyCharm代码格式调整方法
2018/05/23 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
用python实现刷点击率的示例代码
2019/02/21 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
selenium WebDriverWait类等待机制的实现
2020/03/18 Python
Pycharm及python安装详细步骤及PyCharm配置整理(推荐)
2020/07/31 Python
Pycharm打开已有项目配置python环境的方法
2020/07/03 Python
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
保加利亚服装和鞋类购物网站:Bibloo.bg
2020/11/08 全球购物
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
2014年应届大学生毕业自我鉴定
2014/01/31 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
政治学求职信
2014/06/03 职场文书
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server