AJAX实现无刷新检测用户名功能

2024-10-15 10:50:59

先来看看原理图

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>ajax无刷新检测</title>
  <style type="text/css">
   body{margin:0;padding:0;}.content{width:800px;margin:0 auto;}ul,li{list-style: none;margin:0;padding:0;}
   tr{width:200px;}td{width:80px;padding:5px 0;}td input,textarea{border: 1px solid #79ABFE;}
  </style>
 </head>
 <body>
  <div class="content">
   <script>
    myXmlHttpRequest.ContentType=("text/xml;charset=UTF-8");
    //创建ajax引擎(1号线)
    function getXmlHttpObject(){
     var xmlHttpRequest;
     //不同浏览器获取对象xmlHttpRequest方法不一样
     if(window.ActiveXObject){
      xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
     }else{
      xmlHttpRequest=new XMLHttpRequest();
     }
     return xmlHttpRequest;
    }
    //验证用户名是否存在
    var myXmlHttpRequest="";//因为chuli也用到了,所以要定义为全局变量
    //创建方法(2号线 http请求)
    function checkName(){
     //创建对象
     myXmlHttpRequest=getXmlHttpObject();
     //判断是否创建ok
     if(myXmlHttpRequest){
      //通过myXmlHttpRequest对象发送请求到服务器的某个页面
      var url="./registerPro1.php";
      //要发送的数据
      var data="username="+$('username').value;
      //打开请求
      myXmlHttpRequest.open("post",url,true);//ture表示使用异步机制
      //POST方法
      myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
      //指定回调函数,chuli是函数名(registerPro里的数据返回给chuli函数)
      myXmlHttpRequest.onreadystatechange=chuli;
      //开始发送数据,如果是get请求则填入null即可,如果是post请求则填入实际的数据
      myXmlHttpRequest.send(data);
     }
    }
    //回调函数(4号线)
    function chuli(){
     //取出从registerPro.php页面返回的数据(4表示完成,200表示成功)
     if(myXmlHttpRequest.readyState==4){
      if(myXmlHttpRequest.status==200){
      //①、取出值,根据返回信息的格式定 text(html)
      //$('result').value=myXmlHttpRequest.responseText;
      //②、取出xml格式数据(解析)
      //获取mes节点、这里的mes返回的是节点列表(不知道有几个mes)
      //var mes=myXmlHttpRequest.responseXML.getElementsByTagName("mes");
      //取出mes节点值
      //mes[0]->表示取出第一个mes节点
      //mes[0].childNodes[0]->表示取出mes节点的第一个子节点
      //var mes_val=mes[0].childNodes[0].nodeValue;
      //$("result").value=mes_val;
      //③、json格式
      //var mes=myXmlHttpRequest.responseText;
      //使用eval函数,将mes字串转为对象
      //var mes_obj=eval("("+mes+")");
      //$('result').value=mes_obj.res;
      //③+、json格式扩展
      var mes=myXmlHttpRequest.responseText;
      var mes_obj=eval("("+mes+")");
      $('result').value=mes_obj[0].res;
      }
     }
    }
    //封装一个函数,通过id号获取对象
    function $(id){
     return document.getElementById(id);
    }
   </script>
   <br/>
   <strong style="color:red">发表留言</strong>
   <form action="#" method="POST" name="frm">
   <table cellpadding="0" cellspacing="0" >
    <tr>
     <td >留言标题:</td>
     <td><input type="text" name="title" autocomplete="off"/></td>
    </tr>
    <tr>
     <td>网名:</td>
     <td>
      <input id="username" onkeyup="checkName();" type="text" name="username" autocomplete="off"/>
      <td><input id="result" type="text" style="width:110px;font-size: 12px;border-width:0;" ></td>
     </td>
    </tr>
    <tr>
     <td>留言内容:</td>
     <td><textarea name="content" cols="26" rows="5" autocomplete="off"/ onclick="showNotice(this)"></textarea></td>
    </tr>
    <tr>
     <td></td>
     <td><input class="btn" type="submit" name="submit" value="提交"/></td>
    </tr>
   </table>
   </form>
  </div>
 </body>
</html>

registerPro1.php

<?php
 //将数据(text格式,xml格式,json格式)返回到ajax引擎(3号线 http响应 )

 //header("Content-Type: text/xml; charset=utf-8"); //告诉浏览器,返回的是xml格式
 header("Content-Type: text/html; charset=utf-8"); //告诉浏览器,返回的是text/json格式
 $username = $_POST["username"];
 //①
// if($username=="abc"){
//  echo '网名不可用';
// }else{
//  echo '网名可用';
// }
 //②
// $info="";
// if($username=="abc"){
//  $info.="<res><mes>网名不可用</mes></res>";
// }else{
//  $info.="<res><mes>网名可用</mes></res>";
// }
// echo $info;
 //③
// $info="";
// if($username=="abc"){
//  //这里的$info返回的是一个字串
//  $info.='{"res":"不可用","id":"123","age":"5"}';
// }else{
//  $info.='{"res":"可用","id":"3","age":"1"}';
// }
// echo $info;
 //③+
 $info="";
 if($username=="abc"){
  //这里的$info返回的是一个字串
  $info.='[{"res":"不可用","id":"123","age":"5"},{"res":"abc不可用","id":"3","age":"0"}]';
 }else{
  $info.='[{"res":"可用","id":"1","age":"15"},{"res":"可用","id":"83","age":"9"}]';
 }
 echo $info;
?>

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

jquery ajax 检测用户注册时用户名是否存在

首先需要一个添加年级的页面,暂时叫grade.htm 这个文件需要引入两个文件jquery.js(jquery框架文件)和grade.js(验证的单独文件). 下面的input用于输入用户名字,id="gradeInfo"是为了显示提示信息用的. grade.htm 复制代码代码如下: <input type="text" size="6" name="NAME" id="NAME"/><
PHP＋AJAX实现无刷新注册（带用户名实时检测）

很多时候,我们在网上注册个人信息,在提交完页面后,总得等待页面刷新来告诉我们注册是否成功,遇到网络差的时候,如果注册了一大串的东西,在经过漫长的等待页面刷新后,得到的确是"您的用户名已被使用"或XXXXXXX不合法,我想大家的心情一定特别不爽,今天就介绍个AJAX实现页面不刷新注册+实时检测用户信息的简单注册程序,希望对大家有所帮助.好的,先看注册界面代码: <table width="831" border="0" align="
ajax 检测用户名是否被占用

复制代码代码如下: //检测用户名是否被占用 function GetO(){ var ajax=false; try { ajax = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { ajax = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { ajax = false; } } if (!ajax && typeof X
PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程

PHP+Ajax检测用户名或邮件注册时是否已经存在是论坛或会员系统中常见的一个重要功能.本文就以实例形式简单描述这一功能的实现方法.具体步骤如下: 一.PHP检测页面 check.php页面代码如下: <script type="text/javascript" src="jiance.js"></script> <form name="myform" action="" method="
jQuery+Ajax实现用户名重名实时检测

利用jQuery框架,封装了底层的Ajax异步技术,通过简单的方法调用即可实现.这篇博客是针对用户注册时出现的用户名重名问题的自动检测,利用的技术是Ajax异步传输. register.jsp 注册显示页面 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTM
使用Ajax实时检测"用户名、邮箱等"是否已经存在

一个网站采用Ajax技术,不仅可以改善网站的用户体验性,而且大大节约了宝贵的带宽,减轻了服务器负荷(不再需要交互整个网页内容,而是局部). 今天分享一个"利用Ajax技术来检测用户名是否存在"的例子. 利用Ajax技术来检测用户名是否存在的原理流程图: 最终结果截图: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
Asp.net下利用Jquery Ajax实现用户注册检测（验证用户名是否存）

其中用到了jquery插件来验证用户名哦,这里是利用jquery ajax来验证用户名是否存在哦.大家看看效果图,后面将附上源码下载. jquery框架实现的ajax 验证用户名是否存在的部分JS 复制代码代码如下: $("#accounts").formValidator({onshow:"请输入用户名",onfocus:"用户名至少4个字符,最多10个字符",oncorrect:"该用户名可以注册"}).inputVal
AJAX实现无刷新检测用户名功能

先来看看原理图 register.php <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ajax无刷新检测</title> <style type="text/css"> body{margin:0;padding:0;}.content{width:800px;margin:0 auto;}ul,li{l
基于Ajax技术实现无刷新用户登录功能

代码如下: // JScript 文件 function usersLogon() { var userName = document.getElementById("txtuserName").value; var password = document.getElementById("txtpassword").value; var checkCode = document.getElementById("txtCheckCode").val
ajax实现无刷新上传文件功能

本文实例为大家分享了ajax实现无刷新上传文件功能的具体代码,供大家参考,具体内容如下详细代码如下 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>ajax无刷新上传文件</title> <script> window.o
jQuery的ajax中使用FormData实现页面无刷新上传功能

接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData接口.关于FormData,大家可以看MDN文档. 1,先看效果图期望的功能和效果很简单:点击页面中的上传文件表单控件,选择文件后点击"ajax提交",将文件上传至服务器,上传成功后,页面给出一个简单的提示. 2,前端的代
jsp+ajax实现无刷新(鼠标离开文本框即验证用户名)实现思路

jsp+ajax实现无刷新,鼠标离开文本框即验证用户名,操作如下:新建一个输入页面,起名为input.jsp, 复制代码代码如下: <%@ page contentType="text/html; charset=utf-8"%> <html> <head> <title>jsp+ajax实现无刷新_鼠标离开文本框即验证用户名</title> <meta http-equiv="Content-Type&qu
PHP+Ajax实现的检测用户名功能简单示例

本文实例讲述了PHP+Ajax实现的检测用户名功能.分享给大家供大家参考,具体如下: 一代码 fun.js: function chkUsername(username){ if(username==''){ //判断用户名是否为空 alert('请输入用户名!'); }else{ var xmlObj; //定义XMLHttpRequest对象 if(window.ActiveXObject){ //如果是浏览器支持ActiveXObjext则创建ActiveXObject对象 xmlObj
php+Ajax无刷新验证用户名操作实例详解

本文实例讲述了php+Ajax无刷新验证用户名操作.分享给大家供大家参考,具体如下: AJAX 简介 AJAX = Asynchronous JavaScript And XML(异步 JavaScript 及 XML) AJAX 是 Asynchronous JavaScript And XML 的首字母缩写. AJAX 并不是一种新的编程语言,而仅仅是一种新的技术,它可以创建更好.更快且交互性更强的 web 应用程序. AJAX 使用 JavaScript 在 web 浏览器与 web 服务
php+ajax实现无刷新文件上传功能(ajaxuploadfile)

本文实例为大家分享了php+ajax实现无刷新文件上传的具体代码,供大家参考,具体内容如下文件上传的表单格式 <form id="uploadform" enctype="multipart/form-data" name="uploadform" method="post" > <input id="fileToUpload" type="file" name=&q
基于jquery ajax 用户无刷新登录方法详解

Ajax框架就是提供模块化实现Ajax功能的集合,Ajax框架可以是各种语言实现的(比如SAJAX有各种语言的实现),Ajax只是jquery中的一部分, 实例1 复制代码代码如下: $.ajax({ type:'post',//可选get url:'action.php',//这里是接收数据的PHP程序 data:'data='dsa',//传给PHP的数据,多个参数用&连接 dataType:'text',//服务器返回的数据类型可选XML ,Json jsonp script html
jQuery+Ajax实现无刷新操作

使用jQuery实现Ajax操作想要实现Ajax页面无刷新效果,但是直接利用Ajax代码实在有些麻烦,所以就想用jQuery实现.jQuery很好的封装了Ajax的核心对象XMLHTTPRequest.所以用起来非常方便. 首先,创建服务器端代码,这里用Servlet实现服务器端的数据处理:代码如下: protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws Serv

AJAX实现无刷新检测用户名功能

相关推荐

随机推荐