PHP + Jquery 在WEB FORM的內容互動上,在商業應用中仍不吸引...

原创
2011/08/16 11:10
阅读数 390

(先要講明, 我是一個初階入門的菜鳥, 下面的內容可能是因為知識不足, 但不講又不快...)

個人對WEB FORM的應用上, 有一點點要求, 總想做到便捷, 快速的輸入, 當然, 這些要求,不是給那些會員注冊用的WEB FORM, 而是應用到商業上的系統上, 給客戶快捷輸入資料, 簡便地查詢他們想要的東西! 在WIN FORM上, 我們總能做到! 在每個TEXTAREA裡加入各總的: Action listener, 常用的有Keypress, Lose focus, Get focus 等... 

當用到PHP以後, 這些東西都沒有了, 但有了AJAX以後, 情況看來有點轉變, 但到底改變了多少? 個人認為的確是個解決方案, 但同時又未能真正給人大力地在商用的資訊系統上, 大力地使用! 個人看的是開發的時間和複雜程度...

大家來看看以下代碼, 或者您們會知我想說什麼....

(FORM.PHP)

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/jquery-ui.js"></script>

<script type='text/javascript' src='js/supplier_action.js'> /*自己寫的功能,用來定義supplierID那一格的動作...*/</script>

<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />


<script type="text/javascript">

$(document).ready(function() {

 /* UI 自動完成 */ 

 Source_Page_Supplier = "dbcontrol/getSupplier_b.php";

 supplier_Action();

});

</script>


<div id="UI_Supplier">

供應商號: <input type="text" id="supplierID" /><br/>

公司名稱: <input type="text" id="supplier_Company" /><br/>

聯絡人: <input type="text" id="supplier_Contact" /><br/>

國家: <input type="text" id="supplier_Country" />

貨幣: <input type="text" id="supplier_Currency" /><br/>

電郵: <input type="text" id="supplier_Email" /><br/>

運輸時間: <input type="text" id="supplier_TransitTime" />

運輸成本: <input type="text" id="supplier_TransitCost" /><br/>

</div>


<p>

<h3>Result:</h3> <ol id="result"></ol>

<div id="result_ID">ID: </div><!--input type="text" name="result_ID" id="result_ID" /--> <br/>

<div id="result_NAME">NAME: </div><!--input type="text" name="result_NAME" id="result_NAME" /-->

<br/>

<br/>

<div id="result_ID_B">ID: </div><!--input type="text" name="result_ID" id="result_ID" /--> <br/>

<div id="result_NAME_B">NAME: </div><!--input type="text" name="result_NAME" id="result_NAME" /-->

<div id="caculation"></div><!--input type="text" name="result_ID" id="result_ID" /--> <br/>

</p>


=============================================================================


(supplier_action.js)

function supplier_Action()

{

$( "#supplierID" ).autocomplete({

  source: function(request, response){

      /* CI 的控制和函數 */

   $.get(Source_Page_Supplier, {

    /* POST 的變數是 term 可以自訂,request.term 是系統參數,不可改 */

    term: request.term}, function(data){         

       response($.map(data, function(item) {

        return {

        /* 處理傳回的資料:user_name 是變數,item.傳回的欄位名稱,例如:user_name

         * 意思是 user_name = item.user_name 

       */      

         my_ID: item.myid,

         my_Company: item.myvalue

        }

      }

      ))

    }, "json"); /* 使用 JSON 傳送資料 */

   },

  minLength: 1,  /* 限定輸入幾個字後才會開始動作 */

  cache: false,

  focus: function( event, ui ) {

   /* 當你把游標移到在下拉選單中,原本的輸入框要填入什麼,在這裡是原本輸入框的字 

    * 或是填入 $( "#user_tel" ).val( "ui.item.user_name" ); 會顯示你回傳的欄位變數內容 

    * 這是自訂變數 user_name

   */

   $( "#result_ID" ).val();

   return false;

  },

  select: function( event, ui ) {

   /* 當你選擇完後,會執行那些動作。例如把值放到其他欄位裡 */   

   $( "#supplierID" ).val( ui.item.my_ID );

  $( "#result_ID" ).hide();

  $( "#result_NAME" ).hide();   

   return false;

  }

 });

 

 /* 這裡是重新整理來源資料,在下拉選單中要輸出的資料是什麼 */

 $( "#supplierID" ).data( "autocomplete" )._renderItem = function( ul, item ) {

  return $( "<li></li>" )

   .data( "item.autocomplete", item )

   /* 這裡非常重要:錯了就取不到資料喔!

    * item.user_name 是變數名稱,不是你原始資料的欄位

    * 請往上看「處理傳回的資料」,就是這個自訂變數 user_name:

    * 其他 HTML 請自行理解!        

   */

   .append( "<a href=#>" + "<strong>" + item.my_ID + "</strong> --" + item.my_Company +  "</a>" )

   .appendTo( ul );

 };

 /* UI 自動完成 */ 

}


=============================================================================


(getSupplier_b.php)

<?php

require_once('config.php');

require_once(DB_PATH.'db.php');

$q = strtolower($_GET["term"]);

if (!$q) return;

//$q = "Be";

$db = new Db();  

$link = $db->connect($config); 

$rows = $db->table(TABLE_SUPPLIER)->field('*')->where(TABLE_SUPPLIER_COMPANYNAME." LIKE '%$q%' ")->findAll();//->order(TABLE_SUPPLIER_COMPANYNAME.' DESC')->findAll();

$array = array(); 

foreach($rows as $row)

{

$array[] = array(

            'myid' => $row[TABLE_SUPPLIER_COMPANYID],

            'myvalue' => $row[TABLE_SUPPLIER_COMPANYNAME]            

        );

}

echo json_encode($array);

flush();

?>


從以上代碼中, 大家可以見到的只是為1個input給它Autocomplete時, 及其資料選定後的動作設定...  如果我在一個有15個input的WEBFORM , 如果, 每個input我都要造一些驗證查詢, 自動建議, 再加上按鍵反應(快捷鍵)... 那麼, 這個系統的編碼上, 在JQUERY的編寫, 會是多冗長...  (我想出的辦法是, 為了不相互有太多太長的編碼,我會個個INPUT都做一個JS檔, 15個INUPT, 15個JS檔...)


再者, 如果我要把一個資訊系統, 用PHP+AJAX來造, 裡面的輸入界面, 又怎會得一張表單? 大量的表單, 代表著大量的input及其動作設定... 編碼越長, 人為犯錯的機會就越大, 除蟲在PHP及JAVASCRIPT裡, 比JAVA及C#等都難一點... 一想到這裡, 個人就把PHP+JQUERY上的WEB FORM上的研究, 暫時停止了, 直至有新的方法和技術...


聽說JAVA+GOOGLE WEB TOOL KIT 在WEB FORM的處理上, 在操作上, 會容易得多, 方便得多... 所以, 下一個研究對象, 或者是JSP+GOOGLE WEB TOOL KIT

(如果各位, 在這些東西上很有心德, 請多多分享指教!)

展开阅读全文
加载中
点击加入讨论🔥(2) 发布并加入讨论🔥
2 评论
1 收藏
0
分享
返回顶部
顶部