我给您一个解决方案吧,网上的例子大多可以找到一些用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
从技术细节上来看,`$.post`, `$.get`, `$.ajax`是jQuery中用于发起AJAX请求的函数,而jquery.form.js插件则提供了一种封装方式,使得表单的AJAX提交和数据处理更加直观和简单。 最后,文档中提到的`fieldSerialize...
通过以上步骤,我们可以利用jQuery.form.js与Struts 1.x实现页面多个表单的AJAX提交,同时保持页面的其他部分不变,从而提升Web应用的交互性和用户体验。在实际项目中,可能还需要根据具体需求进行更复杂的定制和...
本示例代码着重展示了如何使用`.NET`后端处理、`AJAX`进行异步通信以及`jQuery.form`插件来实现这一功能。下面我们将详细探讨这些技术点。 首先,`.NET`是微软公司推出的一种面向对象的编程框架,它提供了丰富的库...
在本文中,我们将深入探讨如何使用jQuery将HTML表单(form)数据自动封装成JSON对象,以便于在AJAX请求中传递。这个过程对于前端与后端的数据交互至关重要,特别是当需要发送复杂表单数据时。 首先,让我们看下给定...
资源官网 http://plugins.jquery.com/form/ jq的表单提交插件,最大好处就是封装了文件上传的功能,可以异步上传文件
在这篇文章中,讨论了在使用jquery.form插件进行AJAX提交时,IE浏览器对某些响应头信息的处理可能与其他浏览器(如Firefox和Opera)不同,从而导致提交没有反应的问题。主要知识点包括: 1. jquery.form插件:这是...
jQuery通过其内置的$.ajax()函数提供了对Ajax的封装。这个函数允许开发者发送异步HTTP请求,获取服务器端的数据,并在不刷新整个页面的情况下更新DOM元素。$.ajax()接受多个参数,如URL、类型(GET或POST)、数据、...
使用的技术有jquery.form.js框架, 以及springmvc框架。主要实现异步文件上传的同时封装对象,以及一些注意事项。 功能本身是很简单的,但是涉及到一些传递参数类型的问题。例如:jquery的ajax方法与jquery.form.js...
主要介绍了jQuery实现获取form表单内容及绑定数据到form表单操作,结合jQuery封装插件操作分析了jQuery针对form表单的serializeJson数据获取及setForm数据绑定相关操作技巧,需要的朋友可以参考下
总结,使用jQuery封装函数可以有效地构建前后端分离的框架,通过模块化处理静态页面,使用Ajax进行无刷新的数据交互。与后端语言(如Java)配合,通过RESTful API实现数据交换。在实际开发中,还需要注意性能优化和...
本篇文章将探讨如何使用原生JavaScript来模仿jQuery实现Ajax的封装,以便更好地理解其工作原理。 首先,我们关注的是函数封装的灵活性,特别是能够处理无限数量的参数。在jQuery中,Ajax请求通常通过一个包含各种...
本篇将通过一个"jquery form提交"的例子,深入探讨jQuery在表单提交中的应用,为初学者提供一个实用的学习起点。 1. **jQuery简介** jQuery是由John Resig在2006年创建的一个轻量级的JavaScript库,它的核心理念是...
首先,ajaxForm()的作用是对即将使用AJAX方式提交的表单进行预处理。它可以将所有需要的事件监听器添加到表单中,而无需改变原有的表单结构,实现无侵入式地升级HTML表单以支持Ajax提交。需要注意的是,ajaxForm()...
我们可以使用`FormData`对象来获取表单中的所有数据,然后利用`jQuery`或者原生JavaScript的`querySelectorAll`等方法遍历表单元素,将每个字段的值与对应的键组合成键值对,最后用`JSON.stringify()`函数将对象转换...
在jQuery中,Ajax提交表单是...`$.get()`和`$.post()`是对这两种方法的简单封装,`$.ajax()`则提供了更多自定义选项。在处理表单数据时,`$.serialize()`是一个便捷的工具,可以方便地将表单数据转换为适合发送的格式。
Form插件是jQuery生态系统中的一个重要组成部分,它扩展了jQuery的基本功能,特别针对表单处理进行了优化。这个插件允许开发者轻松地实现Ajax提交表单,避免了页面刷新,提供了更好的用户体验。Ajax(Asynchronous ...
在JavaScript中,我们将使用jquery.form插件提供的$.ajaxForm方法或$.ajaxUpload方法来异步提交表单。这两个方法能够处理表单的序列化、文件传输以及响应处理等。我们可以在方法中指定一个回调函数,用来在文件上传...
在Web开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理以及与服务器的交互,包括异步提交表单数据。本篇文章将详细解释如何使用jQuery的`ajax`方法来实现异步提交表单,同时涵盖不包含文件和...