这里讲的是原生的ajax数据请求,也是比较基础的,适合新手去看
一.效果图
HTML:
body {
background:url(5.jpg)no-repeat;
background-size:cover;
font-family:'Open Sans',sans-serif;
font-size:100%;
}
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();
}
返回值:
这里的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 { ////判断转换成小写后,遍历截取长度,一个个去判断 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.如果没有匹配的就输出没有建议 二.效果图 1.HTML:
"http://www.w3.org/TR/html4/loose.dtd">
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();
}
body {
background:url(searchbg.jpg)no-repeat;
background-size:cover;
font-family:'Open Sans',sans-serif;
font-size:100%;
}
思路其实和前面一样,变得只是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
姓氏
名字
";
while ($row=mysqli_fetch_array($reuslt))
{
echo "
echo "
echo "
echo "
echo "
}
echo "";
mysqli_close($conn);
?>
思路:
1.获取前端传来的值,并判断其是否为空。
2.打开数据库,根据传来的值讲数据以html形式展示。
三.效果图
1.html:
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();
}
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="" .
$y->item(0)->childNodes->item(0)->nodeValue . "";
}
else
{
$hint=$hint . "
" .
$y->item(0)->childNodes->item(0)->nodeValue . "";
}
}
}
}
}
// 如果没找到则返回 "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文件可以自己在网上找找