2012-03-21 54 views
0

我將要創建一個widget風格的工具,將工作方式如下交互式外部內容:最好的方法包括在頁面(JavaScript中,AJAX和jQuery)

  1. 它可以包含在任何頁面通過在該頁面上放置腳本/按鈕組合。
  2. 按鈕,點擊後,會從我的網站加載一個表格,可以填寫和提交。
  3. 根據提交的信息,可能會顯示另一個表單 - 例如,帶有驗證碼的第二頁,或者需要某個操作的確認頁,或者可能只是表單關閉或稍後添加的其他某個操作。

如果我打開一個彈出窗口,這很容易,只需將其構建爲常規頁面即可。但是,將其包含在調用頁面中會出現一些問題。

如果我實際上將表單內容加載到調用頁面上的本地div,它將成爲頁面內容的一部分。我知道我可以在一定程度上使用腳本處理這些內容(它會從我的站點爲該特定版本的小部件加載腳本),重新發布表單並將它們加載到同一個div中,當我完成時隱藏div它等等,但它似乎會使事情複雜化。

我的其他選擇是讓所有這些都發生在iframe中,所以它不是加載頁面調用頁面的一部分。這種方式我覺得我失去了以後可能需要的一些功能。無論如何,這可能是我的方式。

但是,在我開始走下這條路之前,我想我會問是否有人有任何提示將最複雜的一系列頁面包含在另一個頁面中?不管我做什麼,我都想確保我沒有關閉改變小部件功能方式的能力,我肯定會在稍後添加功能 - 所以保留我的選項以便改變是很重要的。

謝謝!

編輯

關於JotaBe的問題,在服務器端,我將使用PHP。

但是,我非常確定這並不重要,因爲PHP處理將(一如既往)發生在服務器上。所有的客戶端(請求頁面)都會知道它請求了,然後通過HTTP接收到JS/HTML/CSS/JSON/ETC資源。它不會知道或關心服務器如何生成這些資源。

如果它可以幫助你,雖然圖片吧,這是一個如何在客戶端和服務器(如果我沒有想到更好的辦法)一起工作的基本思路:

  1. 客戶端頁面將(加載時)從我的網站請求.js文件。該文件將根據請求的URL動態生成。例如,賬號#74將請求http://mysite.com/widget/js/74.js並且接收爲該賬戶定製的JavaScript資產。

  2. 當點擊「窗口小部件按鈕」時,它將使用JavaScript從我的網站請求HTML表單,並以某種方式將其包含在頁面中(哪種方式最適合整個問題)。HTML表格將根據請求動態生成併爲帳戶#74定製(即:http://mysite.com/widget/form/74.php)。

  3. 一旦由用戶填寫,表單將提交到我的網站。該職位將被處理並東西會發生,再根據請求的帳戶(即:行動= HTTP://mysite.com/widget/post/74.php)。此時,我可能需要拒收表單並要求重新發布驗證失敗,驗證碼驗證等,否則我可能需要提供確認頁面,或者只需關閉表單或其他操作。

+0

有什麼在服務器端?如果您使用ASP.NET MVC,則可以通過使用用戶控件並使用AJAX來顯示它們。你的問題不僅僅是在客戶端,如果你不告訴服務器端有什麼問題,我們不能幫你。 – JotaBe 2012-03-22 00:02:55

+1

我會去iframe,除非你使用AJAX來提取內容並將其顯示在同一頁面上。這看起來就像iframe設計的那種東西。 – 2012-03-22 01:23:16

回答

0

你做的任何方式這(語言/平臺/等),最好的做法是使用MVC,或HMVC,保持應用程序獨立的各種邏輯組件。您可以通過使用一些視圖模板來創建彈出窗口,這些視圖模板不會呈現其包含的標籤,這些模板是爲javascript/jquery .load()語句而設計的。然後,您可以設計一系列組件,這些組件被設計爲通過uri傳遞的參數加載。

這裏是一篇文章,這可能有助於解釋一個可能的設計模式爲你打算爲: http://www.phpied.com/ajax-mvc/

相關問題