这里讲的是原生的ajax数据请求，也是比较基础的，适合新手去看
一.效果图
1-1
1-2
HTML：
<!DOCTYPE>
<html>
<head>
<title>实时更新</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Flat Search Box Responsive, Login form web template, Sign up Web Templates, Flat Web Templates, Login signup Responsive web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
background:url(5.jpg)no-repeat;
background-size:cover;
font-family:'Open Sans',sans-serif;
font-size:100%;
}
</style>
</head>
<body>
<script type="application/javascript">
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行的代码
xmlhttp=new XMLHttpRequest();
}
else
{
//IE6, IE5 浏览器执行的代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
///创建在服务器响应就绪时执行的函数
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 &&xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
////向服务器上的文件发送请求
xmlhttp.open("GET","ajaxphp.php?q="+str,true);
xmlhttp.send();
}
</script>
<div class="search">
<i></i>
<div class="s-bar">
<form>
<input type="text" onkeyup="showHint(this.value)" value="Search Template" onfocus="this.value ='';" onblur="if (this.value =='') {this.value ='Search Template';}">
<input type="submit" value="Search"/>
</form>
</div>
</div>
<br>
<br>
<p style="color:white;margin-left:30%">返回值:<span id="txtHint"></span></p>
</body>
</html>
这里的html基本上所有的基础的ajax请求都一样
1.获取字符串
2.进行浏览器的兼容
3.进行判断
4.发送url请求。
PHP：
/**
* Created by PhpStorm.
* User: lck
* Date: 2018/9/22 0022
* Time: 16:17
*/
////把模拟的数据放入到数组中
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";
//从请求URL地址中获取 q 参数
$q=$_GET["q"];
//查找是否由匹配值， 如果 q>0
if (strlen($q)>0)
{
$hint="";
for ($i=0;$i<count($a);$i++)
{
////判断转换成小写后,遍历截取长度，一个个去判断
if (strtolower($q)==strtolower(substr( $a[$i],0,strlen($q))))
{
if ($hint=="")
{
$hint=$a[$i];
}
////如果没有则没有如果则不断的累加上来
else
{
$hint=$hint.",".$a[$i];
}
}
}
// 如果没有匹配值设置输出为 "no suggestion"
if ($hint == "")
{
$response="没有您要的结果！";
}
else
{
$response=$hint;
}
echo $response;
}
?>
这里的思路也很简单：
1.接受前段传来的值并判断是否为空
2.把数组里面的每一个词进行遍历，然后看看哪一个是先符合条件的并显示出来，如果有第二个字符也匹配的就进行字符串的拼接。
3.如果没有匹配的就输出没有建议
二.效果图
2-1
2-2
1.HTML：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>下拉搜索数据库</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
function showSite(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 &&xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","mysql_search.php?q="+str,true);
xmlhttp.send();
}
</script>
<style type="text/css">
body {
background:url(searchbg.jpg)no-repeat;
background-size:cover;
font-family:'Open Sans',sans-serif;
font-size:100%;
}
</style>
</head>
<body>
<form style="margin-left:20%;margin-top:20%">
<select name="users" onchange="showSite(this.value)">
<option value="">选择一个网站:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</form>
<br><br><br><br><br><br><br>
<div id="txtHint" style="margin-left:20%;"><b>个人信息显示在这里……</b></div>
</body>
</html>
思路其实和前面一样，变得只是PHP文件
2.PHP
/**
* Created by PhpStorm.
* User: lck
* Date: 2018/9/22 0022
* Time: 18:03
*/
$servername="localhost";
$usename="root";
$password="";
$dbname="myDB";
$q=isset($_GET["q"])?intval($_GET["q"]):"";
if (empty($q))
{
echo "请进行选择！";
exit;
}
$conn=new mysqli("$servername","$usename","$password","$dbname");
///防止编码错误
mysqli_set_charset($conn,"utf8");
$sql="SELECT * FROM MyGuests WHERE id = '".$q."'";
$reuslt=mysqli_query($conn,$sql);
echo "
Id
姓氏
名字
</tr>";
while ($row=mysqli_fetch_array($reuslt))
{
echo "<tr>";
echo "<td>" . $row['id'] . "</td>";
echo "<td>" . $row['firstname'] . "</td>";
echo "<td>" . $row['lastname'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($conn);
?>
思路：
1.获取前端传来的值，并判断其是否为空。
2.打开数据库，根据传来的值讲数据以html形式展示。
三.效果图
3-1
3-2
1.html:
<html>
<head>
<title>实时搜索</title>
<script>
function showResult(str)
{
if (str.length==0)
{
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
return;
}
if (window.XMLHttpRequest)
{// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行
xmlhttp=new XMLHttpRequest();
}
else
{// IE6, IE5 浏览器执行
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 &&xmlhttp.status==200)
{
document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
document.getElementById("livesearch").style.border="1px solid #A5ACB2";
}
}
xmlhttp.open("GET","livesearch.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<body>
<form>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>
</body>
</html>
2.PHP
/**
* Created by PhpStorm.
* User: lck
* Date: 2018/9/23 0023
* Time: 15:58
*/
$xmldoc=new DOMDocument();
$xmldoc->load("links.xml");
$x=$xmldoc->getElementsByTagName("link");
////获取到url里面的q值
$q=$_GET["q"];
if (strlen($q)>0)
{
$hint="";
for ($i=0;$i<$x->length;$i++)
{
$y=$x->item($i)->getElementsByTagName("title");
$z=$x->item($i)->getElementsByTagName("url");
if ($x->item(0)->nodeType==1)
{
// 找到匹配搜索的链接
if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))
{
if ($hint=="")
{
$hint="<a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
else
{
$hint=$hint . "<br /><a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
}
}
}
}
// 如果没找到则返回 "no suggestion"
if ($hint=="")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
// 输出结果
echo $response;
////https://blog.csdn.net/swimming_in_it_/article/details/78489053
///
/// 封装后的ajax请求
?>
3.ajax文件可以自己在网上找找
网友评论