jquery ajax .net使用
jquery是一个优秀的javascript框架,大大提高了javascript代码的简洁性,同时也降低了javascript的难度。关于具体的jquery函数请参考http://www.cnblogs.com/greatxj/articles/2260357.html。对于jquery中的ajax,我主要使用了ajax()这个函数,下面就写一点使用心得,有什么不足之处向大家多多请教了。后台代码为C#
1.对一个表添加数据
前台代码
1$.ajax({
2type:"POST",//访问WebService使用Post方式请求
3contentType:"application/json",//WebService会返回Json类型
4url:"ajax.aspx/AddToTP",//调用WebService的地址和方法名称组合----WsURL/方法名
5data:'{tid:"'+tid+'",uid:"'+uid+'",score:"'+score+'",degree:"'+degree+'"}',//这里是要传递的参数,格式为data:"{paraName:paraValue}",下面将会看到
6dataType:'json',
7success:function(result){//回调函数,result,返回值
8alert(result.d);//弹出ajax请求成功后,后台的返回值
9if(result.d=="success"){
10
11//成功事件
12}
13}
14});
c#接收ajax请求可以用.aspx,或者.ashx(一般事务处理程序) ,这里使用.aspx中的web服务。
1[System.Web.Services.WebMethod()]
2publicstaticstringAddToTP(stringtid,stringuid,stringscore,stringdegree)
3{
4boolok=DBHpler.ExecuteNonQueryTwo("Insertintotrainingpeople(tid,uid,score,degree)Values('"+tid+"','"+uid+"','"+score+"','"+degree+"')");//使用sql帮助类,对表trainingpeople插入数据
5if(ok==true){return"success";}//对DBHpler.ExecuteNonQueryTwo返回值判断
6else{return"failed";}
7}
2.当用户点击按钮时,ajax请求返回用户选择班级的人员表单,并对表单格式化,此处模拟的为对班级测试输入成绩,用户可选择直接输入分数,或者是二级制
前台js代码
scriptlanguage="javascript"type="text/javascript"
functiongetPeople(){
$('#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();//对divclass="dd"清空
$('.dd').append(data.d);//对divclass="dd"填写ajax返回值
$('#progress').css('visibility','hidden');//loading图片隐藏
varss=$('#Select3option:selected').val();
//根据用户选择的值格式化表单
if(ss=="score"){
$('.dd.scoretxt').each(function(i){
$($('.dd.scoretxt')[i]).append('inputtype="text"class="score"/');
});
}
else{
$('.dd.scoretxt').each(function(i){
$($('.dd.scoretxt')[i]).append('selectclass="score"optionvalue="合格"合格/optionoptionvalue="不合格"不合格/optionoptionvalue="未测"未测/option/select');
});
}
}
});
}
/script
后台代码
ajax.aspx中
[System.Web.Services.WebMethod()]
publicstaticstringGetPeople(stringunit)
{
System.Threading.Thread.Sleep(500);//延迟0.5秒
Pagepage=newPage();
UserScoreInputctl=(UserScoreInput)page.LoadControl("~\\Samples\\UserScoreInput.ascx");//加载表单控件
ctl.unit=unit;//传递给表单控件的参数
page.Controls.Add(ctl);
System.IO.StringWriterwriter=newSystem.IO.StringWriter();
HttpContext.Current.Server.Execute(page,writer,false);
stringoutput=writer.ToString();
writer.Close();
returnoutput;
15}
用户控件
UserScoreInput.ascx代码
1%@ControlLanguage="C#"AutoEventWireup="true"Inherits="UserScoreInput"ClassName="UserScoreInput"%
2
3scriptrunat="server"
4protectedoverridevoidOnLoad(EventArgse)
5{
6
7
8if(int.Parse(this.unit)1000)
9sqlDsOrders.SelectCommand="SELECT[ID],[name]FROM[personnel]WHEREunit='"+this.unit+"%'";
10
11base.OnLoad(e);
12}
13
14
15/script
16//此处采用两列重复
17asp:SqlDataSourceID="sqlDsOrders"runat="server"ConnectionString="%$ConnectionStrings:ConnectionString%"
18/asp:SqlDataSource
19asp:RepeaterID="List"DataSourceID="sqlDsOrders"runat="server"
20HeaderTemplate
21tablestyle="width:80%"
22tr
23th姓名/th
24th成绩/th
25th姓名/th
26th成绩/th
27/tr
28/HeaderTemplate
29ItemTemplate
30tr
31tdstyle="width:25%"
32divclass="hh"%#Eval("name")%/div
33/td
34tdstyle="width:25%"
35divclass="scoretxt"name='%#Eval("id")%'
36/td
37
38/ItemTemplate
39AlternatingItemTemplate
40
41tdstyle="width:25%"
42divclass="hh"%#Eval("name")%/div/td
43
44tdstyle="width:25%"
45divclass="scoretxt"name='%#Eval("id")%'
46/td
47/tr
48/AlternatingItemTemplate
49FooterTemplate
50/table
51/FooterTemplate
52/asp:Repeater
UserScoreInput.ascx.cs代码
1publicpartialclassUserScoreInput:UserControl
2{
3publicstringunit
4{
5get{return(string)ViewState["unit"];}
6set{ViewState["unit"]=value;}
7}
8
9}
有什么不足之处请大家留言,共同学习。
1.对一个表添加数据
前台代码
1$.ajax({
2type:"POST",//访问WebService使用Post方式请求
3contentType:"application/json",//WebService会返回Json类型
4url:"ajax.aspx/AddToTP",//调用WebService的地址和方法名称组合----WsURL/方法名
5data:'{tid:"'+tid+'",uid:"'+uid+'",score:"'+score+'",degree:"'+degree+'"}',//这里是要传递的参数,格式为data:"{paraName:paraValue}",下面将会看到
6dataType:'json',
7success:function(result){//回调函数,result,返回值
8alert(result.d);//弹出ajax请求成功后,后台的返回值
9if(result.d=="success"){
10
11//成功事件
12}
13}
14});
c#接收ajax请求可以用.aspx,或者.ashx(一般事务处理程序) ,这里使用.aspx中的web服务。
1[System.Web.Services.WebMethod()]
2publicstaticstringAddToTP(stringtid,stringuid,stringscore,stringdegree)
3{
4boolok=DBHpler.ExecuteNonQueryTwo("Insertintotrainingpeople(tid,uid,score,degree)Values('"+tid+"','"+uid+"','"+score+"','"+degree+"')");//使用sql帮助类,对表trainingpeople插入数据
5if(ok==true){return"success";}//对DBHpler.ExecuteNonQueryTwo返回值判断
6else{return"failed";}
7}
2.当用户点击按钮时,ajax请求返回用户选择班级的人员表单,并对表单格式化,此处模拟的为对班级测试输入成绩,用户可选择直接输入分数,或者是二级制
前台js代码
scriptlanguage="javascript"type="text/javascript"
functiongetPeople(){
$('#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();//对divclass="dd"清空
$('.dd').append(data.d);//对divclass="dd"填写ajax返回值
$('#progress').css('visibility','hidden');//loading图片隐藏
varss=$('#Select3option:selected').val();
//根据用户选择的值格式化表单
if(ss=="score"){
$('.dd.scoretxt').each(function(i){
$($('.dd.scoretxt')[i]).append('inputtype="text"class="score"/');
});
}
else{
$('.dd.scoretxt').each(function(i){
$($('.dd.scoretxt')[i]).append('selectclass="score"optionvalue="合格"合格/optionoptionvalue="不合格"不合格/optionoptionvalue="未测"未测/option/select');
});
}
}
});
}
/script
后台代码
ajax.aspx中
[System.Web.Services.WebMethod()]
publicstaticstringGetPeople(stringunit)
{
System.Threading.Thread.Sleep(500);//延迟0.5秒
Pagepage=newPage();
UserScoreInputctl=(UserScoreInput)page.LoadControl("~\\Samples\\UserScoreInput.ascx");//加载表单控件
ctl.unit=unit;//传递给表单控件的参数
page.Controls.Add(ctl);
System.IO.StringWriterwriter=newSystem.IO.StringWriter();
HttpContext.Current.Server.Execute(page,writer,false);
stringoutput=writer.ToString();
writer.Close();
returnoutput;
15}
用户控件
UserScoreInput.ascx代码
1%@ControlLanguage="C#"AutoEventWireup="true"Inherits="UserScoreInput"ClassName="UserScoreInput"%
2
3scriptrunat="server"
4protectedoverridevoidOnLoad(EventArgse)
5{
6
7
8if(int.Parse(this.unit)1000)
9sqlDsOrders.SelectCommand="SELECT[ID],[name]FROM[personnel]WHEREunit='"+this.unit+"%'";
10
11base.OnLoad(e);
12}
13
14
15/script
16//此处采用两列重复
17asp:SqlDataSourceID="sqlDsOrders"runat="server"ConnectionString="%$ConnectionStrings:ConnectionString%"
18/asp:SqlDataSource
19asp:RepeaterID="List"DataSourceID="sqlDsOrders"runat="server"
20HeaderTemplate
21tablestyle="width:80%"
22tr
23th姓名/th
24th成绩/th
25th姓名/th
26th成绩/th
27/tr
28/HeaderTemplate
29ItemTemplate
30tr
31tdstyle="width:25%"
32divclass="hh"%#Eval("name")%/div
33/td
34tdstyle="width:25%"
35divclass="scoretxt"name='%#Eval("id")%'
36/td
37
38/ItemTemplate
39AlternatingItemTemplate
40
41tdstyle="width:25%"
42divclass="hh"%#Eval("name")%/div/td
43
44tdstyle="width:25%"
45divclass="scoretxt"name='%#Eval("id")%'
46/td
47/tr
48/AlternatingItemTemplate
49FooterTemplate
50/table
51/FooterTemplate
52/asp:Repeater
UserScoreInput.ascx.cs代码
1publicpartialclassUserScoreInput:UserControl
2{
3publicstringunit
4{
5get{return(string)ViewState["unit"];}
6set{ViewState["unit"]=value;}
7}
8
9}
有什么不足之处请大家留言,共同学习。