天天看點

Ajax疊加(Ajax傳回資料用Ajax送出)

      最近在做人事管理系統的一個簽到功能,首先是把部門當做參數,把參數用Ajax發送到資料庫進行查詢,然後以表格形式動态生成員工資訊到傳回頁面的Div裡,表格最後的一列是簽到按鈕,這時我想用JQuery繼續擷取被點選的“簽到”按鈕,然後用Ajax将資料發送到資料庫簽到表,更新簽到表,于是我就把每個簽到按鈕的id屬性設定成第一次Ajax傳回的每個員工資訊的工号,再次用JQuery擷取,怎麼擷取呢?想到了标簽加事件選擇器,于是寫了下面代碼:

      $(function(){

            $("tr input:button").click(){

                   $.ajax({

                   type: "POST",

                   url: "page_helper.ashx",

                   data: "name=K&pid" + $(this).attr("id"),

                   success: function (html) {

                       $("#ReturnHTML").html(html);

                   },

                   error: function () {

                       alert("伺服器繁忙,請稍後再試!");

                   }

               });

             }

        });

      可是後來點選卻發現沒有擷取到點選事件,點選按鈕根本就沒有反應,當我用浏覽器檢視傳回的源碼的時候,發現原來Ajax傳回的HTML代碼根本就沒有被添加到頁面中,這回怎麼辦呢?後來去百度裡檢索了半天,都說Ajax傳回的資料無法用浏覽器檢視到源碼,因為是異步的,檢索了一天,頭又大又疼,于是就晚上了,每次遇到大的問題,就趕緊睡覺,在夢中想實作方法,這樣一方面可以休息,另一方面也可以解決問題,一般的時候第二天問題都會有答案,也都能實作。

      第二天早晨醒來,思路還是沒有,我想這次應該是大問題了,是不是我想要實作的不可能實作呢?百度裡幾乎沒有用兩次Ajax請求的,無奈之下在QQ空間釋出了懸賞求助,懸賞是宴請三天三夜,後來終于我偉大的高中同學給了我幫助,當然不是因為懸賞才幫助我的,哈哈哈。

      高中同學是這麼說的,Jquery中有個live方法,可以擷取動态生成的HTML代碼元素,後來我就把live方法敲了進去,看了有三個參數event,data,function;于是檢視了Jquery的幫助文檔。

event:必需,規定附加到元素的一個或多個事件,由空格分隔多個事件。必須是有效的事件。

data:可選,規定傳遞到該函數的額外資料。

function:必需,規定目前事件發生時運作的函數。

     這時的我這時大旱逢甘霖啊,于是寫下下面代碼:

     $(function(){

$("tr input:button").live("click", function () {

                       type: "POST",

                       url: "page_helper.ashx",

                       data: "name=JS&pid=" + $(this).attr("id") + jsparam(),

                       success: function (html) {

                           alert(html);

                       },

                       error: function () {

                           alert("伺服器繁忙,請稍後再試!");

                   });

               }

           });

      這次奇迹出現了,Ajax傳回的按鈕單擊事件被擷取到了,下面的Ajax異步過程也調用成功了,那種喜悅不能言表。

       如果我放棄了這次求助,以後遇到同樣的問題,我可能換一種思路,會用a标簽代替按鈕,跳轉到另一界面,操作起來太麻煩了,哪個使用者見到這樣的效果都會惡心至極,同學這樣的幫助豈三天三夜的宴請足矣?

繼續閱讀