================遇到实例:
<%@ 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里面的方法,所以使用此方法需要先引入这个插件。如下所示:
由于我的是上传文件提交form表单,请求方法放在action里面,我从后台返回的是一个String。
js代码可以直接写,data就是我从后台返回的字符串,返回后直接提示:
这样就解决了,我form表单提交时不知道怎么回调的问题,这种方式最起码以后提交了命令,可以返回消息告知请求失败还是成功,不会又搞其他一堆的样式,搞提示框什么的。