PHP Пример AJAX Live Search

Я относительно новичок в создании веб-страниц, использующих PHP и XML, но меня интересует то, что я видел в школах W3S. Я хочу создать живой поиск AJAX в тот, который показан на странице примера, но сначала мне нужна помощь, чтобы узнать, как его запустить. (http://www.w3schools.com/php/php_ajax_livesearch.asp). Я копирую вставные три файла кода, которые находятся на веб-сайте, и когда я нажимаю кнопку html-файл, который я получаю, представляет собой пустое поле формы. Мне нужно каким-то образом связать это с MySql? если да, то как мне это сделать?PHP Пример AJAX Live Search

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 i скопировали это в текстовый ретранслятор и сохранили в папке в папке с документами. Ничего из этого нет в веб-сервере, так как я не думал, что мне это нужно, но был удивлен, когда он не работал. они всего три отдельных файла в одной папке, неизмененные от того, как я копировал вставку. @ SiKni8 Можете ли вы поместить ссылку, google просто дает лиги легендарных вещей –

я скопировал это в текст Wrangler и сохранены в папке в папке документов. Ничего из этого нет в веб-сервере, так как я не думал, что мне это нужно, но был удивлен, когда он не работал.

PHP-скрипты выполняются веб-сервером с установленным механизмом PHP. Чтобы правильно выполнить livescript.php, сначала установите программное обеспечение веб-сервера на свой компьютер или арендуйте место на хостинге у хостинг-провайдера.

Когда вы приобрели веб-сервер, установите файлы в каталог, на который ссылается ваш веб-сервер (часто /home/<username>/public_html на серверах на базе Unix) и получите доступ к своему HTML-скрипту через: http://yourdomain.com/index.html.

источник

2013-06-19 14:35:07

Да, спасибо, я не понял, что это будет проблемой. Мне не очень нравится экспериментировать с сервером, но как только я поместил его в папку public_html и проверил онлайн, окно поиска работало. –

кажется, что вы используя простой javascript для отправки запрос ajax намного проще с jQuery. Вам не нужно проверять браузеры, и многое другое упрощается в jQuery. Теперь для части потока.

1. Событие должно произойти, чтобы вызвать запрос ajax. Это может быть что угодно, как размытие, фокус, щелчок, загрузка, мышь, мышление по вашему выбору. код может выглядеть следующим образом;

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

insert your ajax request here 

})

Это говорит о том, что кнопка была нажата

2.call Аякса.

$.ajax({ 

    url : "phpFile.php", 

    data : dataYouwantToSend, 

    success: function() { 

    code to do if the call is successful 
    } 

    })

3.process данных в PHP файле

в phpFile.php

что вы эхо или печать в файл PHP собирается показать, как ответ из файла.

, например если файл PHP содержит только

echo "hello world";

ответ на ваш АЯКС запроса будет только 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 Search

ответ

Смежные вопросы