[AJAX]Jak załadować wartości do pola tekstowego? Opcje

[cent4]

Jak załadować wartości z pliku zewnętrznego do pola tekstowego?
Do diva działa prawidłowo:

[HTML] pobierz, plaintext 
<div  id="trzy">
</div>
...
$("#trzy").load("plik.php?jeden="+s1+"&dwa="+s2);
[HTML] pobierz, plaintext 

Ale jak:
$("#trzy").load("plik.php?jeden="+s1+"&dwa="+s2);
Załadować do pola:
<input type="text" id="trzy">

[gargamel]

Nie poprzez funkcję load.
Skorzystaj np z getJSON()

[kudlatypawelek]

Możesz też użyć "pełnego" AJAXa z jQuery i w funcji anonimowej wydłubać to co zwraca plik php i za pomocą .val(data) ustawić wartość inputa. http://api.jquery.com/jQuery.ajax/

[cent4]

A jakieś szybkie gotowe rozwiązanie :-) - może przykład...

Czy ktoś może mi to wytłumaczyć jak 7-dmio latkowi...
Bo nie qumam tego jSON'a ;-(

[b4rt3kk]

Prosze bardzo, kod js do tworzenia nowego obiektu w zależności od przeglądarki i obsługi otwieranego pliku, w wersji uniwersalnej do szerokiego zastosowania (metoda GET):

[HTML] pobierz, plaintext 
function getXMLHttpRequestObject()
{
 
  var wersjeMSXML = new Array(
      "MSXML2.XMLHTTP.6.0",
      "MSXML2.XMLHTTP.5.0",
      "MSXML2.XMLHTTP.4.0",
      "MSXML2.XMLHTTP.3.0",
      "MSXML2.XMLHTTP",
      "Microsoft.XMLHTTP"
  );
 
  try {
      return new XMLHttpRequest();
  }
  catch(e) {
      for (var indeks in wersjeMSXML) {
          try {
              return new ActiveXObject(wersjeMSXML[indeks]);
          }
          catch(e) {
          }
      }
      return null;
   }
}
 
 
function startGETRequest(url, onComplete, onEnd)
{
 
  var XMLHttpRequestObject = getXMLHttpRequestObject();
 
  if (XMLHttpRequestObject) {
     XMLHttpRequestObject.open("GET", url);
     XMLHttpRequestObject.onreadystatechange = function()
     {
       if (XMLHttpRequestObject.readyState == 4) {
          if (XMLHttpRequestObject.status == 200) {
             var responseXML = XMLHttpRequestObject.responseXML;
             var responseText = XMLHttpRequestObject.responseText;
             onComplete(responseText, responseXML);
          }
       delete XMLHttpRequestObject;
       XMLHttpRequestObject = null;
       onEnd();
       }
     }
     XMLHttpRequestObject.send(null);
  }
 
}
[HTML] pobierz, plaintext 

onComplete i onEnd są funkcjami obsługującymi akcje które mają nastąpić po przeczytaniu i zakończeniu czytania pliku. Natomiast funkcja startRequest jest wywowyłana przy konkretnej akcji, np kliknięciu przycisku.

[HTML] pobierz, plaintext 
function startRequest() 
{
  var url = "dane.txt";
  startGETRequest(url, onComplete, onEnd);
}
 
function onComplete(responseText, responseXML)
{
  var trzy = document.getElementById("trzy");
  trzy.value = responseText;
}
 
function onEnd()
{
}
 
[HTML] pobierz, plaintext 

W miejsce zmiennej url wstawiasz ścieżkę do pliku który chcesz odczytać.
Przykładowy kod HTML stronki, nie dodaje definicji i funkcji js, bo to oczywista sprawa.

[HTML] pobierz, plaintext 
<div>
<input type="button" onclick="startRequest();">
<input type="text" id="trzy" />
</div>
[HTML] pobierz, plaintext 

Po kliknięciu przycisku pole input o id "trzy" będzie miało zawartość wczytanego pliku tekstowego. Do startRequest możesz dodać argument, np. url do pliku, żeby nie kopiować w kółko definicji funkcji.

Ten post edytował b4rt3kk 28.07.2011, 12:27:13

[cent4]

Dzięki wielkie ale pytanie:
jak przekazać do pliku 2 wartości: $("#trzy").load("plik.php?jeden="+s1+"&dwa="+s2);

Lepiej byłoby przez ten jSON? - jaka to różnica między tym xml?
I jak przekazać 2 wybrane wartości do pliku php, żeby wyciągnąć trzecią...?

[b4rt3kk]

Wartości przekazujesz w ten sposób: plik.php?wart1=costam&?wart2=costam2&?wart3=costam3 itd, po prostu zapomniałeś znaku zapytania po &.

A tą trzecią wartość możesz przekazać poprzez textResponse tak jak opisałem to wyżej, czyli np. w pliku php jest taki kod:

[PHP] pobierz, plaintext 
echo $wartosc = $_GET['wart1'] + $_GET['wart1'];
[PHP] pobierz, plaintext 

wtedy

textResponse = $wartosc

Ten post edytował b4rt3kk 28.07.2011, 13:39:32

[cent4]

A nie prościej:

$.get("test.php", function(data){
$('#trzy').val(data)
});

i działa ok ;-)