我给您一个解决方案吧,网上的例子大多可以找到一些用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表单提交,用 jquery.form.js SDK 封装好的ajaxSubmit
jquery上传文件和参数封装的js:jquery.form.js,可用于单文件、上文件上传以及携带参数
使用JQuery.js和JQuery.Form.js封装的文件上传及管理平台。
主要介绍了jquery自动将form表单封装成json的具体实现,需要的朋友可以参考下
资源官网 http://plugins.jquery.com/form/ jq的表单提交插件,最大好处就是封装了文件上传的功能,可以异步上传文件
使用的技术有jquery.form.js框架, 以及springmvc框架。主要实现异步文件上传的同时封装对象,以及一些注意事项。 功能本身是很简单的,但是涉及到一些传递参数类型的问题。例如:jquery的ajax方法与jquery.form.js...
jquery 插件 表单验证 用于验证 封装成了jquery插件。调用简单,方便使用。
上一篇 Bootstrap自定义文件上传下载样式(//...例如:jquery的ajax方法与jquery.form.js中的ajaxSubmit方法的参数,具体细节将在下一篇博客中分享。 重点: html表格三要素: action=”fileUp
主要介绍了jQuery实现的form转json功能,结合完整实例形式分析了jQuery将form表单数据封装成json传输的具体步骤与相关操作技巧,需要的朋友可以参考下
主要介绍了jQuery实现获取form表单内容及绑定数据到form表单操作,结合jQuery封装插件操作分析了jQuery针对form表单的serializeJson数据获取及setForm数据绑定相关操作技巧,需要的朋友可以参考下
可以用来添加不向外部公开的方法,或者对jQuery的某些方法进行重新定义以提供新功能,或者提供更好的封装、避免名称空间冲突。当然,也可以用来开发插件,但Resig强烈建议在开发插件之前,先考虑jQuery UI widget...
jQuery以其轻巧的体积、强大的选择器、出色的DOM封装、丰富的插件支持使得广大的Web前端开发者得心应手,极大地提高了他们的开发效率;此外,jQuery中完善的Ajax功能、行为与结构层的分离、可靠的事件处理机制也同样...
web中数据提交事件是常常发生的,但是大多数情况下我们不希望使用html中的form表单提交,因为form表单提交会中断当前浏览器的操作并且会调到另一个地址(即使这个地址是当前页面),并且会重复加载一些html浪费带宽...
班验证是采用jquery中的form表单验证 在这个验证中封装在一个js类里面 调用简单 大部分验证全 对做验证佷有帮助 大家赶紧下吧
elements (Element, Array) : 用于封装成jQuery对象的DOM元素 示例 设置页面背景色。 jQuery 代码: $(document.body).css( "background", "black" ); -------------------------------------------------------...
.ajaxStop()——请求结束时.ajaxSuccess()——请求成功时.load()——从服务端加载数据并将返回的HTML替换到选择的元素中jQuery.post()——使用HTTP POST请求加载服务端数据.serialize()——将form元素集编码成一个...
.ajaxStop()——请求结束时.ajaxSuccess()——请求成功时.load()——从服务端加载数据并将返回的HTML替换到选择的元素中jQuery.post()——使用HTTP POST请求加载服务端数据.serialize()——将form元素集编码成一个...
jquery数字加减表单代码可支持编辑或者不允许编辑是一款基于jQuery基础封装的轻量级插件,使用时只需导入num-alignment.js即可。
自己写的一个JQueryUI,给大家分享一下,封装了一些常用Ajax功能,报表、Excel编辑下载、table展示、repeater(与.net的repeater控件使用方式类似数据源是json)、form表单提交加载还原,combobox的示例我忘记写上去...