jquery ajax 局部刷新

开发过程中会遇到需要局部刷新的时候：

如图所示：上边为单独的标签jsp,其中包含了div  以load的方式加载进去下边的页面。这样就存在了form表单异步提交的问题。针对该问题我的实现方式有两种：

方法一：

用jquery的ajaxForm来提交。

//ajaxForm 实现表单的异步提交
$(document).ready(function () {
	   $("#nextButton2").click(function () {
	       $('#autoCaseForm').ajaxForm({
	           url: "<%=request.getContextPath()%>/autoCase/addClue?flag=file_add",
	           dataType: "text",
	           success:  function(){
	        	     changeTitle("auto_file");
	        	     

$('#nwcontent').load('clueView',{'flag':'file_add'});
	           },
	           callback: function (data) {
	               alert("提交不成功！");
	           },
	           beforeSubmit: function () {
	              alert("before");
	           }
	       }).submit();
	    });
});

方法二：

用jquery的load 方式提交，将form表单中的对象进行序列化来提交。

jsp 中代码：

<strong>  </strong><td style="width:20%" colspan="2"> 
        <label>
           <input type="text" name="caseInfo.unitName"  id="unitName"  value="${auForm.caseInfo.unitName}" class="text_input inp_w85" />
        </label>
   </td>

提交代码：

$("#nextButton3").click(function(){
	//下一步时传参数确定下一个页面
	$('#nwcontent').load('<%=request.getContextPath()%>/autoCase/addClue?flag=file_add',$("#autoCaseForm").serialize());
    changeTitle("auto_file");
});	

两种方法实现的效果是一样的，当然还得配合相应的后台代码处理。

方法一：是在后天保存完成后，在页面上调用load切换了页面。

方法二：是直接后台传过来的就是下一个页面，只需要把上边相应的标签高亮显示即可。

二 当页面布局是左，上，右----只有右边需要刷新时执行如下：

其中success后成功返回的是一个静态页面，可以直接把他至于div 中。可以alert(data);看到页面的代码

function pageGo(pageNo){
	  
	  if(pageNo==-1){
		  pageNo = $('#pageNo').val();
	  }else{
		  $('#pageNo').val(pageNo);
	  }
			 
       $('#selectForm').ajaxForm({
           url: "<%=request.getContextPath()%>/autoCase/caseList",
           type:"post",
           dataType: "text",
           success:  function(data){
      	   $('#mainid').html(data); 
         }
       }).submit();
	
}