PHP ajax請求

Ajax PHP · 發表 2018-09-25 11:13:53

摘要：這裡講的是原生的ajax資料請求，也是比較基礎的，適合新手去看一.效果圖 1-1 1-2 HTML： <!DOCTYPE> <html> <head&...

這裡講的是原生的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請求

您可能也會喜歡…