jQuery使用ajaxSubmit()提交表单

一 。需要jquery.form.js插件中的方法  ，引入这个插件

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://malsup.github.io/jquery.form.js"></script>

二  form表单

<form id="batchimport" action =''>
    标题：<input type="text" name="title" /><br />
    内容：<input type="file" id = 'file' name="title" /><br />
    <button onclick="submit()">提交</button>
</form>

<div >
<table style="width:705px;text-align: left;margin-top: 5px;" class="table"  id="result" >
</table>
</div>

三 区别

通常情况通过按钮提交表单 ，页面会跳转到action指向的页面 ，如果不想要页面跳转 保持在当前页面的话

就可以用ajaxSubmit()

四 function submit(){
var file = $("#file").val();
if(file == null || file ==''){
parent.$.showShortMessage({msg:"请先选择文件,再点击确认上传",animate:false,left:"45%"});
return false;
}
var $form = $("#batchimport");
$form.ajaxSubmit({
dataType : 'text',
success : function(msg) {
var json = JSON.parse(msg);
var result = $("#result");
result.empty();
if(json.status == "1"){
result.append("<tr><th style='color:green;'>"+json.message+"</th></tr>");
}else if(json.status == "0"){
result.append("<tr><th style='color:red;font-size:13px;'>"+json.message+"</th></tr>");
}
var errors = json.errors;
if(errors){
$.each(errors,function(i,error){
var tr = "<tr class='error'>";
tr +="<th>"+error+"</th>";
tr+="</tr>";
result.append(tr); 
});
}
return true;
}
});
}