ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、aj(2)_H5之家

uidchuli.php

1 <?php 2 $uid = $_POST["u"]; 3 include("../DBDA.class.php"); 4 $db = new DBDA(); 5 $sql = "select count(*) from login where username='{$uid}'"; 6 echo $db->StrQuery($sql); 7 ?>

4.动态调用数据库，搜索框里输入关键字，内容中含关键字的自动出现在输入框下面。

list.php

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> 2 <html xmlns=""> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <script src="../jquery-1.11.2.min.js"></script> 6 <title>无标题文档</title> 7 <style type="text/css"> 8 *{ margin:0px auto; padding:0px} 9 .l{ width:200px; height:30px; text-align:center; line-height:30px; vertical-align:middle; border-bottom:1px solid #60F} 10 </style> 11 </head> 12 13 <body> 14 <br /> 15 <div style="width:200px; height:35px; border:2px solid #60F"> 16 <input type="text" id="name" style="width:196px; height:31px" /> 17 </div> 18 <div id="list" style="width:200px; height:500px; border:2px solid #60F; border-top:0px"></div> 19 </body> 20 21 <script type="text/javascript"> 22 $("#name").keyup(function(){ 23 //取名称 24 var n = $(this).val(); 25 if(n!="") 26 { 27 //调ajx 28 $.ajax({ 29 url:"listchuli.php", 30 data:{n:n}, 31 type:"POST", 32 dataType:"TEXT", 33 success: function(data){ 34 var sz = data.split("|"); 35 36 var str = ""; 37 38 for(var i=0;i<sz.length;i++) 39 { 40 str = str+"<div class='l'>"+sz[i]+"</div>"; 41 } 42 $("#list").html(str); 43 44 } 45 46 }); 47 } 48 else 49 { 50 $("#list").html(""); 51 } 52 53 }) 54 55 </script> 56 57 </html>

listchuli.php

1 <?php 2 $name = $_POST["n"]; 3 include("../DBDA.class.php"); 4 $db = new DBDA(); 5 $sql = "select areaname from chinastates where areaname like'%{$name}%'"; 6 echo $db->StrQuery($sql); 7 ?>

分享给小伙伴们：

本文标签： ajax/">ajax

发表评论愿您的每句评论，都能给大家的生活添色彩，带来共鸣，带来思索，带来快乐。

本类最热新闻