首页 > 代码库 > AJAX如何做出输入框提示！

AJAX如何做出输入框提示！

2024-07-03 09:43:33   225人阅读

首先使用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="http://www.mamicode.com/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="http://www.mamicode.com/提交" 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="http://www.mamicode.com/自己命的名字.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 }

 

   

 

 


联系
我们