Архив метки: AJAX

Hello world в jQuery AJAX

Опубликовано автором
Добавить комментарий

Начать использовать jQuery очень просто, а вместе с ним и AJAX, который также становится очень простым в этой связке. Смотрите пример ниже. Для простоты библиотека jQuery берется с сайта googleapis.com, но вы можете разместить ее и локально. Обратите внимание, что все файлы должны быть в кодировке UTF-8.

Итак, листинг ajax.html (это файл, который необходимо вызвать в браузере):

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
  <div id="content"></div>
  <input id="show_btn" type="button" value="Показать"/>
  <input id="close_btn" type="button" value="Закрыть"/>
  <input id="pos_id" type="hidden" value="5"/>
  <script src="ajax.js" type="text/javascript"></script>
</body>
</html>

Далее листинг ajax.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$(document).ready(function(){ 
  $('#show_btn').click(function(){ 
    $.ajax({ 
      url: 'ajax_servlet.php', 
      data: 'id='+$('#pos_id').val(), 
      cache: false, 
      success: function(html){ 
        $('#content').html(html); 
      } 
    }); 
  }); 
  $('#close_btn').click(function(){ 
    $('#content').html(''); 
  });
});

Ну и наконец файл, отвечающий на AJAX-запрос на стороне сервера, ajax_servlet.php:

1
2
3
4
5
6

<?php
echo
  "Привет мир!<br/>".
  "Скрытый параметр id=".$_GET['id']
;
?>