jQuery使用ajaxSubmit()提交表单示例==引入jquery.form.js插件(专门提交表单)

================遇到实例:

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>修改商品信息</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.form.js"></script>
<script type="text/javascript">
	//原始上传图片:提交表单进行上传,【图片流对象在包含在表单对象中】
	//异步上传: 提交表单对象(和原始上传图片一样,必须提交表单),才能【把图片流对象传入request请求对象中】.
	//ajax异步上传函数
	function submitImgSize1Upload() {
		var option = {
				type:'POST',
				url:'${pageContext.request.contextPath }/uploadPic.do',
				dataType:'text',
				success:function(data){
					//把data数据转换成json对象格式
					var obj = $.parseJSON(data);
					//回调函数
					//图片回显===修改img的src值
					$("#imgSize1ImgSrc").attr("src",obj.fullPath);
					//数据保存图片地址
					$("#imgSize1").val(obj.fullPath);
				}
				
			};
		
		//提交表单
		$("#itemForm").ajaxSubmit(option);
	}
	
	
</script>
</head>
<body>
	<form id="itemForm" action="" method="post">
		<input type="hidden" name="id" value="${item.id }" /> 修改商品信息:
		<table width="100%" border=1>
			<tr>
				<td>商品名称</td>
				<td><input type="text" name="name" value="${item.name }" /></td>
			</tr>
			<tr>
				<td>商品价格</td>
				<td><input type="text" name="price" value="${item.price }" /></td>
			</tr>
			<tr>
				<td>商品生产日期</td>
				<td><input type="text" name="createtime"
					value="<fmt:formatDate value="${item.createtime}" pattern="yyyy-MM-dd HH:mm:ss"/>" /></td>
			</tr>
			<tr>
				<td>商品图片</td>
				<td>
					<p>
						<label></label>
						<!-- 图片回显标签 -->
						<img id='imgSize1ImgSrc' src='' height="100" width="100" />
						<!-- 上传图片 -->
						<input type='file' id='imgSize1File' name='imgSize1File'
							class="file" οnchange='submitImgSize1Upload()' /><span
							class="pos" id="imgSize1FileSpan">请上传图片的大小不超过3MB</span>
						<!-- ajax会写图片地址,然后把图片地址保存数据库 (提交表单) -->
						<input type='hidden' id='imgSize1' name='pic' value='' reg="^.+$"
							tip="亲!您忘记上传图片了。" />
					</p>
				</td>
			</tr>
			<tr>
				<td>商品简介</td>
				<td><textarea rows="3" cols="30" name="detail">${item.detail }</textarea>
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center"><input type="submit" value="提交" />
				</td>
			</tr>
		</table>

	</form>
</body>

</html>



=========下面转载:


ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法,所以使用此方法需要先引入这个插件。如下所示:

[plain]  view plain  copy
  1. <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>  
  2. <script src="http://malsup.github.io/jquery.form.js"></script>  

由于我的是上传文件提交form表单,请求方法放在action里面,我从后台返回的是一个String。

[html]  view plain  copy
  1. <div class="form layer-form" id="importForm">  
  2.     <div class="title">导入</div>  
  3.     <form action="/wfdl/uploadWfdl" method="post" enctype="multipart/form-data">  
  4.         <div class="item">  
  5.             <div class="txt">选择文件</div>  
  6.             <div class="cnt">  
  7.                 <input type="file" class="ipt" name="filename" data-rule="required" />  
  8.             </div>  
  9.         </div>  
  10.         <div class="buttons" style="padding:20px 0;">  
  11.             <a href="javascript:void(0)" onclick="downloadTemplate()" class="ubtn ubtn-gray" target="_blank">下载模板</a>  
  12.             <button type="button" class="ubtn ubtn-blue layer-close">关闭</button>  
  13.             <button type="submit" class="ubtn ubtn-blue submit" style="width:120px;">确定</button>  
  14.         </div>  
  15.     </form>  
  16. </div>  

js代码可以直接写,data就是我从后台返回的字符串,返回后直接提示:

[javascript]  view plain  copy
  1. $importForm.validator({  
  2.      valid: function(form) {  
  3.          $(form).ajaxSubmit({  
  4.              success: function(data) {  
  5.                  layer.alert(data);  
  6.              }  
  7.          });  
  8.      }  
  9.  });  

这样就解决了,我form表单提交时不知道怎么回调的问题,这种方式最起码以后提交了命令,可以返回消息告知请求失败还是成功,不会又搞其他一堆的样式,搞提示框什么的。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值