DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> ajax如何實現頁面局部跳轉與結果返回
ajax如何實現頁面局部跳轉與結果返回
編輯:關於JavaScript     

通過代碼示例分析給大家介紹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();
  }
 }
 } 
}

以上內容就是本文介紹ajax如何實現頁面局部跳轉與結果返回的全部內容,希望大家喜歡。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved