PHP ajax請(qǐng)求

這里講的是原生的ajax數(shù)據(jù)請(qǐng)求，也是比較基礎(chǔ)的，適合新手去看

一.效果圖


1-1



1-2

HTML：

<!DOCTYPE>

<html>

<head>

<title>實(shí)時(shí)更新</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 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 瀏覽器執(zhí)行的代碼

? ? ? ? ? xmlhttp=new XMLHttpRequest();

}

else

? ? ? ? ? {

//IE6, IE5 瀏覽器執(zhí)行的代碼

? ? ? ? ? ? ? xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

///創(chuàng)建在服務(wù)器響應(yīng)就緒時(shí)執(zhí)行的函數(shù)

? ? ? ? xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 &&xmlhttp.status==200)

{

document.getElementById("txtHint").innerHTML=xmlhttp.responseText;

}

}

////向服務(wù)器上的文件發(fā)送請(qǐng)求

? ? ? ? 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基本上所有的基礎(chǔ)的ajax請(qǐng)求都一樣

1.獲取字符串

2.進(jìn)行瀏覽器的兼容

3.進(jìn)行判斷

4.發(fā)送url請(qǐng)求。


PHP：

/**

* Created by PhpStorm.

* User: lck

* Date: 2018/9/22 0022

* Time: 16:17

*/

////把模擬的數(shù)據(jù)放入到數(shù)組中

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

//從請(qǐng)求URL地址中獲取 q 參數(shù)

$q=$_GET["q"];

//查找是否由匹配值， 如果 q>0

if (strlen($q)>0)

{

? ? $hint="";

? ? for ($i=0;$i<count($a);$i++)

{

? ? ? ? ////判斷轉(zhuǎn)換成小寫后,遍歷截取長(zhǎng)度，一個(gè)個(gè)去判斷

? ? ? ? if (strtolower($q)==strtolower(substr( $a[$i],0,strlen($q))))

{

? ? ? ? ? ? ? if ($hint=="")

{

? ? ? ? ? ? ? ? ? $hint=$a[$i];

}

? ? ? ? ? ? ? ////如果沒有則沒有如果則不斷的累加上來

? ? ? ? ? ? ? else

? ? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? ? ? $hint=$hint.",".$a[$i];

}

}

}

? ? // 如果沒有匹配值設(shè)置輸出為 "no suggestion"

? ? if ($hint == "")

{

? ? ? ? $response="沒有您要的結(jié)果！";

}

? ? else

? ? {

? ? ? ? $response=$hint;

}

? ? echo $response;

}

?>

這里的思路也很簡(jiǎn)單：

1.接受前段傳來的值并判斷是否為空

2.把數(shù)組里面的每一個(gè)詞進(jìn)行遍歷，然后看看哪一個(gè)是先符合條件的并顯示出來，如果有第二個(gè)字符也匹配的就進(jìn)行字符串的拼接。

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>下拉搜索數(shù)據(jù)庫</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 瀏覽器執(zhí)行代碼

? ? ? ? ? ? ? ? xmlhttp=new XMLHttpRequest();

}

else

? ? ? ? ? ? {

// IE6, IE5 瀏覽器執(zhí)行代碼

? ? ? ? ? ? ? ? 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="">選擇一個(gè)網(wǎng)站:</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>個(gè)人信息顯示在這里……</b></div>

</body>

</html>

思路其實(shí)和前面一樣，變得只是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 "請(qǐng)進(jìn)行選擇！";

? ? exit;

}

$conn=new mysqli("$servername","$usename","$password","$dbname");

///防止編碼錯(cuò)誤

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.打開數(shù)據(jù)庫，根據(jù)傳來的值講數(shù)據(jù)以html形式展示。


三.效果圖


3-1



3-2




1.html:

<html>

<head>

<title>實(shí)時(shí)搜索</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 瀏覽器執(zhí)行

? ? ? ? ? ? ? ? xmlhttp=new XMLHttpRequest();

}

else

? ? ? ? ? ? {// IE6, IE5 瀏覽器執(zhí)行

? ? ? ? ? ? ? ? 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;

}

// 輸出結(jié)果

echo $response;

////https://blog.csdn.net/swimming_in_it_/article/details/78489053

///

/// 封裝后的ajax請(qǐng)求

?>




3.ajax文件可以自己在網(wǎng)上找找

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容