PHP ajax请求

这里讲的是原生的ajax数据请求，也是比较基础的，适合新手去看

一.效果图

1-1

1-2

HTML：

<!DOCTYPE>

<html>

<head>

body {

background:url(5.jpg)no-repeat;

background-size:cover;

font-family:'Open Sans',sans-serif;

font-size:100%;

}

</style>

</head>

<body>

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>

<i></i>

<form>

</form>

</div>

<br>

</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>

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>

body {

background:url(searchbg.jpg)no-repeat;

background-size:cover;

font-family:'Open Sans',sans-serif;

font-size:100%;

}

</style>

</head>

<body>

<option value="">选择一个网站:</option>

</select>

</form>

<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 "

姓氏

名字

</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>

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>

<body>

<form>

</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文件可以自己在网上找找

PHP ajax请求

推荐阅读更多精彩内容