AJAX . data ophalen uit mySQL en resultaat weergeven..

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Www JdeRuijterNL

www JdeRuijterNL

05/09/2010 12:26:06
Quote Anchor link
Om maar gelijk met de deur in huis te vallen, het volgende:

Ik heb een form:(ROOT/)
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
<p>Zoek resultaat: <span id="txtResult"></span></p>
<form class="form_border" action="http://www.site.nl/" method="post">

<p>    
<input onkeyup="search(this.value); id="zoekterm" type="text" name="zoekterm" />
<input type="submit" name="zoeken" value="zoek" />
</p>
                            
</form>


Die tijdens het typen deze date moet ophalen (voor live resultaat) (ROOT/inc/ajax_zoek.php)
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<?php
require_once("initialize.php");
$query=$_GET['q'];
    $mysql2 = "SELECT tags FROM nieuws WHERE tags ='".$query."'" ;
    $tags = Blog_get::find_by_sql($mysql2);


//get the q parameter from URL

//lookup all hints from array if length of q>0
if (strlen($query) > 0)
  {
  $result="";
  for($i=0; $i<count($tags); $i++)
    {
    if (strtolower($query)==strtolower(substr($tags[$i],0,strlen($query))))
      {
      if ($result=="")
        {
        $result=$tags[$i];
        }
      else
        {
        $result=$result." , ".$tags[$i];
        }
      }
    }
  }

// Set output to "No Search Results Found" if no results were found
// or to the correct values
if ($result == "")
  {
  $response="Geen resultaat";
  }
else
  {
  $response=$result;
  }

//output the response
echo $response;
?>


de code van dit alles staat in een .js bestand: (ROOT/js/zoek.js)
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function search(tags)
{
var xmlhttp;
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {
  // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
else
  {
  alert("Sorry, your browser seems to not support XMLHTTP functionality.");
  }


xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
  {
  document.getElementById("txtResult").innerHTML=xmlhttp.responseText;
  }
}
var url="../inc/ajax_zoek.php";
url=url+"?q="+tags;
url=url+"&sid="+Math.random();
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
/*It has been assumed here that ajax_zoek.php is in the same directory.*/
xmlhttp.send(null);
}


Ben vrij nieuw met Ajax, en zie het niet zo gauw waarom mijn resultaten niet live worden weergegeven.
Gewijzigd op 05/09/2010 12:28:21 door Www JdeRuijterNL
 
PHP hulp

PHP hulp

23/04/2024 17:21:54
 
Jelmer -

Jelmer -

05/09/2010 12:42:08
Quote Anchor link
Bij het onkeyup-attribuut mis je een " om af te sluiten.

Je roept 2x xmlhttp.send() aan.

Je moet nog even de tags veilig maken zodat ze niet je URL overhoop gooien met encodeURIComponent:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
url = url + '?q=' + encodeURIComponent(tags);


Je roept nu de search-functie aan bij iedere letter. Het zoeken gaat asynchroon, wat betekent dat het best zou kunnen dat de zoek-aanroep naar "abc" eerder klaar is dan die ervoor "ab", waardoor je zoekresultaten voor "ab" die van "abc" overschrijven. Wat je beter kan doen is je vorige request dan annuleren. (wat ook helpt om je server niet onderuit te halen is om heel even te wachten met zoeken wanneer iemand heel snel letters in aan het typen is)
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var xmlhttp;

function search(tags)
{
    // stop request als hij nog bezig is
    if(xmlhttp && xmlhttp.readyState < 4)
        xmlhttp.abort();

    if(window.XMLHttpRequest)
        xmlhttp = new XMLHttpRequest();
    else if(window.ActiveXObject)
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    else
        return;

    xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState == 4) {
            document.getElementById('txtResult').innerHTML = xmlhttp.responseText;
        }
    }

    var url = 'inc/ajax_zoek.php?q=' + encodeURIComponent(tags) + '&sid=' + Math.random();

    xmlhttp.open('GET', url, true);
    xmlhttp.send(null);
}

Voor die vertraging kan je eventueel deze functie toevoegen, en onkeyup veranderen naar delayedSearch(this.value)
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
var delayedSearchTimeout;

function delayedSearch(tags)
{
    if(delayedSearchTimeout)
        clearTimeout(delayedSearchTimeout);
    
    delayedSearchTimeout = setTimeout(function() {
        delayedSearchTimeout = null;
        search(tags);
    }, 250);
}


edit: Vanaf de pagina root/test.html is root/inc/ajax.php te benaderen via inc/ajax.php, dus zonder de ../.
Gewijzigd op 05/09/2010 12:43:27 door Jelmer -
 
Www JdeRuijterNL

www JdeRuijterNL

05/09/2010 13:11:07
Quote Anchor link
Jelmer rrrr op 05/09/2010 12:42:08:
[..]


De wijzigingen toegepast maar nog geen resultaat.

Form:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
                        <form class="form_border" action="http://www.overdatum.nl/" method="post">

                            <p>    
                                <input onkeyup="delayedSearch(this.value);" id="zoekterm" type="text" name="zoekterm" />
                                <input type="submit" name="zoeken" value="zoek" />
                            </p>
                            
                        </form>


.js:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
var delayedSearchTimeout;

function delayedSearch(tags)
{
    if(delayedSearchTimeout)
        clearTimeout(delayedSearchTimeout);
    
    delayedSearchTimeout = setTimeout(function() {
        delayedSearchTimeout = null;
        search(tags);
    }, 250);
}
function search(tags)
{
    // stop request als hij nog bezig is
    if(xmlhttp && xmlhttp.readyState < 4)
        xmlhttp.abort();

    if(window.XMLHttpRequest)
        xmlhttp = new XMLHttpRequest();
    else if(window.ActiveXObject)
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    else
        return;

    xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState == 4) {
            document.getElementById('txtResult').innerHTML = xmlhttp.responseText;
        }
    }

    var url = '../inc/ajax_zoek.php?q=' + encodeURIComponent(tags) + '&sid=' + Math.random();

    xmlhttp.open('GET', url, true);
    xmlhttp.send(null);
}
Gewijzigd op 05/09/2010 13:40:17 door www JdeRuijterNL
 
Jelmer -

Jelmer -

05/09/2010 13:16:16
Quote Anchor link
Je kan die twee functies niet zo mengen, dat gaat niet werken. Als je de functies los houdt zoals in mijn code gaat dat wel goed. (jouw code heeft nu een oneindige lus trouwens)

Wat zegt je browser eigenlijk? In Firefox in Firebug of in het 'extra's' menu de Error Console, of de web inspector in Safari, of de 'Extra's > JavaScript-console' in Chrome?
 
Www JdeRuijterNL

www JdeRuijterNL

05/09/2010 13:34:29
Quote Anchor link
Jelmer rrrr op 05/09/2010 13:16:16:
Je kan die twee functies niet zo mengen, dat gaat niet werken. Als je de functies los houdt zoals in mijn code gaat dat wel goed. (jouw code heeft nu een oneindige lus trouwens)

Wat zegt je browser eigenlijk? In Firefox in Firebug of in het 'extra's' menu de Error Console, of de web inspector in Safari, of de 'Extra's > JavaScript-console' in Chrome?


dat is opgelost, en heb omdat ik iedere keer geen resultaat kreeg.

dit:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
$query=$_GET['q'];
    $mysql2 = "SELECT tags FROM nieuws WHERE tags ='".$query."'" ;
    $tags = Blog_get::find_by_sql($mysql2);


in dit veranderd:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
$query=$_GET['q'];
    $mysql2  = "SELECT tags ";
    $mysql2 .= "FROM nieuws ";
    $mysql2 .= "WHERE MATCH(title, post) ";
    $mysql2 .= "AGAINST('".$query."') ";
    $tags = Blog_get::find_by_sql($mysql2);


Catchable fatal error: Object of class Blog_get could not be converted to string in /public/sites/www.overdatum.nl/inc/ajax_zoek.php on line 19
Gewijzigd op 05/09/2010 13:54:26 door www JdeRuijterNL
 
Jelmer -

Jelmer -

05/09/2010 13:52:48
Quote Anchor link
1. Let op dat Javascript hoofdletter-gevoelig is.

2. Die foutmelding zou je alleen maar moeten krijgen wanneer je bijvoorbeeld xmlhttp.send() aanroept, maar xmlhttp niet bestaat.

Heb je niet ergens een live voorbeeld?
 
Www JdeRuijterNL

www JdeRuijterNL

05/09/2010 13:54:53
Quote Anchor link
Jelmer rrrr op 05/09/2010 13:52:48:
1. Let op dat Javascript hoofdletter-gevoelig is.

2. Die foutmelding zou je alleen maar moeten krijgen wanneer je bijvoorbeeld xmlhttp.send() aanroept, maar xmlhttp niet bestaat.

Heb je niet ergens een live voorbeeld?

www.site.nl staat het voorbeeld
Gewijzigd op 05/09/2010 17:07:34 door www JdeRuijterNL
 
Jelmer -

Jelmer -

05/09/2010 14:12:08
Quote Anchor link
Ik weet niet waarom je hem daar neer hebt gezet, maar die eerste onreadystatechange functie hoort daar niet (en wordt gelukkig overschreven door de tweede).

Je script werkt trouwens wel gewoon in Google Chrome, en ook in Firefox zolang ik Firebug maar uit zet. Vreemd dat hij met Firebug aan niet werkt, maar het verbaast me niet echt, aangezien die extensie met de dag onbetrouwbaarder wordt.
 
Www JdeRuijterNL

www JdeRuijterNL

05/09/2010 14:28:22
Quote Anchor link
Jelmer rrrr op 05/09/2010 14:12:08:
Ik weet niet waarom je hem daar neer hebt gezet, maar die eerste onreadystatechange functie hoort daar niet (en wordt gelukkig overschreven door de tweede).

Je script werkt trouwens wel gewoon in Google Chrome, en ook in Firefox zolang ik Firebug maar uit zet. Vreemd dat hij met Firebug aan niet werkt, maar het verbaast me niet echt, aangezien die extensie met de dag onbetrouwbaarder wordt.


Opzich werkt het script bij mij in alle browsers, zelfs met firebug aan.

Dit wilt alleen nog niet helemaal:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<?php $query=htmlspecialchars($_GET['q']);
    $mysql2  = "SELECT tags ";
    $mysql2 .= "FROM nieuws ";
    $mysql2 .= "WHERE MATCH(title, post) ";
    $mysql2 .= "AGAINST('".$query."') ";
    $tags = Blog_get::find_by_sql($mysql2);


//get the q parameter from URL

//lookup all hints from array if length of q>0
if (strlen($query) > 0)
  {
  $result="";
  for($i=0; $i<count($tags->tags); $i++)
    {
    if (strtolower($query)==strtolower(substr($tags->tags[$i],0,strlen($query))))
      {
      if ($result=="")
        {
        $result=$tags->tags[$i];
        }
      else
        {
        $result=$result." , ".$tags->tags[$i];
        }
      }
    }
  }

// Set output to "No Search Results Found" if no results were found
// or to the correct values
if ($result == "")
  {
  $response="Geen resultaat";
  }
else
  {
  $response=$result;
  }

//output the response
echo $response;
?>
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.