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">&nbsp;</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;

    }

最新文章

  1. 图的广度优先搜索（BFS）
  2. jQuery 查找父元素
  3. 微软Hololens学院教程-Hologram 211-Gestures（手势）【微软教程已经更新，本文是老版本】
  4. Nido.Common.Utilities.MD5类
  5. iptables的配置文件/etc/sysconfig/iptables不存在怎么办
  6. 解决jmeter乱码问题（改配置文件）
  7. 简易-五星评分-jQuery纯手写
  8. java IO之 编码 （码表 编码 解码 转换流）
  9. java基础进阶一：String源码和String常量池
  10. Windows 安装 Vue
  11. linux服务器后台运行服务
  12. SQL中的ALL,ANY,SOME的用法
  13. mysql学习笔记--列属性
  14. Sublime Text3—系统设置
  15. node调试工具--nodemon
  16. python 加密 hashlib与hmac模块
  17. 笔记1：jmeter性能测试使用示例（原文：http://blog.csdn.net/zhongweijian/article/details/7619319）
  18. iOS单元測试：Specta + Expecta + OCMock + OHHTTPStubs + KIF
  19. Laravel 之父：让 Laravel、Symfony、 Zend 来一场公平的性能测试
  20. Win10 TensorFlow（gpu）安装详解

热门文章

  1. 部署Zipkin分布式性能追踪日志系统的操作记录
  2. usb驱动开发7之接口描述符
  3. git流程及操作
  4. [转]在 Eclipse 中嵌入 NASA World Wind Java SDK
  5. ace布置小作业: 制作一个简单的电话号码归属地查询软件:JSON解析和Volly发送get请求
  6. 在View页面，使用@if(){ }输出判断正确的内容
  7. ASP.NET MVC 5 入门教程 (3) 路由route
  8. 使用线程池模拟处理耗时任务，通过websocket提高用户体验
  9. libtool: Version mismatch error 解决
  10. bower入门