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

来源：互联网发布：交通组织优化设计编辑：程序博客网时间：2024/05/21 13:59

================遇到实例：

<%@ 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" onchange='submitImgSize1Upload()' /><spanclass="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
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>  
<script src="http://malsup.github.io/jquery.form.js"></script>  

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

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

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

[javascript] view plain copy
$importForm.validator({  
     valid: function(form) {  
         $(form).ajaxSubmit({  
             success: function(data) {  
                 layer.alert(data);  
             }  
         });  
     }  
 });  

这样就解决了，我form表单提交时不知道怎么回调的问题，这种方式最起码以后提交了命令，可以返回消息告知请求失败还是成功，不会又搞其他一堆的样式，搞提示框什么的。

阅读全文

0 0