會員登入 新朋友?立刻註冊
[說明]
文章會慢慢移新精讚 //n.sfs.tw
2019/2/23 星期六     [文章分類及列表]
精讚Blog logo 部落格是自己寫爽的
精讚部落 > 前端程設 > jQuery
jQuery 之 ajax 無所不在的應用 無次要群組 列印 推薦
作者或來源 瘦河馬 2010-01-06 02:52:11
關鍵字 1ajax 2jquery
此文完整連結 http://n.zipko.info/332.html
文章歡迎轉載,請尊重版權註明連結來源。

jQuery 之 ajax 的應用

想用 jquery 達成 ajax 的功能簡直就是像吃飯一樣簡單!等於是騎了15年的老迪爵換了新引擎一樣(我真的有去換 $5500,值!這是什麼鬼比喻!! ),快~~~

只要用  $.ajax 的函數就搞定了

例如我有一個表單欄位假設使用者輸入商品的id後,就去後台傳回該商品的名稱,欄位是這樣的:

商品號< input type=text name=gsn id=gsn size=4 maxlength=2>
< span style="width:250px;" id=gname>此處檢查商品是否存在< /span>

只要加入一個 change的事件

$(function() {
$("#gsn").change(function (){
   $.ajax({ url: 'index.php?f=GetGdsBygsn' ,
         cache: false,
         dataType: 'html', type:'GET',
         data: { gsn: $('#gsn').val() },
         error: function(xhr) { alert('Ajax request 發生錯誤'+ xhr); },
         success: function(response) {

            $('#gname').html( response );
         }
     });
});

說明:

   $.ajax({ url: 'index.php?f=GetGdsBygsn' ,    <== index.php?f=GetGdsBygsn的函式只作資料庫查詢回傳的動作,程式略
         cache: false,     <== 本人不知幹嘛的
         dataType: 'html', type:'GET',  
<== 設定傳值方式
         data: { gsn: $('#gsn').val() },   
<== 傳GET的變數,此例是gsn
         error: function(xhr) { alert('Ajax request 發生錯誤'+ xhr); }, 
<== 錯誤顯示及處理函式
         success: function(response) {  
<== 成功處理函式,response 是index.php處理完印出來的東西,把他當是 url 這個函式的 return 就好懂了。
            $('#gname').html( response );
         }
     });

就這麼簡單。

END
F B 留 言 版

留言結束請重新整理網頁顯示留言
相 關 文 章
同 群 組 其 他 文 章
隨 機 文 章
精讚部落版權所有(c) JinZan Blog http://n.zipko.info Author axer@tc.edu.tw. 最佳瀏器為Firefox,本網頁不支援IE6。[文章分類及列表]
本站最佳瀏覽解析度1024x768 網站建置 2009.11