問題3:使用webform,每次提交後臺界面都要刷新,能不能讓我們與後臺 交互的時候像ajax一樣,界面不用刷新,同時還能返回參數並且繼續在前臺執行?? 相信很多人和我一樣,這也是很多人開發放棄webform最重要的原因吧!!這也是很多人覺得webform不好的原因吧!!!其實mvc提交form表單 ...
問題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 的效果一樣!!!!!
沒辦法,那執行放到下期去解決!!!!!!!