Начать использовать 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'] ; ?> |