`

jquery 对form提交进行封装

 
阅读更多

我给您一个解决方案吧,网上的例子大多可以找到一些用jquery库的$.ajax方法来实现ajax提交,但您所说的,页面会有很多数据,如果使用未封装过的ajax代码会显得很长,在之前的开发中我发现一个jquery插件jquery.form.js,它的主要功能是将表单数据封装,可以用少量代码就能实现整个表单数据ajax提交
正面我们开始吧(当然,如果你有用过jquery这个JS库就很方便了,不懂也不要紧,跟着我做就行)
首先,下载两个js文件,
jquery库文件:https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
可以直接下载下来或者直接<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>,
jqueryForm: https://raw.github.com/malsup/form/master/jquery.form.js
将这些库都包含到您的页面中,同时加入
<script type="text/javascript">

$(function(){
//接下来的JS代码都将会在这里编写:>
});

</script>

比如现在有一个表单<form id="demo" action="proccess.jsp">
<input type="text" name="username" />
<span id="msg"></span><!--这里显示服务器处理表单提交后结果-->
</from>
开始在上面的JS代码段中写代码
$('#myForm1').ajaxForm({
      target:'#msg',//使提交后服务器结果显示容器
      success:function(responseText, statusText, xhr, $form){
         //这里可以自定服务器返回消息处理,如果在这里处理了,target及msg就不必设置了,看您有没有这方面的需求
     }
});//这里调用jquery库方法,返回id为demo的jquery对象(经过jquery封装后的DOM对象),并调用jqueryForm的ajaxForm方法
至此,已经完成了,是不是很简单,你先试下,觉得满意就给个分,第一次来知道回答问题,哈哈
回来的时候发现已经有人比我先提交了,杯具呀..看来不能写得太慢了

例子:

<form name="form1" id="form1" method="post" action="">
  <textarea name="text1" id="text1"></textarea>
  <input type="button" value="submit" onclick="doSave()"/>
</form>

<script type="text/javascript">
function doSave(){
var text=$("#text1").val();
if(null != text && "" == text){
$.messager.alert('提示','请输入内容!','error');
return;
}
var options = {
        success:   callback,
        type:      'post',      
        dataType:  'json',      
        clearForm: true       
    };
$('#form1').ajaxSubmit(options);
}
function callback(data){
这里面写你自己的回调函数。。。
}
</script>

分享到:
评论

相关推荐

    Ajax表单提交 js文件( jquery.form.js)封装好的

    Ajax表单提交,用 jquery.form.js SDK 封装好的ajaxSubmit

    jquery文件上传js:jquery.form.js

    jquery上传文件和参数封装的js:jquery.form.js,可用于单文件、上文件上传以及携带参数

    JQuery.form文件上传及管理

    使用JQuery.js和JQuery.Form.js封装的文件上传及管理平台。

    jquery自动将form表单封装成json的具体实现

    主要介绍了jquery自动将form表单封装成json的具体实现,需要的朋友可以参考下

    jquery.form.js

    资源官网 http://plugins.jquery.com/form/ jq的表单提交插件,最大好处就是封装了文件上传的功能,可以异步上传文件

    使用jQuery.form.js/springmvc框架实现文件上传功能

    使用的技术有jquery.form.js框架, 以及springmvc框架。主要实现异步文件上传的同时封装对象,以及一些注意事项。 功能本身是很简单的,但是涉及到一些传递参数类型的问题。例如:jquery的ajax方法与jquery.form.js...

    jquery插件(form表单验证)

    jquery 插件 表单验证 用于验证 封装成了jquery插件。调用简单,方便使用。

    jquery.form.js框架实现文件上传功能案例解析(springmvc)

    上一篇 Bootstrap自定义文件上传下载样式(//...例如:jquery的ajax方法与jquery.form.js中的ajaxSubmit方法的参数,具体细节将在下一篇博客中分享。 重点: html表格三要素: action=”fileUp

    jQuery实现的form转json经典示例

    主要介绍了jQuery实现的form转json功能,结合完整实例形式分析了jQuery将form表单数据封装成json传输的具体步骤与相关操作技巧,需要的朋友可以参考下

    jQuery实现获取form表单内容及绑定数据到form表单操作分析

    主要介绍了jQuery实现获取form表单内容及绑定数据到form表单操作,结合jQuery封装插件操作分析了jQuery针对form表单的serializeJson数据获取及setForm数据绑定相关操作技巧,需要的朋友可以参考下

    jquery插件使用方法大全

    可以用来添加不向外部公开的方法,或者对jQuery的某些方法进行重新定义以提供新功能,或者提供更好的封装、避免名称空间冲突。当然,也可以用来开发插件,但Resig强烈建议在开发插件之前,先考虑jQuery UI widget...

    jQuery权威指南-源代码

    jQuery以其轻巧的体积、强大的选择器、出色的DOM封装、丰富的插件支持使得广大的Web前端开发者得心应手,极大地提高了他们的开发效率;此外,jQuery中完善的Ajax功能、行为与结构层的分离、可靠的事件处理机制也同样...

    JQuery基于FormData异步提交数据文件

    web中数据提交事件是常常发生的,但是大多数情况下我们不希望使用html中的form表单提交,因为form表单提交会中断当前浏览器的操作并且会调到另一个地址(即使这个地址是当前页面),并且会重复加载一些html浪费带宽...

    jquery 表单验证(包括所有的验证)

    班验证是采用jquery中的form表单验证 在这个验证中封装在一个js类里面 调用简单 大部分验证全 对做验证佷有帮助 大家赶紧下吧

    jQuery完全实例.rar

    elements (Element, Array) : 用于封装成jQuery对象的DOM元素 示例 设置页面背景色。 jQuery 代码: $(document.body).css( "background", "black" ); -------------------------------------------------------...

    jquery的ajax请求全面了解

    .ajaxStop()——请求结束时.ajaxSuccess()——请求成功时.load()——从服务端加载数据并将返回的HTML替换到选择的元素中jQuery.post()——使用HTTP POST请求加载服务端数据.serialize()——将form元素集编码成一个...

    jquery ajax请求实例深入解析

    .ajaxStop()——请求结束时.ajaxSuccess()——请求成功时.load()——从服务端加载数据并将返回的HTML替换到选择的元素中jQuery.post()——使用HTTP POST请求加载服务端数据.serialize()——将form元素集编码成一个...

    jquery数字加减表单可支持编辑或者不允许编辑特效代码

    jquery数字加减表单代码可支持编辑或者不允许编辑是一款基于jQuery基础封装的轻量级插件,使用时只需导入num-alignment.js即可。

    RXUI_Demo(JQueryUI)

    自己写的一个JQueryUI,给大家分享一下,封装了一些常用Ajax功能,报表、Excel编辑下载、table展示、repeater(与.net的repeater控件使用方式类似数据源是json)、form表单提交加载还原,combobox的示例我忘记写上去...

Global site tag (gtag.js) - Google Analytics