打造顛覆你想象中的高效能，輕量級的webform架構---無重新整理提交後台（第四天）

標籤：put   完成   不能   out   java   方法   parent   修改   參數傳遞   

 

問題3：使用webform,每次提交後台介面都要重新整理，能不能讓我們與後台 互動的時候像ajax一樣，介面不用重新整理，同時還能返回參數並且繼續在前台執行？？

    相信很多人和我一樣，這也是很多人開發放棄webform最重要的原因吧！！這也是很多人覺得webform不好的原因吧！！！其實mvc提交form表單  也會重新整理，但是 視圖中沒有像webfrom一樣的後台，所以必須使用 ajax 的方法提交後台，所以沒有重新整理！

     其實這個問題的解決方案早在很多年前就已經解決了，只是知道的人不多，所以大家的印象中一直認為webform 提交後台總是要介面重新整理。這裡呢，我提供的2個種解決方案，也是我們工作和學習中常見的2個解決方案。

     第一種方法是使用 jquery.form.js   的外掛程式，我們只需要將$("#form1").sumit() 改為 $("#form1").ajaxSubmit();

     例如： 

function ajaxGohoutai(fangfa,canshu,aftergo) {   .//前台傳入參數和方法名字，後台自動綁定執行方法
$("#hid_fangfa").val(fangfa);
$("#hid_canshu").val(canshu);

$("#form1").ajaxSubmit(function (result) {

aftergo(result);

});

}

執行個體：

  <input  type="button"  onclick="ajaxgo()"  value="ajax提交1個參數" />function ajaxgo(){ajaxGohoutai("ajax", "我不是人", function (result) {alert(result);});}

　　使用外掛程式不是我們的初衷，我們希望能夠用我們的代碼去控制我們想要得到的資料以及能夠控制form表單輸出的資料，因為我們還是不知道 form表單能夠無重新整理提交？

     想要弄懂這些個為什麼，我們必須要懂得form表單的屬性，為了讓大家更好的瞭解form 表單 屬性，我們來拿生活中常見 買菜的例子為例子。

    表單提交其實就是一個買菜的過程，買菜錢你要準備錢等一些東西，這個東西就是我們  表單控制項中的 用 name 屬性標記的，  它告訴們這些是我們需要提交的東西。

   買菜我們需要知道是什麼方式去買菜，坐車還是走路，還是其他方法，這個就是form表單的method 屬性 包括post，get，delete，put 屬性。

   買菜我們要知道去哪裡買菜？是去超市買菜，還是去菜市場買菜，還是去其他地方買菜，這屬性就是我們的  action的屬性，系統預設的為 該頁面本身地址的後台，其實我們只需要改變form1表單的地址，同樣我們可以提交到其他頁面。

  買完菜之後我們需要將什麼地方重寫布置一下？這裡的布置就是重新整理的意思，系統預設的 頁面本身的地址 ，系統預設屬性為target=“_self”, 下面為其他屬性。

      

_blank	在新視窗中開啟。
_self	預設。在相同的架構中開啟。
_parent	在父框架組中開啟。
_top	在整個視窗中開啟。
framename	在指定的架構中開啟。

 通過以上的屬性可以看出，導致form 表單提交後介面被重新整理的罪魁禍首是  target=“_self”的屬性，它指向了自己，如果想介面不被重新整理，我們看了一下，好像只能將target指向一個 iframe  的name的值，介面似乎就可以不被重新整理了。下面我們來試一下唄！！！！！在前面代碼的基礎上，我們只需要將提交的代碼修改成這樣。

  第一步 ： 前台加入 一個隱藏的iframe 。

       <iframe name="_NofreshIframe"  id="_NofreshIframe"  style="display:none;"></iframe>

第二步：修改我們以往的方法，在form表單提交將    target指向 為 iframe 的值，我們就可以不重新整理提交了。

   例如：

$("#form1").attr("target", "_NofreshIframe");
$("#form1").submit();

然後我們測試 發現介面確實沒有重新整理了，而且也能夠做到無重新整理提交到後台了。

但是我們發現，這還是不能達到我們想要的效果，什麼效果呢？我們需要在後台執行完成後能馬上執行前台，並且還能夠將參數傳遞給前台，簡單點說就是要做到和ajax 的效果一樣！！！！！

    沒辦法，那執行放到下期去解決！！！！！！！

   

     

 

         

 

 

 

 

打造顛覆你想象中的高效能，輕量級的webform架構---無重新整理提交後台（第四天）