首先使用PHPAmyadmin数据库新建一个表写出你需要用的内容,

同样使用form提交到数据库里面,在form里面写上内容,在这里就不需要做跳转页面了,因为不需要,具体如下所示:

 1 <html>
 2 <head>
 3     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
 4     <script type="text/javascript" src="ajax.js"></script>//链接
 5 </head>
 6
 7 <body>
 8
 9 <form action="" >
10     用户名: <input type="text" name="user" id="""/>//给他一个名字;我们这里只做了一个比例就是用户名;如需要全部的话在每个input里面加个name;
11     <span style="color: red;font-size: 14px" id="tishi"></span>//返回的字体颜色
12     <br/>
13     密  码: <input type="password" name=""/> <br/>
14
15     <input type="submit" value="提交" name="submit"/>
16 </form>
17 </body>
18
19 </html>

再新建一个PHP,在里面写上连接数据库的代码以及判断用户名有没有注册,判断数据库当中有没名字,具体代码如下所示:

这里为什么要用GET接收呢?

因为GET是实用于A标签和JS的,POST是实用于PHP的,而我们这里是通过链接JS的,

isset//判断是否是布尔类型的是否有值,
 1 <?php
 2 if(isset($_GET['user'])){
 3     $user = $_GET['user'];
 4
 5     $conn = mysql_connect("localhost","root","") or die("数据库连接失败".mysql_error());
 6     mysql_select_db("bbs");
 7     mysql_query("set names 'utf8'");
 8
 9     $sql = "select count(*) from users where userName='$user'";//查询数据库的表的内容;
10
11     $result = mysql_query($sql);
12     $row = mysql_fetch_row($result);
13
14     if($row[0]){
15         echo "该用户名已经被注册";
16     }else{
17         echo "该用户名还没有被使用过,可以注册";
18     }
19 }
20 ?>

新建一个JS文档写ajax内容,需要用到链接:  <script type="text/javascript" src="自己命的名字.js"></script>

接下来就是代码:

不懂的去下个ajax基础,

 1 var xmlHttp;
 2 function getXmlHttp(){
 3     if(window.ActiveXObject){
 4         xmlHttp = new ActiveXObject("MICROSOFT.XMLHTTP");
 5     }else if(window.XMLHttpRequest){
 6         xmlHttp = new XMLHttpRequest();
 7     }
 8 }//上面这一块就是判断浏览器的语句,分别是谷歌,IE,火狐,
 9
10 function sendParam(url){//给这个函数一个参数
11     getXmlHttp();//这里是调用上面的函数,
12
13     xmlHttp.open("GET","check.php?user="+url,true);//使用GET方式传值,传到check.php,给他一个参数url,true就是使用AJAX,false就是不使用;
14 //    setRequestHeader("Content-Type","application/x-www-form-urlencoded");//这里是使用POST方式传值;
15     xmlHttp.onreadystatechange = getTxt;//回调函数,调用下面这个函数;
16     xmlHttp.send(null);//这句就是上面已经有true这里就填null;
17 }
18 function getTxt(){
19     if(xmlHttp.readyState == 4){判断这里如果等于四4就是完成;
20         if(xmlHttp.status == 200){判断等于200就是成功的时候;
21             var sp = document.getElementById("tishi");//获取页面上的ID
22             sp.innerHTML = xmlHttp.responseText;//返回页面上去;
23         }
24     }
25 }

转载于:https://www.cnblogs.com/ws3366/p/3714134.html

AJAX如何做出输入框提示!相关推荐

  1. yutons_sug搜索框提示插件||输入框提示插件

    样例: 引用的js文件: /*** @Title:搜索框提示插件||输入框提示插件 --只有干部任免列表中使用其他地方使用的是yutons-mods文件下yutons_sug.js* @Version ...

  2. ajax post 请求 一直提示 404 not found textStatus error

    2019独角兽企业重金招聘Python工程师标准>>> ajax post 请求 一直提示 404 not found textStatus error var dataParams ...

  3. TP框架中ajax post请求时提示404

    ajax post请求时提示404错误 TP框架中ajax post请求时提示404 找了半天是 控制器中方法有错误! 下次再遇到去控制器方法中找一步一步找,肯定能找到,我是单词拼错了! 转载于:ht ...

  4. h5输入框提示语 正常文本框提示语

    <input id="username" name="username" type="text" placeholder=" ...

  5. ajax 提示404 not found,ajax post 请求 一直提示 404 not found textStatus error

    2019独角兽企业重金招聘Python工程师标准>>> ajax post 请求 一直提示 404 not found textStatus error var dataParams ...

  6. Ajax在火狐下提示跨域问题的解决方案

    今天再用ajax写头像上传的时候,出现了跨域问题,在网上百度了好久,没有百度到,最后经过我不断的钻研,终于找到了问题的结症,其实这个问题,需要在本地配置一个服务器环境,在服务器的环境下运行,所提示的错 ...

  7. ajax实现关联词提示

    直白一点,就是这样的效果: 这里需要实现的是局部数据传输,而不是整个页面的加载,就用到了ajax 这里简单的实现了这个功能 如果输入的关键字不在数据库里就不会提示关键词: 代码如下: HTML部分 & ...

  8. [Ajax] jQuery中的Ajax -- 03-搜索框提示效果

    案例 搜索框提示效果 平常说异步交互的时候,大多数想到的是三级联动,但是根据百度搜索框的样式发现,搜索框提示也是异步交互 代码下载地址 从效果中可以看出 在不输入内容的情况下不显示 输入有内容显示内容 ...

  9. ajax 自动提示信息,自动提示使用AJAX

    我想实现自动提示文本box.I已经检查了其他职位似乎没有任何要工作我,我无论是在Web应用程序试图与website.Please在我的代码计算outthe错误英寸当我在文本框中键入字母时,什么都不会发 ...

最新文章

  1. android 相机智能补光,美图秀秀智能补光功能应用详解
  2. 基于MSM 的tomcat session 共享
  3. feture selection
  4. 《研磨设计模式》chap6 工厂模式factory(1)模式简介
  5. Winform中怎样跨窗体获取另一窗体的控件对象
  6. 版本控制系统客户端VisualSVN的安装与使用(for Visual Studio)
  7. 建立单独的解决方案来开发DNN模块
  8. 【转载保存】B+树索引原理以及应用案例
  9. CSS 相邻选择器(七)
  10. 基于JavaWeb的房屋出租管理系统设计与实现
  11. matlab 输入数据类型,Matlab数据类型及基本输入输出
  12. 浏览器的语音识别功能
  13. 微信时代的巨大冲击 QQ空间面临艰难转型
  14. python考试分几级_全国计算机等级考试2级分几类?到底怎么考啊?
  15. spark初始:spark腾讯雅虎优酷成功应用解析
  16. 虚拟机VMware workstation安装gho系统详解
  17. excel中插入的图表保存时提示 无法保存 html,excel表格保存不了的解决方法步骤...
  18. 红米手机H5布局压扁
  19. HTML5+CSS3小实例:简单又好看的加载动画效果
  20. html怎么设置下划线形状,科技常识:CSS如何给文字添加下划线样式

热门文章

  1. javaweb 图书管理系统完整代码_Java Web安全代码审计(一)
  2. linux中特殊字符反引号,linux中的特殊符号$ ‘’ 反引号 反斜杠
  3. 接口上加@feignclient还有实现类_类接口的实现及应用
  4. html瀑布流视频列表,StaggeredGridLayoutManager实现瀑布流视频列表和头部广告位以及分栏Header条...
  5. 算法提高 质因数2(java)
  6. SpringBoot项目集成Mybatis Plus(五)条件构造器
  7. div中的p标签于img设置同一水平_HTML网页制作常用标签及说明——前端开发入门...
  8. Java 算法 校门外的树
  9. vimpython配色_超漂亮 vim 配置:space-vim
  10. c 连接mysql数据库查询_C语言实现访问及查询MySQL数据库的方法