Heim > Web-Frontend > js-Tutorial > jQuery verwendet $.ajax für die sofortige Überprüfung_jquery

jQuery verwendet $.ajax für die sofortige Überprüfung_jquery

WBOY
Freigeben: 2016-05-16 15:26:57
Original
1367 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie jQuery $.ajax für die sofortige Überprüfung verwendet. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Verwenden Sie jQuery und allgemeine Verarbeitungsprogramme, um sofort zu überprüfen, ob die vom Benutzer eingegebene Studentennummer wiederholt wird. Wenn der Cursor das Eingabefeld verlässt, wird eine Eingabeaufforderung angezeigt.

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

91

92

93

94

95

96

97

98

99

100

101

102

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddStudent.aspx.cs" Inherits="AddStudent" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

 <title></title>

 <style type="text/css">

  .clsShow

  {

   font-size: 13px;

   border: solid 1px #cc3300;

   padding: 2px;

   display: none;

   margin-bottom: 5px;

   background-color: #ffe0a3;

  }

 </style>

 <script type="text/javascript" src="Scripts/jquery-1.4.2.js"></script>

 <script type="text/javascript">

  $(function () {

   $("#btnSave").click(function () {

    if ($(".clsShow").html().toString() != "")//存在提示信息,则不允许提交表单

     return false;

    else

     return true;

   });

   $("#txtNum").focus(); //输入焦点

   $("#txtNum").keydown(function (event) {

    if (event.which == "13") {//回车键,移动光标到密码框

     $("#txtName").focus();

     $("#txtNum").trigger("blur");

    }

   });

   $("#txtNum").blur(function () {

    //获取学号

    var strTxtName = encodeURI($("#txtNum").val());

    //开始发送数据

    $.ajax

    ({ //请求验证学号是否重复

     url: "Check.ashx",

     type: "post",

     //传送请求数据

     data: { txtNum: strTxtName },

     success: function (strValue) { //登录成功后返回的数据

      //根据返回值进行状态显示

      if (strValue == "True") {//注意是True,不是true

       $(".clsShow").css("display", "inline");

       $(".clsShow").html("学号已存在,请修改!");

      }

      else {

       $(".clsShow").hide(); //就是把display属性变成none

       $(".clsShow").html("");

      }

     }

    })

   })

  })

 </script>

</head>

<body>

 <form id="form1" runat="server">

 <div>

  学号:<asp:TextBox

   ID="txtNum" runat="server"></asp:TextBox>

  <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"

   ControlToValidate="txtNum" ErrorMessage="不能为空"></asp:RequiredFieldValidator>

  <div class="clsShow"></div>

  <br />

  姓名:<asp:TextBox ID="txtName" runat="server"></asp:TextBox>

  <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"

   ControlToValidate="txtName" ErrorMessage="不能为空"></asp:RequiredFieldValidator>

  <br />

  数学:<asp:TextBox

   ID="txtMath" runat="server"></asp:TextBox>

  <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server"

   ControlToValidate="txtMath" ErrorMessage="不能为空"></asp:RequiredFieldValidator>

  <asp:RangeValidator ID="RangeValidator1" runat="server"

   ControlToValidate="txtMath" ErrorMessage="分数在0-100之间" MaximumValue="100"

   MinimumValue="0" Type="Integer"></asp:RangeValidator>

  <br />

  英语:<asp:TextBox ID="txtEnglish" runat="server"></asp:TextBox>

  <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server"

   ControlToValidate="txtEnglish" ErrorMessage="不能为空"></asp:RequiredFieldValidator>

  <asp:RangeValidator ID="RangeValidator2" runat="server"

   ControlToValidate="txtEnglish" ErrorMessage="分数在0-100之间" MaximumValue="100"

   MinimumValue="0" Type="Integer"></asp:RangeValidator>

  <br />

  语文:<asp:TextBox ID="txtChinese" runat="server"></asp:TextBox>

  <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server"

   ControlToValidate="txtChinese" ErrorMessage="不能为空"></asp:RequiredFieldValidator>

  <asp:RangeValidator ID="RangeValidator3" runat="server"

   ControlToValidate="txtChinese" ErrorMessage="分数在0-100之间" MaximumValue="100"

   MinimumValue="0" Type="Integer"></asp:RangeValidator>

  <br />

  <asp:Button ID="btnSave" runat="server" Text="保存" onclick="btnSave_Click" />

  <asp:Button ID="btnBack" runat="server" Text="返回" CausesValidation="False"

   onclick="btnBack_Click" />

  <asp:Label ID="lblMsg" runat="server"></asp:Label>

 </div>

 </form>

</body>

</html>

Nach dem Login kopieren

Allgemeiner Handler Check.ashx-Code:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<%@ WebHandler Language="C#" class="Check" %>

using System;

using System.Web;

public class Check : IHttpHandler {

 public void ProcessRequest (HttpContext context) {

  context.Response.ContentType = "text/plain";

  string num = context.Request["txtNum"].ToString();

  bool result = false;

  if(num=="12")//为了简化代码,没有访问数据库。实际项目应查询数据库。

  {

   result = true;

  }

  context.Response.Write(result);

 }

 public bool IsReusable {

  get {

   return false;

  }

 }

}

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage