打造顛覆你想象中的高性能,輕量級的webform框架---無刷新提交后台(第四天)


 

問題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 的效果一樣!!!!!

    沒辦法,那執行放到下期去解決!!!!!!!

   

     

 

         

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM