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服务。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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中
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 [System.Web.Services.WebMethod()] 2 public static string GetPeople(string unit) 3 { 4 System.Threading.Thread.Sleep(500); //延迟0.5秒 5 Page page = new Page(); 6 UserScoreInput ctl = (UserScoreInput)page.LoadControl("~\\Samples\\UserScoreInput.ascx"); //加载表单控件 7 ctl.unit = unit; //传递给表单控件的参数 8 9 page.Controls.Add(ctl); 10 System.IO.StringWriter writer = new System.IO.StringWriter(); 11 HttpContext.Current.Server.Execute(page, writer, false); 12 string output = writer.ToString(); 13 writer.Close(); 14 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="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="25%"> 32 <div class="hh" ><%# Eval("name") %></div> 33 </td> 34 <td style="25%"> 35 <div class="scoretxt" name='<%# Eval("id") %>'> 36 </td> 37 38 </ItemTemplate> 39 <AlternatingItemTemplate> 40 41 <td style="25%"> 42 <div class="hh" ><%# Eval("name") %></div></td> 43 44 <td style="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代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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 }
有什么不足之处请大家留言,共同学习。