_×

Эффективное использование jquery функции load

Эффективное использование jquery функции load

Часто возникает потребность в получении определенных значений из удаленного php, html файла. На помощь к нам приходит всеми известная технология AJAX - асинхронный javascript. В jQuery есть функция load, об использовании которой я расскажу ниже.

load ( url, [данные][вызов] ) - загружает HTML из удаленного файла и встраивает его в объектную модель документа (DOM). 

Рассмотрим такой пример, где у нас существует некая форма проверки введенного значении на соответствие требованиям, которые прописаны в удаленном php-файле. Нам необходимо передать введенное значение в этот файл асинхронно, т.е. без перехода на другую страницу.

<div class="form">
<input id="query" type="text" name="query" /> 
<input onclick="check();" type="submit" value="Проверить" />
<p class="result"> </p>
</div>

В функции check будет происходит передача значения из поля query в нужный нам файл и выводить результат в элемент с классом result - все это будет происходить посредством функции load, и некоторых вспомогательных функций

<script>
function check(){
 if($('#query').val() != ""){
  $('.result').empty().append('Ждем...').load('check.php&query='+
     $('#query').val());
 }
}
</script>

Как видно по скрипту изначально идет очистка поля с результатом $('.result').empty(). Вторым шагом идет вывод надписи о том, что идет загрузка .append('Ждем...'). В последний момент идет выполнение функции .load('check.php&query='+$('#query').val()); - здесь мы видим, что передаем файлу check.php в качестве параметра query значение из поля query - $('#query').val(). В итоге результат выполнения функции load будет записан в result.

В данном варианте параметры передаются методом GET, но также существует вариант передачи параметров методом POST.

<script>
function check(){
 if($('#query').val() != ""){
  $('.result').load('check.php', {'query': $('#query').val()});
 }
}
</script>

На этом все, будут вопросы пишите!

Теги: jquery 08.05.2013