Dynamiczne wypełnianie wartości formularza za pomocą jQuery

Question

Wiem, jak to zrobić z czystym PHP, ale muszę to zrobić bez ponownego ładowania strony. Czy mimo to z jQuery skutecznie przyhamować pewne rezultaty bazy danych (na podstawie tego, co użytkownik ma wkład w pierwszym polu tekstowym na formularzu), a następnie wypełnić niektóre z pozostałych pól z danymi wycofali z kwerendy db?

Zasadniczo chciałabym, aby użytkownik odsunął się od pola tekstowego (albo za pomocą tabulatora lub klikając w następnym polu) i bum, zapytanie jest przesyłane przy użyciu wartości wprowadzonej w tym polu, a kolejne pola są następnie przeładowuje się strona w/oa.

Jestem zaznajomiony z podstawami jQuery, ale nie użyłem go do zrobienia czegoś podobnego, w którym ściągam dane z serwera i próbuję zapełnić je stroną klienta.

Wszelkie sugestie/przykłady, w jaki sposób najlepiej zacząć z tym byłoby bardzo mile widziane. Dzięki.

• Nicholas

Answer 1

Zakładając ten przykład HTML:

<input type="text" name="email" id="email" /> 
<input type="text" name="first_name" id="first_name" /> 
<input type="text" name="last_name" id="last_name" /> 

Mogłeś to javascript:

$("#email").bind("change", function(e){ 
    $.getJSON("http://yourwebsite.com/lokup.php?email=" + $("#email").val(), 
     function(data){ 
      $.each(data, function(i,item){ 
      if (item.field == "first_name") { 
       $("#first_name").val(item.value); 
      } else if (item.field == "last_name") { 
       $("#last_name").val(item.value); 
      } 
      }); 
     }); 
}); 

Wtedy właśnie masz skrypt PHP (w tym przypadku lookup.php), które odbywają się w e-mail ciąg zapytania i zwraca tablicę sformatowaną w JSON z wartościami, do których chcesz uzyskać dostęp. To jest część, która rzeczywiście trafia do bazy danych, aby sprawdzić wartości:

<?php 
//look up the record based on email and get the firstname and lastname 
... 

//build the JSON array for return 
$json = array(array('field' => 'first_name', 
        'value' => $firstName), 
       array('field' => 'last_name', 
        'value' => $last_name)); 
echo json_encode($json); 
?> 

Będziemy chcieli robić inne rzeczy jak zdezynfekować wejście e-mail, itp, ale powinno Ci idą w dobrym kierunku.

Answer 2

Jeśli chcesz trafić do bazy danych, trzeba ponownie uderzyć serwer internetowy (w większości przypadków).

Co możesz zrobić, to użyć AJAX, który występuje z wnioskiem do innego skryptu na swojej stronie do pobierania danych, pobiera dane, a następnie aktualizuje pola wejściowe chcesz.

rozmowy

AJAX może być wykonany w jQuery z $ .ajax() wywołania funkcji, więc to nastąpi

przeglądarka użytkownika wchodzi wejście, które wystrzeliwuje spust sprawia, że ​​wywołanie AJAX

$('input .callAjax').bind('change', function() { 
    $.ajax({ url: 'script/ajax', 
      type: json 
      data: $foo, 
      success: function(data) { 
      $('input .targetAjax').val(data.newValue); 
      }); 
); 

teraz trzeba podkreślić, że wywołanie AJAX w skrypcie (brzmi jakbyś PHP pracuje), który zrobi zapytania chcesz i odesłać dane.

Prawdopodobnie będą chcieli korzystać z obiektu JSON połączenia, dzięki czemu można przejść z powrotem javascript obiekt, który będzie łatwiejszy w obsłudze niż XML powrotnej itp

Funkcja PHP json_encode ($ phpobj); będzie użyteczne.

Answer 3

automatycznie wypełnić wszystkie pola formularza z tablicy

http://jsfiddle.net/brynner/wf0rk7tz/2/

JS

function fill(a){ 
    for(var k in a){ 
     $('[name="'+k+'"]').val(a[k]); 
    } 
} 

array_example = {"God":"Jesus","Holy":"Spirit"}; 

fill(array_example); 

HTML

<form> 
<input name="God"> 
<input name="Holy"> 
</form>