Отправка формы с помощью Ajax

      Комментарии к записи Отправка формы с помощью Ajax отключены

Главная Форумы Программирование Веб программирование Отправка формы с помощью Ajax

Помечено: , ,

В этой теме 0 ответов, 1 участник, последнее обновление  Васильев Владимир Сергеевич 4 мес. назад.

  • Автор
    Сообщения
  • #3693

    Сегодня хочу рассказать вам об отправке данных без перезагрузки страницы методом Ajax с использованием библиотеки JQuery (которая между прочим покорила Гугл ).

    Для повышения юзабилити сайта, очень часто требуется отправить форму без перезагрузки страницы. У нас для выполнения этой задачи будут использованы 2 файла, index.html и скрипт-обработчик form.php.

    Для начала, вам следует скачать JQuery с официального сайта и расположить эту библиотеку в одной директории со скриптами(index.php и form.php). Но можно и напрямую подключить его с гугла. Делается это так:

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
    		google.load("jquery", "1.3.2");
    		google.load("jqueryui", "1.7.2");
    </script>

    Теперь создайте два файла как показано на рисунке:

    У вас они пока должны быть пусты. После этого вставьте такой код в файл index.php (это файл с формой для отправки):

    <html>
        <head>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    	<script type="text/javascript">
    		google.load("jquery", "1.3.2");
    		google.load("jqueryui", "1.7.2");
    	</script>	
    
            <script type="text/javascript">
    
             function send(url,form_id,result_div)
    		 {
    				// Отсылаем паметры
    				$.ajax({
    						type: "POST",
    						url:  url,
    						data: $("#"+form_id).serialize(),
    						// Выводим то что вернул PHP
    						success: function(html)
    						{
    								$("#"+result_div).empty();
    								$("#"+result_div).append(html);
    						},
    						error: function()
    						{
    							$("#"+result_div).empty();
    							$("#"+result_div).append("Ошибка!");
    						}
    						});
    
    		 }
       </script>
        </head>
        <body>
            <div id="result">
            </div>
            <br/><br/>
            <form method="post" action="javascript:send('form.php','myform','result');" id="myform">
                <input type="text" id="name" name="name" /><br/>
                <input type="button" value="Отправить" onClick="send('form.php','myform','result');" />
            </form>
    
        </body>
    </html>

    А в файл form.php такой:

    <?php
    		echo $_POST['name']; 
    ?>

    Он будет выполнять отправку того что мы ввели файлу index.php, а тот уже выводить его в браузер. Теперь объяснения по функции JQuery Ajax. Изначально в функцию мы принимаем три параметра:

    1. url — путь к скрипту обработчику, который будет принимать данные
    2. form_id — айди формы с данными (в нашем случае myform)
    3. result_div — див (блок) куда будут выведены результаты отправки.

Для ответа в этой теме необходимо авторизоваться.