AJAX如何做出输入框提示!

首先使用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 }

AJAX如何做出输入框提示!,布布扣,bubuko.com

时间: 2024-10-14 13:54:39

AJAX如何做出输入框提示!的相关文章

【锋利的JQuery-学习笔记】输入框提示语-隐藏/显示

html <div class="search"> <input type="text" id="inputSearch" class="" value="请输入商品名称"/> </div> css: #inputSearch { border: 1px solid #BABEBF; color: #999999; font-size: 14px; height: 17p

小问题总结:鼠标点击到输入框(input)里的时候,输入框的提示消失,鼠标再移开,输入框提示出现

问题如标题: 鼠标点击到输入框(input)里的时候,输入框的提示消失,鼠标再移开,输入框提示出现.如图所示: 做法如下: <input type="text" name="name" id="name" class="ind_cont_input ind_cont_inputioce1" onfocus="if (value =='请输入2-5个中文名字'){value =''}" onblur=&

h5输入框提示语 + 正常文本框提示语

<input id="username" name="username" type="text" placeholder=" 请输入用户名/手机号" value="" style="width:100%;height:32px;border-style:none "/> placeholder=" 请输入用户名/手机号": html5输入框提示语.

jquery ajax请求方式与提示用户正在处理请稍等,等待数据返回时loading的显示

1.jquery ajax请求方式与提示用户正在处理请稍等 为了提高用户体验度,我们通常会给出 “正在处理,请稍等!”诸如此类的提示.我们可通过设置$.ajax()下的参数beforeSend()来实现 初次使用$.ajax() ,我没有去区分过ajax的异步请求和同步请求的不同,刚开始使用同步请求,以至后来出现许多问题,特别在体验度方面.异步和同步:同步意味着执行完一段程序才能执行下一段,它属于阻塞模式,其表现在网页上的现象是——浏览器会锁定页面(即所谓的页面假死状态),用户不能操作其它的,必

前端设计之输入框提示列表的效果

网页代码: <!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> <meta http-equiv="Co

搜索输入框提示--输入延迟,仿自动脑学院

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src='../node_modules/jquery/dist/jquery.min.js'></script> <style> html, body { font-fa

&lt;textarea&gt;输入框提示文字

背景 看了过时的资料,花费大把时间,不过也有收获,还是写写吧! 分析 有同学可能想到直接在<textarea>标签内输入帮助文字,但是这又有一个新问题--因为<textarea>设置了默认内容,如果用户不点击输入框(更改输入框的文本),而直接提交,就把默认的提示内容提交到后台了. 参考其他同学的解决方案:创建一个div,这个div包含了帮助文字.<textarea>,并通过css的position属性来控制,将帮助文字显示到<textarea>中,点击<

html5 input placeholder 占位符 输入框提示文本

Html5为输入框增加了新的属性,如 placeholder (占位符) ,它表示在文本框中预先放一些文本.占位符就是文本框可以接受的示例内容,一般颜色都是灰色.只要一石击文本框,他就消失了.如果把已输入的内容全部删除,然后单机文本框外部,它又会出现.试用JavaScript 当然也可以实现这个功能.但是html5只用一个 placeholder 属性就解决了问题. <!DOCTYPE html> <html lang="en"> <head> &l

jquery的ajax提交时loading提示的处理方法

方法1:使用ajaxStart方法定义一个全局的“加载中...”提示 $(function(){     $("#loading").ajaxStart(function(){         $(this).html("<img src='/jqueryStu/images/loading.gif' />");       });       $("#loading").ajaxSuccess(function(){