`

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表单验证插件jquery.form.js.pdf

    从技术细节上来看,`$.post`, `$.get`, `$.ajax`是jQuery中用于发起AJAX请求的函数,而jquery.form.js插件则提供了一种封装方式,使得表单的AJAX提交和数据处理更加直观和简单。 最后,文档中提到的`fieldSerialize...

    jquery.form.js(最新的)

    通过以上步骤,我们可以利用jQuery.form.js与Struts 1.x实现页面多个表单的AJAX提交,同时保持页面的其他部分不变,从而提升Web应用的交互性和用户体验。在实际项目中,可能还需要根据具体需求进行更复杂的定制和...

    .net+ajax+jquery.form实现简单的图片批量上传源码

    本示例代码着重展示了如何使用`.NET`后端处理、`AJAX`进行异步通信以及`jQuery.form`插件来实现这一功能。下面我们将详细探讨这些技术点。 首先,`.NET`是微软公司推出的一种面向对象的编程框架,它提供了丰富的库...

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

    在本文中,我们将深入探讨如何使用jQuery将HTML表单(form)数据自动封装成JSON对象,以便于在AJAX请求中传递。这个过程对于前端与后端的数据交互至关重要,特别是当需要发送复杂表单数据时。 首先,让我们看下给定...

    jquery.form.js

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

    IE中jquery.form中ajax提交没反应解决方法分享

    在这篇文章中,讨论了在使用jquery.form插件进行AJAX提交时,IE浏览器对某些响应头信息的处理可能与其他浏览器(如Firefox和Opera)不同,从而导致提交没有反应的问题。主要知识点包括: 1. jquery.form插件:这是...

    Ajax使用jQuery提交表单

    jQuery通过其内置的$.ajax()函数提供了对Ajax的封装。这个函数允许开发者发送异步HTTP请求,获取服务器端的数据,并在不刷新整个页面的情况下更新DOM元素。$.ajax()接受多个参数,如URL、类型(GET或POST)、数据、...

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

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

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

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

    jquery封装函数,前后端分离框架

    总结,使用jQuery封装函数可以有效地构建前后端分离的框架,通过模块化处理静态页面,使用Ajax进行无刷新的数据交互。与后端语言(如Java)配合,通过RESTful API实现数据交换。在实际开发中,还需要注意性能优化和...

    原生js仿jquery实现对Ajax的封装

    本篇文章将探讨如何使用原生JavaScript来模仿jQuery实现Ajax的封装,以便更好地理解其工作原理。 首先,我们关注的是函数封装的灵活性,特别是能够处理无限数量的参数。在jQuery中,Ajax请求通常通过一个包含各种...

    jquery效果小例子

    本篇将通过一个"jquery form提交"的例子,深入探讨jQuery在表单提交中的应用,为初学者提供一个实用的学习起点。 1. **jQuery简介** jQuery是由John Resig在2006年创建的一个轻量级的JavaScript库,它的核心理念是...

    jQuery ajaxForm()的应用

    首先,ajaxForm()的作用是对即将使用AJAX方式提交的表单进行预处理。它可以将所有需要的事件监听器添加到表单中,而无需改变原有的表单结构,实现无侵入式地升级HTML表单以支持Ajax提交。需要注意的是,ajaxForm()...

    form表单数据封装成json格式并提交给服务器的实现方法

    我们可以使用`FormData`对象来获取表单中的所有数据,然后利用`jQuery`或者原生JavaScript的`querySelectorAll`等方法遍历表单元素,将每个字段的值与对应的键组合成键值对,最后用`JSON.stringify()`函数将对象转换...

    Jquery中ajax提交表单几种方法(get、post两种方法)

    在jQuery中,Ajax提交表单是...`$.get()`和`$.post()`是对这两种方法的简单封装,`$.ajax()`则提供了更多自定义选项。在处理表单数据时,`$.serialize()`是一个便捷的工具,可以方便地将表单数据转换为适合发送的格式。

    JQuery框架软件包下载

    Form插件是jQuery生态系统中的一个重要组成部分,它扩展了jQuery的基本功能,特别针对表单处理进行了优化。这个插件允许开发者轻松地实现Ajax提交表单,避免了页面刷新,提供了更好的用户体验。Ajax(Asynchronous ...

    springmvc利用jquery.form插件异步上传文件示例

    在JavaScript中,我们将使用jquery.form插件提供的$.ajaxForm方法或$.ajaxUpload方法来异步提交表单。这两个方法能够处理表单的序列化、文件传输以及响应处理等。我们可以在方法中指定一个回调函数,用来在文件上传...

    jquery ajax异步提交表单数据的方法

    在Web开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理以及与服务器的交互,包括异步提交表单数据。本篇文章将详细解释如何使用jQuery的`ajax`方法来实现异步提交表单,同时涵盖不包含文件和...

Global site tag (gtag.js) - Google Analytics