jquery ajax .net使用小结

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中

 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代码

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 }

 有什么不足之处请大家留言，共同学习。