kevinya

低調

2014-06-11

[WebAPI]如何建立WebAPI Client(jQuery)

  • 2736
  • 0
  • 2014-12-04

摘要:[WebAPI]如何建立WebAPI Client(jQuery)

以下根據前篇所建立的WebAPI

[WebAPI]實作查詢+新增編輯刪除功能WebAPI2 

所實作的WebAPI Client(jQuery)

還沒開始就先講結論：

WebService真的是方便跨平台存取資料用的，效能.....真的挺慢的，都要等個好幾秒

 

然後先來測試GetAllEmployees, 很單純的Get測試，不用傳任何參數，會取得所有的Employee資料

當然實務上是不可能這樣的，不過這只是測試，沒差

Html：


<button id="btnTest" type="button" value="送出">送出</button>
<div id="Result">
    <ul id="employees"></ul>
</div>

javascript:
結果：
 
然後測試StaticQuery：
Html：

<button id="btnTest" type="button" value="查詢">查詢</button>
<div id="Result">
    <ul id="employees"></ul>
</div>
<form id="queryEmployeeForm" method="post">
    <p>
        <label for="EmployeeID">EmployeeID(必填):</label>
        <input type="text" name="EmployeeID" id="EmployeeID" />
    </p>       
</form>

javascripts：

結果：
 
然後介紹動態查詢DynamicQuery：
html：

<h2>DynamicQuery</h2>

<button id="btnTest" type="button" value="查詢">查詢</button>
<div id="Result">
    <ul id="employees"></ul>
</div>
<form id="queryEmployeeForm" method="post">
    <p>
        <label for="EmployeeID"><span style="color:red">＊</span>EmployeeID:</label>
        <input type="text" name="EmployeeID" id="EmployeeID" />
    </p>
    <p>
        <label for="FirstName">FirstName:</label>
        <input type="text" name="FirstName" id="FirstName" />
    </p>
    <p>
        <label for="LastName">LastName:</label>
        <input type="text" name="LastName" id="LastName" />
    </p>
    
</form>

javascripts：

結果：

全部參數輸入：

參數有的傳有的不傳：

參數全部不傳：

 
實際測起來，多個參數還是不要用http Get去做比較好,javascript在組合url字串的時候，真的很費事
動態下參數的查詢還是用Post比較好，參數的組合就交給微軟的parser自動處理就好
以上是懶人本人見解
 
 
然後要測試PostQuery：

其實PostQuery也是動態參數查詢，只是他送出查詢條件的方式是透過http post method

但他不算百分之百的動態!!因為EmployeeQuery類別會自動parse使用者送出的

參數條件，至少要輸入一個查詢條件!說著說著好像PostQuery就遜掉了

其實沒差啦!大部分管理資訊系統都嘛至少要輸入一個條件，以避免user查詢出太多資料

隨便設定一個條件請user必填就好

html：


<h2>PostQuery</h2>

<div id="Result">
    <ul id="employees"></ul>
</div>

<input type="button" id="btnTest" value="送出" />
<form id="queryEmployeeForm" method="post">    
    <p>
        <label for="EmployeeID">EmployeeID:</label>
        <input type="text" name="EmployeeID" />
    </p>
    <p>
        <label for="FirstName">FirstName:</label>
        <input type="text" name="FirstName" />
    </p>
    <p>
        <label for="LastName">LastName:</label>
        <input type="text" name="LastName" />
    </p>
    
</form>

javascript：

結果：

全部欄位都沒輸入value，還是可以查詢，因為EmployeeQuery是去parse欄位名稱，而不是看有沒有塞值

所以基本上，伺服器端收到的EmployeeQuery物件不是null喔，而是 .EmployeeID為null, .FirstName為null

,LastName為null

全部都輸入：

只輸入其中一個：

 

然後測試Insert

html:


<div id="Result">
    <ul id="employees"></ul>
</div>

<input type="button" id="btnTest" value="送出" />
<form id="queryEmployeeForm" method="post">
    <p>
        <label for="FirstName">FirstName:</label>
        <input type="text" name="FirstName" />
    </p>
    <p>
        <label for="LastName">LastName:</label>
        <input type="text" name="LastName" />
    </p>
    <p>
        <label for="City">City:</label>
        <input type="text" name="City" />
    </p>
</form>

javascript:

結果：

 

然後測試Update：

就是透過WebAPI去更新員工資料，這是http put method

html


<h2>Update</h2>

<input type="button" id="btnTest" value="送出" />
<form id="queryEmployeeForm" method="post">
    <p>
        <label for="EmployeeID">Target EmployeeID:</label>
        <input type="text" name="EmployeeID" id="EmployeeID" />
    </p>
    <p>
        <label for="FirstName">FirstName:</label>
        <input type="text" name="FirstName" id="FirstName" />
    </p>
    <p>
        <label for="LastName">LastName:</label>
        <input type="text" name="LastName" id="LastName" />
    </p>
    <p>
        <label for="City">City:</label>
        <input type="text" name="City" id="City" />
    </p>
</form>

javascript

結果：

 

然後測試Delete

傳入員工代號，刪除該名員工資料

html:


<h2>Delete</h2>

<input type="button" id="btnTest" value="送出" />
<form id="queryEmployeeForm" method="post">
    <p>
        <label for="EmployeeID">Target EmployeeID:</label>
        <input type="text" name="EmployeeID" id="EmployeeID" />
    </p>   
</form>

javascript:

結果：

以上!

 

PS.突然想起來一個重點，要怎麼用jQuery去做Authentication去呼叫https的WebAPI?

研究一下，如果研究出來再來這邊補充

標籤雲