Tag for ajax

JSONP 實做：使用 Google Ajax Search

Posted by essoduke - 2009 年 07 月 14 日 20:19:27 - 765 User Views
 

範例網頁：JSONP 實做：使用 Google Ajax Search

Google Ajax Search with JSONP

※ 詭異的是，我使用 $.get 都只能收到 400 Bad Request，只能用 $.ajax 才能正常。

  1. $.ajax({
  2.       url: 'http://ajax.googleapis.com/ajax/services/search/web',
  3.       data:{
  4.         'key': gsearch.key,
  5.         'v': '1.0',
  6.         'q': encodeURIComponent(k), // + '+site:essoduke.org' 搜尋網站,
  7.         'rsz': 'large',
  8.         'hl': 'zh-TW',
  9.         'start': s
  10.       },
  11.           dataType: 'jsonp',
  12.           success: gsearch.fetch
  13.     });

參考資料：

Multiple File Upload by AjaxFileUpload of jQuery

Posted by essoduke - 2008 年 04 月 25 日 20:44:44 - 5,643 User Views

AjaxFileUpload 是 jQuery 的擴充套件之一，可以使用 Ajax 來即時上傳檔案，不過缺點就是一次只能上傳一個。

但是今天在研究 Multiple File Upload 搭配 AjaxFileUpload 時，找到一個土法煉鋼的方式可以達成一次上傳多個檔案。

這是 AjaxFileUpload 原本的使用方法：

  1. $.ajaxFileUpload ({
  2.         url:'doajaxfileupload.php',
  3.         secureuri:false,
  4.         fileElementId:'fileToUpload',
  5.         dataType: 'json',
  6.         success: function (data, status){
  7.             if(typeof(data.error) != 'undefined'){
  8.                 if(data.error != ''){
  9.                     alert(data.error);
  10.                 }else{
  11.                     alert(data.msg);
  12.                 }
  13.             }
  14.         },
  15.         error: function (data, status, e){
  16.             alert(e);
  17.         }
  18. });

土法煉鋼法就是利用 Multiple File Upload plugin 所建立的 Array 讓上述過程跑 n 次… XD

  1. //取得 uploads 表單內，input 類型為 file 表單元素並依序執行迴圈
  2. $('input:file', $('#uploads')).each(function(){
  3.   $.ajaxFileUpload({
  4.         url:'doajaxfileupload.php',
  5.         secureuri:false,
  6.         //重點就是這行，依序傳入 file 表單元素的 id 值
  7.         fileElementId:$(this).attr("id"),
  8.         dataType: 'json',
  9.         success: function (data, status){
  10.           //後端處理回傳 json...
  11.         },
  12.         error: function (data, status, e){
  13.             alert(e);
  14.         }
  15.     });
  16. });

目前測試使用上都沒有問題，下一個實做就是要像 GMail 的夾帶檔案一樣，讓已選取上傳的檔案清單可以在點選 remove 時移出清單，同時也刪除已上傳的檔案…

DEMO 測試

延伸閱讀：

Technorati Tags: , ,

form preview within Thickbox via Ajax

Posted by essoduke - 2008 年 04 月 22 日 23:10:22 - 976 User Views

突然想研究用 Thickbox 搭配 Ajax 來達成表單預覽的功能，就動手實作了一下。

jQuery Ajax

  1. var url = "preview.php?" + new Date().getTime();
  2. $.post(url, {c: $("#content").val()},
  3.       function(result){
  4.         $("#preview_temp").html(result);
  5.         tb_show('caption', '#TB_inline?height=480&width=640&inlineId=preview_temp', false);
  6.       }
  7. );

流程其實很簡單，就是把結果 post 到後端處理的程式，再把結果 callback 到頁面元素就行了，會用 post 就是不用受限於 get 的 2KB 限制；整個流程的重點在於「如何在 javascript 中呼叫 Thickbox」，方法就是直接使用 tb_show 函式，把 url 直接替換成呼叫 inline 的方式即可：

  1. //tb_show('Your Caption', href, group);
  2. tb_show('caption', '#TB_inline?height=480&width=640&inlineId=preview_temp', false);

Demonstrate: form preview within Thickbox via Ajax

其實試出來以後才想到包括 tinyMCE 等 Rich Text Editor 早就都提供預覽的功能了。
原來這就是吃飽太閒嗎？XD

–
話說…最近正在瘋狂使用 jQuery 來虐待自己！

Powered by WordPress with GimpStyle Theme design by Horacio Bella.
Entries and comments feeds. Valid XHTML and CSS.