ajax进行即时验证实例详解,实现代码
分类:关于计算机

本文实例汇报了jQuery使用$.ajax进行即时表明的法门。分享给我们供大家仿效,具体如下:

在jquery中落到实处ajax加载的格局有成千上万种,不像在此在此以前的js的ajax唯有那一种,上边大家介绍jquery ajax达成部分加载方法总括,有供给明白的相恋的人可参看。

此处完毕应用jQuery和一般管理程序即时表达客户录入的学号是或不是再一次,当光标离开输入框即给出提醒。

<%@ 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>
$.ajax({
     url: "hotelQuery!queryHotelByCity.action",
     type: "post",
     dataType: "html",
     data: "queryHotel.city="+cityobj.value+"&queryHotel.wbcid="+wbcid,
     success: function(data){
      $("#hotellists").html($(data).filter("#list").html());
     }
  });

貌似管理程序Check.ashx代码:

代码剖判:

<%@ 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;
  }
 }
}

从上边的代码大家能够观看,再次来到的数量是data,不过我们假如在要ajax央浼的页面的那部分用id为list的三个DIV包围起来,那样大家经过$(data).filter("#list").html()就足以得到DIV中的HTML内容

瞩望本文所述对大家jQuery程序设计有着帮忙。

实例

您恐怕感兴趣的稿子:

  • jQuery Ajax 实例详解 ($.ajax、$.post、$.get)
  • JQuery.Ajax()的data参数类型实例详解
  • jquery+ajax实现登记实时验证实例详解
  • 实例详解jQuery Mockjax 插件模拟 Ajax 恳求
  • 轻量级asp.net ajax实施方案详解
  • 详解JavaScript for循环中发送AJAX须求难题
  • PHP+Ajax完毕无刷新分页实例详解(附demo源码下载)
  • 详解原生JavaScript实现jQuery中AJAX管理的主意
  • jquery ajax局地加载方法详解(完结代码)
  • Ajax基础详解教程(一)
  • Ajax基础详解教程(二)
$(document).ready(function(){
    function loadMessage()
    {
     $(this).html("loading...");
        var o = this;
        var xmlhttp = $.ajax({
           url:"Service/IndexLogin.aspx",
           dataType:"html",
           success:function(result)
           {
               $(o).html(result);
           }
       });
    }
    loadMessage.call($("#addinfo"));
});

<form action="#" method="post">
   <ul id="addinfo">
    加载中...
   </ul>
</form>

下面大家采用的是的主意,其实还应该有更轻便的法门啊,load() 方法通过 AJAX 央求从服务器加载数据,并把重返的数额放置到钦命的因素中

$(document).ready(function(){
 $("#addinfo").load("Service/IndexLogin.aspx", $("#addinfo li"));                    })

1. 加载一个php文件,该php文件不含传递参数$("#myID").load("test.php");

//在id为#myID的因素里导入test.php运维后的结果

2.  加载二个php文件,该php文件含有叁个传递参数

$("#myID").load("test.php",{"name" : "Adam"});

//导入的php文件含有贰个传递参数,类似于:test.php?name=Adam
3.  加载一个php文件,该php文件含有两个传递参数。注:参数间用逗号分隔

$("#myID").load("test.php",{"name" : "Adam" ,"site":"61dh.com"});

//导入的php文件含有多少个传递参数,类似于:test.php?name=艾达m&site=61dh.com
4.  加载三个php文件,该php文件以数组作为传递参数

$("#myID").load("test.php",{'myinfo[]', ["Adam", "61dh.com"]});

//导入的php文件含有三个数组传递参数。

如上那篇jquery ajax局地加载方法详解(完结代码)正是小编分享给大家的全体内容了,希望能给我们二个参阅,也盼望大家多多援救脚本之家。

你大概感兴趣的稿子:

  • jQuery Ajax 实例详解 ($.ajax、$.post、$.get)
  • JQuery.Ajax()的data参数类型实例详解
  • jquery+ajax完结挂号实时验证实例详解
  • jQuery使用$.ajax进行即时证实实例详解
  • 实例详解jQuery Mockjax 插件模拟 Ajax 供给
  • 轻量级asp.net ajax解决方案详解
  • 详解JavaScript for循环中发送AJAX央浼难题
  • PHP+Ajax完成无刷新分页实例详解(附demo源码下载)
  • 详解原生JavaScript达成jQuery中AJAX管理的法子
  • Ajax基础详解教程(一)
  • Ajax基础详解教程(二)

本文由正版必中一肖图发布于关于计算机,转载请注明出处:ajax进行即时验证实例详解,实现代码

上一篇:Validate起首体验 下一篇:附demo示例源码,js插件实现异步上传
猜你喜欢
热门排行
精彩图文