PHP示例AJAX Live搜索

在創建使用PHP和XML的網頁時，我比較新，但我對在W3S學校看到的Somthine感興趣。我想創建一個AJAX實時搜索到那裏顯示的那個例子頁面，但首先我需要幫助學習如何使它運行。（http://www.w3schools.com/php/php_ajax_livesearch.asp）我複製粘貼在網站的三個代碼文件，當我點擊HTML文件我得到的是一個空的表單框。我需要以某種方式將此鏈接與MySql？如果是的話，我該怎麼做呢？PHP示例AJAX Live搜索

的index.html：

<html> 
<head> 
<script> 
function showResult(str) 
{ 
if (str.length==0) 
    { 
    document.getElementById("livesearch").innerHTML=""; 
    document.getElementById("livesearch").style.border="0px"; 
    return; 
    } 
if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    {// code for 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> 
<input type="text" size="30" onkeyup="showResult(this.value)"> 
<div id="livesearch"></div> 
</form> 

</body> 
</html>

livesearch.php：

<?php 
$xmlDoc=new DOMDocument(); 
$xmlDoc->load("links.xml"); 

$x=$xmlDoc->getElementsByTagName('link'); 

//get the q parameter from URL 
$q=$_GET["q"]; 

//lookup all links from the xml file if length of q>0 
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 ($y->item(0)->nodeType==1) 
    { 
    //find a link matching the search text 
    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>"; 
     } 
     } 
    } 
    } 
} 

// Set output to "no suggestion" if no hint were found 
// or to the correct values 
if ($hint=="") 
    { 
    $response="no suggestion"; 
    } 
else 
    { 
    $response=$hint; 
    } 

//output the response 
echo $response; 
?>

links.xml：

<!-- Edited by XMLSpy® --><pages><link><title>HTML a tag</title><url>http://www.w3schools.com/tags/tag_a.asp</url></link><link><title>HTML br tag</title><url>http://www.w3schools.com/tags/tag_br.asp</url></link><link><title>CSS background Property</title><url>http://www.w3schools.com/cssref/css3_pr_background.asp</url></link><link><title>CSS border Property</title><url>http://www.w3schools.com/cssref/pr_border.asp</url></link><link><title>JavaScript Date Object</title><url>http://www.w3schools.com/jsref/jsref_obj_date.asp</url></link><link><title>JavaScript Array Object</title><url>http://www.w3schools.com/jsref/jsref_obj_array.asp</url></link></pages>

感謝所有幫助

來源

2013-06-19 Gary Oak

您可能想查看選擇的主文件搜索。這真的很棒！ – Si8

您是否將這些文件複製到您的網絡服務器？這個例子不需要數據庫訪問。所有相關數據都在.xml文件中 – sofl

@ sofl我將其複製到文本處理程序並保存在文檔文件夾中的文件夾中。沒有一個是在網絡服務器，因爲我不認爲我需要它，但當它沒有工作時感到驚訝。他們只是三個分開的文件在同一個文件夾中，與我複製粘貼的方式不變。 @ SiKni8你可以放置一個鏈接，谷歌只是給聯盟的傳說東西 –

我複製到這個文本牧馬人，並保存在文件夾的文件夾。沒有一個是在網絡服務器，因爲我不認爲我需要它，但當它沒有工作時感到驚訝。

PHP腳本由安裝了PHP引擎的Web服務器執行。要正確執行livescript.php，請首先在您的計算機上安裝Web服務器軟件或從託管服務提供商租用託管空間。

當您獲得Web服務器時，請將您的文件安裝到您的Web服務器引用的目錄中（通常在基於Unix的服務器上爲/home/<username>/public_html），並通過http://yourdomain.com/index.html訪問您的HTML腳本。

來源

2013-06-19 14:35:07

是的，謝謝，我沒有意識到，這將是一個問題。我真的不喜歡試驗服務器，但只要我把它放到public_html文件夾中，並在線檢查工作的搜索框。 –

看來你是使用簡單的JavaScript發送阿賈克斯請求jQuery要容易得多。你不必檢查瀏覽器，jQuery中很多其他的東西都被簡化了。現在的流量部分。

1.必須發生觸發ajax請求的事件。它可以是任何像模糊，焦點，點擊，加載，鼠標，鼠標在您的選擇。代碼可能看起來像這樣;

$($btn).click(function(){ 

insert your ajax request here 

})

這是說的按鈕被點擊

2.call一個Ajax。

$.ajax({ 

    url : "phpFile.php", 

    data : dataYouwantToSend, 

    success: function() { 

    code to do if the call is successful 
    } 

    })

在 phpFile.php

無論你回聲或打印在PHP文件將會顯示爲從文件響應

3.process在php文件中的數據。

例如如果你的PHP文件只包含

echo "hello world";

響應您的Ajax請求將只是hello world。

4.process在ajax success function

success : function (response){ //the variable in the function can be anything 
alert(response); 
}

例如上述響應將alert hello world

整個代碼是這樣的。這是html文件。

<input type="text" id="clickMe" /> 
<script src="ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script> 
$(function(){ 
$("#clickMe").click(function(){ 
$.ajax({ 
url : "phpFile.php", 
success : function(res) { 
alert(res); 
} 
}) 
}) 
}) 
</script>

這是PHP文件 phpFile.php

echo "Hello world";

來源

2013-06-19 14:27:26 developernaren

PHP示例AJAX Live搜索

回答

相關問題