代碼編輯器使用

編輯器裡點選 javascript 、 CSS 、 html 可切換代碼,Result 展示效果

2015年3月4日 星期三

Ajax json 處理

之前文章有介紹過使用 Ajax 來傳遞參數實現非同步處理,而這次同樣使用 PHP 當作 server 端將內容轉變為 Json 給 Ajax 後處理顯示出來

PHP 的部份
$cart = array(
  "OrderID" => $_GET['orderid'],
  "Amount" => $_GET['amount'],
  "User" => $_GET['user'],
);
echo json_encode($cart);

上述內容若未經過處理的話直接執行會顯示
{"OrderID":"orderid","Amount":"amount","User":"user"}
對於前端工程師來說這樣的做法可以很清楚知道哪個參數的作用

再來是 Ajax 的部份,事實上這邊一開始需要先引入 JQuery 的檔案
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
接著是 Ajax 內容和 Html
<srcipt>
var Submit=function(){
  $.ajax({
    type:"GET", //傳出資料方法
    data:$('#sentToBack').serialize(), //傳出資料
    url:"json.php", //傳出資料網址
    dateType:"json", //接收資料格式
    error:function(){ //如果接收資料失敗
      alert("AJAX ERROR!!!");
    },
    success:function(val){ //如果接收資料成功
      var cart = JSON.parse(val);
      document.getElementById("orderid").innerHTML = cart.OrderID;
      document.getElementById("amount").innerHTML = cart.Amount;
      document.getElementById("user").innerHTML = cart.User;
    }
  });
}
</srcipt>
<form id="sentToBack">
  <input type="text" name="orderid"/>
  <input type="text" name="amount"/>
  <input type="text" name="user"/>
  <input type="button" value="送出" onclick="Submit()"/>


</form>
<div id="orderid"></div>
<div id="amount"></div>
<div id="user"></div>

執行後就能在表單下方看到結果
orderid
amount
user

說實話這種方法只能使用在相同網域下才能夠執行成功,原因在於 Javascript 本身的國際協定標準基於安全性考量不允許跨網域傳遞資料
但如果說要接外部網域的 API 時該怎麼處理?
這時候 Jquery 提供了其他方法叫做 "Jsonp"
這個功能實現了原本 Javascript 不能跨網域操作

在 PHP 方面要將 echo 這段做點修改
echo $_GET['callback'].'('.json_encode($cart).');';
為何要多加入一個 $_GET['callback'] 呢?下面會再說明

Ajax 的部份,基本上也是無需做太大的更動,只有幾個地方要改
dataType: "jsonp", //改成 jsonp

/*加入下面2行*/
jsonp: 'callback',
jsonpCallback: 'jsonpCallback',


/*移除掉這行 var cart = JSON.parse(val); ,並將下列 3 行改寫*/
document.getElementById("orderid").innerHTML = val.OrderID;
document.getElementById("amount").innerHTML = val.Amount;
document.getElementById("user").innerHTML = val.User;

如此一來就能實現跨網域操作了
至於 callback 的部份
在取得 server 回傳值的時候,自動轉換成 call function 的 function name,而如果是一個匿名函式,則會轉換成一個帶有 time stamp 的函式名稱。
以上就是 server 端所提供的 jsonp 服務,接受 callback function 為參數,並將 callback function 的結果回傳給 client 端,當傳輸完成後,client 會自動執行 Server 回傳的 callback function,取得結果。

另外補充 jsonp ,這項功能只能使用 GET 的方式執行,而 json 則沒有限制,據說網路上有人能夠實現 jsonp 使用 POST 方法,不過聽說非常之複雜難處理,所以如果用上 jsonp 時儘量以 GET 的方式傳遞資料吧。

2015年1月13日 星期二

使用 virtualmin 在手機上設定 Email

首先先在 virtualmin 上面新建使用者(這邊就不介紹了,主要在手機設定部份)
以下是使用 SONY 手機內建信箱設定,一般皆大同小異

1.填入信箱名稱和密碼後點選[手動設定]

2.選擇[IMAP]

3.填入相對應內容,下一步

4.同樣填入相對應內容(一般來說會預設好,確認無誤即可),下一步

5.設定使用者的名稱,下一步完成

6.已經可以看到收件夾下的email設置成功