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" οnclick="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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值