Ajax提交form表单

高校平台项目中采用的UI框架为DWZ框架，这个框架有一个很灵活又很让人头疼的问题，那就是它的div碎片。 所谓的div碎片指的是每一个jsp页面不再是一个单纯的jsp了，此时的jsp只不过是一个div，通过dwz框架本身的ajax技术，可以将任何一个jsp作为一个div嵌入到任意另外一个jsp中，说白了也就是将多个jsp页面的放到同一个页面显示。这样做有一个很大的好处就是它避免了刷新问题，通过其自身所提供的ajax功能，我们可以轻松的做到将查找出的数据显示在原来界面而不进行整体页面的刷新。但是这样存在另外一个问题，那就是把数据提交到action的时候，由于在同一个页面上的div的数量是动态的，所以如果我们需要将不同div中的内容同时提交到同一个action的时候就会出现问题（原因就在于数据分散在不同的div的不同的form中）。对于这个问题我采取的措施是首先通过js函数将第一个div(确切的说是这个div中的form中的某个元素的值)需要提交的数据放入到第二个div的某个隐含域中，这样提交的时候只提交第二个form就可以了。但是这只是解决了第一步提交数据的完整性的问题，对于第二步提交之后的返回界面刷新问题还没有解决，那么如何解决第二步的返回刷新问题呢？我采取的措施是通过JQuery Ajax异步提交form，通过将dwz ajax技术与我们自己写的JQuery Ajax技术相结合就解决了从显示数据到提交数据，再到数据返回无刷新的整个流程。下面简单列出所使用的JQuery Ajax实现提交表单的代码，至于js给隐含域赋值相信是一件很简单的事情，在这里就不在赘述了：

<script type="text/javascript">

	//记录考试ID
	var examId
	
	//取得考试ID
	 function getExamId(){
		
		var obj =document.getElementById("searchclassbyteacher_combox_exam");
		var index = obj.selectedIndex; // 读取所选中option的索引值
		var text = obj.options[index].text; // 读取所选中option的文本
		var exam_id = obj.options[index].value; // 读取所选中option的value
		examId =  exam_id;
	}  
	
	//保持ExamId
	function setExamId(){
		var obj =document.getElementById("ksxt_exam_id");
		obj.value=examId
	}
	
	//ajax提交表单
	$("#btn_addExamStudent").click(function(){
		getExamId()
		setExamId()
		
        $.ajax({
            type: "post",
            url: "/gxpt_web_ks_examstudent/examStudent/addRealExamStudentsAction.action",     
            data: $("#studentInfo_form").serialize(),    
            success: function(data) {
                alert("添加考生成功！");
            },
            error: function(data) {
                alert(data);
            }
        })
    });

	
</script>

 

在上面的js代码中，需要注意的是，在引入 jquery-1.7.2.js文件之后，在使用ajax的时候需要将form进行序列化，然后将序列化后的form作为参数提交到后台的action。然后接收ajax执行结果，根据是否成功执行给出具体的提示。ajax异步操作可以说是实现页面无刷新（或局部刷新）非常好用的技术，但无论是什么样的技术，他的应用都应该是建立在灵活之上。在很多情况下简单技术的灵活应用往往要比使用一种复杂技术更加实用。