ajax如何做出頁面局部跳躍功能

這次帶給大家ajax如何做出頁面局部跳轉功能，ajax做出頁面局部跳轉功能的注意事項有哪些，以下就是實戰案例，一起來看一下。

透過程式碼範例分析介紹ajax實現頁面局部跳躍與結果返回，具體內容如下：

1、帶有結果返回的提交過程

##這裡用一個提交按鈕來示範，HTML程式碼為：

<input type="button" class="btn" value="提报" name="submit4" onClick="tibao();">

點擊提報按鈕後，透過ajax來實作跳到action中處理，JavaScript程式碼為：

function tibao(){
var id='';
var URL = <select:link page="/smokeplan.do?method=Tibao&idset="/>+id;
  $.ajax({url: URL, 
    　　type: 'GET',
    　　success: function(result) {
           alert(result);
        }
  });
}

action處理完成後，將傳回的結果放到result中，在頁面彈出提示訊息；當然這裡的action跳躍是需要配置xml的。 #########後台Java類別處理過程為：######

//提报
    public void Tibao(ActionMapping mapping, ActionForm form,
        HttpServletRequest request, HttpServletResponse response) throws Exception {
      String idset=request.getParameter("idset");
      CallHelper helper = initializeCallHelper("L_SmokeBoxtibaoWLDan", form,request, false);
      helper.setParam("bill_ids",idset);
      helper.setParam("personid",getPersonId(request));
      helper.execute();
      PrintWriter write = response.getWriter();
      write.print(helper.getOutput("message"));
      write.close();
    }

###這裡是透過一個sql語句對資料進行處理，傳回一個message，並將資訊列印到頁面；## ####這裡做的操作的結果是反映到response對應的位置，所以拿到屬於response的流，而不是new一個出來。 ######也就是說我從那裡跳轉過來的，我這個訊息就會回到那裡去。所以在js中就可以用result進行接收這個回傳結果，並且用alert提示。 #########使用AJAX如何實現頁面跳轉############範例程式碼如下：#########專案當中採用了ajaxAnywhere框架來實作ajax ,效果不錯,並且容易實現,但現在問題是即使頁面實現了效果,業務上還需要提交表單,在這種情況下,即使點擊提交後,它仍然會刷新你定義好的zone區域,這個時候,如果單純的提交表單就不夠了,我採取的方案是:###### 利用js這個強大的BS專案開發工具,自###定義一個函數###來解決上述問題:###

function doGuahao()
{
 if(checkdata())
 {
 if(document.form1.result_flag.value=="0")
 {
  return false;
 }
 else
 {
  if(document.form1.checktype.value=="danganhao")
  {
  form1.action = "<%=formAction%>";
  form1.submit();
  }
  if(document.form1.checktype.value=="xingming")
  {
  form1.action = parent.left.url2;
  form1.submit();
  }
  if(document.form1.checktype.value=="shenfenzheng")
  {
  form1.action = "<%=formAction%>";
  form1.submit();
  }
 }
 } 
}

###相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ ######推薦閱讀：#########Ajax實作Loading效果################JS實作ajax呼叫後台定義（附程式碼）### ######

以上是ajax如何做出頁面局部跳躍功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！