jquery是一個優秀的javascript架構，大大提高了javascript代碼的簡潔性，同時也降低了javascript的難度。關於具體的jquery函數請參考http://www.cnblogs.com/greatxj/articles/2260357.html。對於jquery中的ajax，我主要使用了ajax()這個函數，下面就寫一點使用心得，有什麼不足之處向大家多多請教了。後台代碼為C#
1.對一個表添加資料
前台代碼
1 $.ajax({
2 type: "POST", //訪問WebService使用Post方式請求
3 contentType: "application/json", //WebService 會返回Json類型
4 url: "ajax.aspx/AddToTP", //調用WebService的地址和方法名稱組合 ---- WsURL/方法名
5 data: '{ tid: "' + tid + '", uid:"' + uid + '",score: "' + score + '", degree: "' + degree + '"}', //這裡是要傳遞的參數，格式為 data: "{paraName:paraValue}",下面將會看到
6 dataType: 'json',
7 success: function (result) { //回呼函數，result，傳回值
8 alert(result.d);//彈出ajax請求成功後，背景傳回值
9 if (result.d == "success") {
10
11 //成功事件
12 }
13 }
14 });
c#接收ajax請求可以用.aspx，或者.ashx（一般交易處理程式） ，這裡使用.aspx中的web服務。
1 [System.Web.Services.WebMethod()]
2 public static string AddToTP(string tid,string uid,string score,string degree)
3 {
4 bool ok=DBHpler.ExecuteNonQueryTwo( "Insert into trainingpeople (tid,uid,score,degree) Values('"+tid+"','"+uid+"','"+score+"','"+degree+"')");//使用sql協助類，對錶trainingpeople插入資料
5 if (ok == true) { return "success"; } //對DBHpler.ExecuteNonQueryTwo傳回值判斷
6 else { return "failed"; }
7 }
2.當使用者點擊按鈕時，ajax請求返回使用者選擇班級的人員表單，並對錶單格式化，此處類比的為對班級測試輸入成績，使用者可選擇直接輸入分數，或者是二級制
前台js代碼
<script language="javascript" type="text/javascript">
function getPeople() {
$('#progress').css('visibility', 'visible'); //loading圖片顯示
$.ajax({
type: "POST", //訪問WebService使用Post方式請求
contentType: "application/json", //WebService 會返回Json類型
url: "ajax.aspx/GetPeople", //調用WebService的地址和方法名稱組合 ---- WsURL/方法名
data: '{unit:"' + $('#Select1').val() + '"}', //這裡是要傳遞的參數為使用者下拉框中選擇的值，此處為使用者選擇的某個子單位
dataType: 'json',
success: function (data) { //回呼函數，result，傳回值
$('.dd').empty(); //對<div class="dd">清空
$('.dd').append(data.d); //對<div class="dd">填寫ajax傳回值
$('#progress').css('visibility', 'hidden'); //loading圖片隱藏
var ss = $('#Select3 option:selected').val();
//根據使用者選擇的值格式化表單
if (ss == "score") {
$('.dd .scoretxt').each(function (i) {
$($('.dd .scoretxt ')[i]).append('<input type="text" class="score"/>');
});
}
else {
$('.dd .scoretxt').each(function (i) {
$($('.dd .scoretxt ')[i]).append('<select class="score" ><option value="合格">合格</option><option value="不合格">不合格</option><option value="未測">未測</option></select>');
});
}
}
});
}
</script>
後台代碼
ajax.aspx中
- [System.Web.Services.WebMethod()]
- public static string GetPeople(string unit)
- {
- System.Threading.Thread.Sleep(500); //延遲0.5秒
- Page page = new Page();
- UserScoreInput ctl = (UserScoreInput)page.LoadControl("~\\Samples\\UserScoreInput.ascx"); //載入表單控制項
- ctl.unit = unit; //傳遞給表單控制項的參數
-
- page.Controls.Add(ctl);
- System.IO.StringWriter writer = new System.IO.StringWriter();
- HttpContext.Current.Server.Execute(page, writer, false);
- string output = writer.ToString();
- writer.Close();
- return output;
15 }
使用者控制項
UserScoreInput.ascx代碼 1 <%@ Control Language="C#" AutoEventWireup="true" Inherits="UserScoreInput" ClassName="UserScoreInput" %>
2
3 <script runat="server">
4 protected override void OnLoad(EventArgs e)
5 {
6
7
8 if (int.Parse(this.unit) > 1000)
9 sqlDsOrders.SelectCommand = "SELECT [ID], [name] FROM [personnel] WHERE unit = '" + this.unit + "%'";
10
11 base.OnLoad(e);
12 }
13
14
15 </script>
16 //此處採用兩列重複
17 <asp:SqlDataSource ID="sqlDsOrders" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" >
18 </asp:SqlDataSource>
19 <asp:Repeater ID="List" DataSourceID="sqlDsOrders" runat="server">
20 <HeaderTemplate>
21 <table style="width:80%">
22 <tr>
23 <th>姓名</th>
24 <th>成績</th>
25 <th>姓名</th>
26 <th>成績</th>
27 </tr>
28 </HeaderTemplate>
29 <ItemTemplate>
30 <tr>
31 <td style="width:25%">
32 <div class="hh" ><%# Eval("name") %></div>
33 </td>
34 <td style="width:25%">
35 <div class="scoretxt" name='<%# Eval("id") %>'>
36 </td>
37
38 </ItemTemplate>
39 <AlternatingItemTemplate>
40
41 <td style="width:25%">
42 <div class="hh" ><%# Eval("name") %></div></td>
43
44 <td style="width:25%">
45 <div class="scoretxt" name='<%# Eval("id") %>'>
46 </td>
47 </tr>
48 </AlternatingItemTemplate>
49 <FooterTemplate>
50 </table>
51 </FooterTemplate>
52 </asp:Repeater>
UserScoreInput.ascx.cs代碼
1 public partial class UserScoreInput : UserControl
2 {
3 public string unit
4 {
5 get { return (string)ViewState["unit"]; }
6 set { ViewState["unit"] = value; }
7 }
8
9 }
有什麼不足之處請大家留言，共同學習。
