Ajax und PHP: Formular absenden

[dondon]

Hallo!
Ich bin ganz neu in Ajax habe keine Erfahrungen mit Ajax wollte aber jetzt anfangen damit, um meine Seite Web2.0 freundlicher zu gestalten.

Habe mir schon einige Beispiele angeguckt, jedoch stellt sich mir eine Frage:

Ich gebe per PHP mein HTML Formular aus:

echo "<form action=\"search.php\" name=\"suche\" method=\"post\">
	       <table border=\"0\">
	       <tr>
	    <td>Suchbegriff</td>
	    <td><input name=\"keyword\" type=\"text\" id=\"keyword\" /></td>
	  </tr>	  
	  <tr>
	    <td> </td>
	    <td><input type=\"submit\"  name=\"Submit\" value=\"Suchen!\" /></td>
	  </tr>
	</table>
	</form>";

Soweit so gut. Wenn ich auf den Button klicke "besucht" search.php bestimmte Seiten (ich habe die Erlaubnis) und sucht jeweils 10 Links, die zum Suchbegriff "$keyword" passen, raus.


Die verschiedenen URLs filtere ich mit preg_match_all() heraus und sind im Array $ergebnisse gespeichert.
Diese Links werden immoment einfach per foreach{} schleife gesammelt und dann mit

echo $link;

ausgegeben, sobald der Button gedrückt wurde.


Mein Formular befindet sich derzeit noch in der selbigen search.php, muss das für Ajax ausgelagert werden? Also Formular z.B. in der index.php?

So jetzt kommt mein eigentliches Problem:
- Wie kann ich mit Ajax nun die verschiedenen Einträge zum "Keyword" dem Benutzer präsentieren bzw. zurückliefern?
----> Und wie kann ich so einen Ajax Activity Indicator solange anzeigen lassen, bis die Ergebnisse verfügbar gemacht worden sind?
- Wie kann ich die von Ajax erhaltenen Werte in "Form" bringen.. also gibt es was, damit ich die direkt in eine Art Spalte schreiben kann, Tabelle oder CSS?

Danke vielmals

 

[ZeitGeist]

Entweder du schickst die Ergebnisse einfach so in HTML zurück wie du sie anzeigen willst. Dann brauchst du ein HTML-element in dem du den Inhalt anzeigen willst. Diesem weist du dann per document.getElementById("id).innerHTML = request.responseText den Inhalt zu.

Nen Ladesymbol würde ich auf der Seite verstecken (display:none) und sobald der Request abgesendet wurde auf sichtbar machen. Wenn du die Antwort erhälst, versteckst dieses wieder.

 

[dondon]

Und wie sähe sowas aus, wenn ich zB dann nen Array hab und diesen in Tabellenform darstellen will?

 

[ein schlauer]

Was für ein Array? Was für eine Tabelle?

 

[dondon]

preg_match_all("mein regexp",$datei/ort_wo_ersuchen_soll, $das_array_wo_er_mir_ergebnisse_reinschmeißt) erstellt mir ein Array

per foreach schleife lass ich mir dann das Array ausgeben etwa so:
($das_array_wo_er_mir_ergebnisse_reinschmeißt habe ich mal umbenannt in $ergebnisse)

foreach ($ergebnisse[1] as $link) 
  {
  $i = $i +1;
  echo "<a href=\"/". $link."\"> ".$ergebnisse[2][$i]." </a><br />";  
  }

Er gibt mir also den Link und die Linkbeschreibung direkt (wenn ich den Button gedrückt hab und er alle Daten abgefragt hat) aus, natürlich mit einem Reload.

Wie könnte ich das jetzt zB machen wenn ich auf den Button klicke er mir das per Ajax, ohne die Seite neuzuladen, die Ergebnisse präsentiert, zB. in einer Tabelle? Oder kann ich das irgendwie in ner Variable abspeichern sodass ich die Tabelle nur noch mit Werten füllen muss

Etwa so sieht die Tabelle dann aus:

Seite 1 | Seite 2
Link + Linkbeschreibung | Link + Linkbeschreibung

 

[ein schlauer]

Irgendwie scheint mir, das dir nicht klar ist, was AJAX ist und wie es funktioniert.

 

[ZeitGeist]

dein PHP-Skript das durch AJAX aufgerufen wird, gibt einfach nur den HTML-code aus den du anzeigen willst. Das erhält JS dann als Response und dann machst du so weiter wie ich es da aufgeführt habe

 

[dondon]

Also schicke ich das formular ab, AJAX ruft zB search.php auf, während PHP die verschiedenen Seiten abcheckt.. dann habe ich in der php-datei ein echo "<a href="link1">link1</a> <a href="link2">link2</a>"; und die kann ich mir dann direkt holen?

Gibts da konkrete Beispeile?

 

[ein schlauer]

konkrete Beispiele findest du sicher auf den Millionen Seiten über AJAX im Internet.

 

[ZeitGeist]

var uploadDirRequest = null;

function loadUploadDir(formular)
{
	uploadDirRequest = getHttpRequest();
	uploadDirRequest.onreadystatechange = showDirContent;
	var params = 'dir='+formular.directory.value;
	params += (formular.show_pictures.checked) ? '&show_pictures=' : '';
	uploadDirRequest.open('GET', '../ajax_read_upload_dir.php?'+params, true);    
	uploadDirRequest.send(false);
}

function showDirContent()
{
	if(isHttpRequestReady(uploadDirRequest))
	{
		document.getElementById('dir-content').innerHTML = uploadDirRequest.responseText;
	}
}

die Helferfunktionen

function getHttpRequest()
{
   	var httpRequest = false;
    if(window.XMLHttpRequest)
    {
    	httpRequest = new XMLHttpRequest();
    	if (httpRequest.overrideMimeType) 
    	{
            httpRequest.overrideMimeType('text/xml');
        }
    }
    // IE
    else if(window.ActiveXObject)
    {
    	try
    	{
    		httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
    	}
    	catch(e) {}
    
    }
    
    if(!httpRequest)
    {
    	alert('Dein Browser kann kein AJAX');
    	return;
    }
    
   return httpRequest;
}

function isHttpRequestReady(httpRequest)
{
	if (httpRequest.readyState == 4 && httpRequest.status == 200) 
    {
    	return true;
    } 
	return false;
}

mal code von nem Projekt von mir. Musst du halt entsprechend anpassen und es gibt sicher ne schönere Lösung, so der JS Experte bin ich nämlich auch nicht

 

[dondon]

So habe es jetzt gelöst, war ja einfacher als gedacht. Danke ;-P

Prototype JavaScript framework: Easy Ajax and DOM manipulation for dynamic web applications ist sehr hilfreich!