使用Ajax提交表单的方法

做项目做到一半需求变了，原本页面可以直接跳转的，现在要弹出窗口使用Ajax的方式提交数据，收到服务器返回后关闭弹窗。

但是弹窗的内容太多，重新在JS中封装数据会很麻烦，我想如果页面跳转时Strut2的后台能直接收到前台的数据，那有没有方法使用Ajax方式提交现有的表单呢？

百度一下Jquery果然有插件能实现Ajax提交表单！jquery.form.js的ajaxsubmit()...

需要引入的JS文件

<script type="text/javascript" src="jquery/jquery.js"></script> 
<script type="text/javascript" src="jquery/jquery.form.js"></script>  

var win = art.dialog.open.origin;
$("#mainForm").ajaxSubmit({  
	type:"post",//提交方式  
	dataType:"json",//数据类型  
	url:"paperAction!addPaper.so",//请求url  
	success:function(data){ //提交成功的回调函数  
		var url = data.downloadUrl;
		var fileId = data.fileId;
		var name = data.examName;
		win.$("#papers_file_name").val(name+".paper");
		win.$("#papers_file_url").val(url);
		win.$("#papers_file_id").val(fileId);
		window.parent.close("editPaper");
		closeWaiting();  
	},error:function(data){
		closeWaiting();  
	}
}); 

写这段代码遇到了两个问题，一是win这个对象必须在ajaxSubmit方法的外面声明，不然会有问题，是我的业务需要这个对象，ajaxSubmit方法与这个对象木有关系哦。

二是后台返回必须是json类型的数据，不然程序不会到success里面而是进入error里面（alert（status），你会发现是一个parsererror的错误类型），后台代码如下：

PrintWriter out = response.getWriter();
String jsonString = "{"downloadUrl":""+downloadUrl+"","fileId":""+fileId+"","examName":""+offlinePaper.getExamName()+""}";
out.print(jsonString);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!