http://www.kwstu.com/ArticleView/kwstu_201331316441313
貌似AJAX越来越火了，作为一个WEB程序开发者要是不会这个感觉就要落伍，甚至有可能在求职的时候屡被淘汰。我也是一个WEB程序开发者，当然我也要“随波逐流”一把，不然饭碗不保啊！
之前实现AJAX使用Javascript脚本一个一个敲出来的，很繁琐。学习 Jquery之后就感觉实现AJAX并不是那么的困难了，当然除了Jquery框架外还有其它的优秀框架这里我就着重说下比较流行的Jquery。 Jquery AJAX提交表单有两种方式，一是url参数提交数据，二是form提交（和平常一样在后台可以获取到Form表单的值）。在所要提交的表单中，如果元素 很多的话建议用第二种方式进行提交，当然你要是想练练“打字水平”的话用第一种方式提交也未尝不可，相信开发者都不想费白劲吧！废话不多说了贴实例。
首先要下载Jquery、Jquery.form这两个插件，网上很多的！
一：Url参数提交数据
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<script type ="text/javascript" src ="../js/jquery.js"></script><script type="text/javascript"> function checkCorpID()//检测客户编号是否可用 { if($.trim($("#txtF_CORPID")[0].value)=="")//txtF_CORPID是客户编号输入框 { alert("请输入客户编号!"); } else { $("#checkFlag").html("正在检测");//显示提示信息 $.ajax({ type: "get", url: "CheckCorpID.ashx", data: "ID="+$.trim($("#txtF_CORPID")[0].value),//提交表单，相当于CheckCorpID.ashx?ID=XXX success: function(msg){$("#checkFlag").html("");alert( msg ); } //操作成功后的操作！msg是后台传过来的值 }); } }</script> |
后台代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
if(context.Request.Params["ID"].ToString()!="") { Pxt.Logic.SYS.CORP_BASE_INFO cbiL = new Pxt.Logic.SYS.CORP_BASE_INFO(); bool flag=cbiL.checkCorpID(context.Request.Params["ID"].ToString()); if (flag) { context.Response.Write("该客户编号已被占用!"); } else { context.Response.Write("该客户编号可用!"); } } |
二：Form提交数据
前台代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
<script type ="text/javascript" src ="../js/jquery.js"></script> //必须要引用 <script type ="text/javascript" src ="../js/jquery.form.js"></script> //必须要引用 <script type="text/javascript"> // wait for the DOM to be loaded $(document).ready(function() { $('#Tip').hide();//显示操作提示的元素不可见 $('#form1').submit(function()//提交表单 { //alert("ddd"); var options = { target:'#Tip', //后台将把传递过来的值赋给该元素 url:'ReturnVisit.aspx?flag=do', //提交给哪个执行 type:'POST', success: function(){ alert($('#Tip').text());} //显示操作提示 }; $('#form1').ajaxSubmit(options); return false; //为了不刷新页面,返回false，反正都已经在后台执行完了，没事！ }); } ); </script><body> <form id="form1" runat="server"> <div> <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" class="tableCategory">客户回访</td> </tr> <tr> <td width="30%" class="tableBg1">客户名称：</td> <td class="tableBg2"> <asp:TextBox ID="txtF_CorpName" runat="server"></asp:TextBox> </td> </tr> <tr> <td width="30%" class="tableBg1">回访主题：</td> <td class="tableBg2"> <asp:TextBox ID="txtF_ReturnVisitTitle" runat="server"></asp:TextBox> </td> </tr> <tr> <td width="30%" class="tableBg1">联系人：</td> <td class="tableBg2"> <asp:TextBox ID="txtF_ContractPerson" runat="server"></asp:TextBox> </td> </tr> <tr> <td width="30%" class="tableBg1">联系人职务：</td> <td class="tableBg2"> <asp:TextBox ID="txtF_ContractPersonPosition" runat="server"></asp:TextBox> </td> </tr> <tr> <td width="30%" class="tableBg1">联系电话：</td> <td class="tableBg2"> <asp:TextBox ID="txtF_ContractPhone" runat="server"></asp:TextBox> </td> </tr> <tr> <td width="30%" class="tableBg1">回访时间：</td> <td class="tableBg2"> <asp:TextBox ID="txtF_ReturnVisitDate" runat="server"></asp:TextBox> </td> </tr> <tr> <td width="30%" class="tableBg1">回访内容：</td> <td class="tableBg2"> <asp:TextBox ID="txtF_ReturnVisitContent" runat="server"></asp:TextBox> </td> </tr> <tr> <td width="30%" class="tableBg1">回访相关文档：</td> <td class="tableBg2"> <asp:TextBox ID="txtF_ReturnVisitFile" runat="server"></asp:TextBox> </td> </tr> <tr> <td width="30%" class="tableBg1"> </td> <td class="tableBg2"> <asp:Button ID="Submit_BT" runat="server" Text="确定" CssClass="button" /> <input type="reset" class="button" value="还原" /> </td> </tr> </table> <span id="Tip"></span> </div> </form></body> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
protected void Page_Load(object sender, EventArgs e) { { if (Request.QueryString["flag"] != null && Request.QueryString["flag"].ToString() == "do") { Pxt.Logic.DBRec.ReturnVisit bll = new Pxt.Logic.DBRec.ReturnVisit(); if (bll.Add(model(0)) > 0) { Response.Write("操作成功！"); Response.End(); } } } } /// <summary> /// 根据不同需要，设定模型->获取模型 /// </summary> /// <param name="id">ID值</param> /// <returns></returns> private Pxt.Model.DBRec.ReturnVisit model(int id) {//获取表单值 string F_CorpName = Request.Form["txtF_CorpName"].ToString(); string F_ReturnVisitTitle = Request.Form["txtF_ReturnVisitTitle"].ToString(); string F_ContractPerson = Request.Form["txtF_ContractPerson"].ToString(); string F_ContractPersonPosition = Request.Form["txtF_ContractPersonPosition"].ToString(); string F_ContractPhone = Request.Form["txtF_ContractPhone"].ToString(); DateTime F_ReturnVisitDate = DateTime.Parse(Request.Form["txtF_ReturnVisitDate"].ToString()); string F_ReturnVisitContent = Request.Form["txtF_ReturnVisitContent"].ToString(); string F_ReturnVisitFile = Request.Form["txtF_ReturnVisitFile"].ToString(); string Refer = Session["username"].ToString(); DateTime DoTime = DateTime.Now.Date; Pxt.Model.DBRec.ReturnVisit model = new Pxt.Model.DBRec.ReturnVisit(); if (id > 0)//修改记录，否则表示增加记录 { model.ID = id; } model.F_CorpName = F_CorpName; model.F_ReturnVisitTitle = F_ReturnVisitTitle; model.F_ContractPerson = F_ContractPerson; model.F_ContractPersonPosition = F_ContractPersonPosition; model.F_ContractPhone = F_ContractPhone; model.F_ReturnVisitDate = F_ReturnVisitDate; model.F_ReturnVisitContent = F_ReturnVisitContent; model.F_ReturnVisitFile = F_ReturnVisitFile; model.Refer = Refer; model.DoTime = DoTime; return model; } |