Отправка формы без перезагрузки страницы Ajax

@Жасмин333 · Регистрация: 25.10.2012

Студворк — интернет-сервис помощи студентам

Здравствуйте!
Никак не могу отправить. В чем ошибка, если есть?
Файлы index.html и jquery.js находятся в папке ajax на рабочем столе. Файл index.html:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Отправка формы</title>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            function AjaxFormRequest(result_id,form_id,url) { 
                jQuery.ajax({ 
                    url:     "http://localhost/form.php", //Адрес подгружаемой страницы 
                    type:     "POST", //Тип запроса 
                    dataType: "html", //Тип данных 
                    data: jQuery("#"+form_id).serialize(),  
                    success: function(response) { //Если все нормально 
                    document.getElementById(result_id).innerHTML = response; 
                }, 
                error: function(response) { //Если ошибка 
                document.getElementById(result_id).innerHTML = "Ошибка при отправке формы"; 
                } 
             }); 
        }
   </script>
    </head>
    <body>
        <div style="border: 1px solid red; width: 220px; height: 80px; padding: 10px;" id="result_div_id">
            Тут будет вывод нашей формы<br/>
        </div>
        <br/><br/>
        <form method="post" action="http://localhost/form.php" id="form_id">
            Имя: <input type="text" name="name" value="" /><br/>
            Телефон: <input type="text" name="phone" value="" /><br/>
            Сайт: <input type="text" name="site" value="" /><br/>
            <input type="button" value="Отправить" onclick="AjaxFormRequest('result_div_id', 'form_id', 'http://localhost/form.php')" />
        </form>
 
    </body>
</html>

На сервере D:\SERVER\www\form.php, файл form.php:

PHP
1
2
3
4
5
6
7
8
<?php
//Если форма была отправлена, то выводим ее содержимое на экран
if (isset($_POST["name"])) { 
    //Данные отправляются в кодировке utf-8, поэтому конвертим в cp1251
    echo "Ваше имя: " . iconv("utf-8", "cp1251", $_POST["name"]) . "<br/>"; 
    echo "Ваш телефон: " . $_POST["phone"] . "<br/>";
    echo "Ваш сайт: " . $_POST["site"] . "<br/>";
}

crautcher · 25.10.2012, 11:33

у меня работает ваш скрипт , попробуйте указать урл назначения просот form.php

KOPOJI · 25.10.2012, 11:34

Жасмин333, перекиньте все в одну папку на сервере и путь указывайте вместо
http://localhost/form.php
./form.php

@Жасмин333 · 25.10.2012, 12:00 **[ТС]**

Сообщение от KOPOJI

Жасмин333, перекиньте все в одну папку на сервере и путь указывайте вместо
http://localhost/form.php
./form.php

перекинула в папку D:\SERVER\www index.html и jquery.js, где находится form.php. Переимеиновала адреса:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Отправка формы</title>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            function AjaxFormRequest(result_id,form_id,url) { 
                jQuery.ajax({ 
                    url:     "./form.php", //Адрес подгружаемой страницы 
                    type:     "POST", //Тип запроса 
                    dataType: "html", //Тип данных 
                    data: jQuery("#"+form_id).serialize(),  
                    success: function(response) { //Если все нормально 
                    document.getElementById(result_id).innerHTML = response; 
                }, 
                error: function(response) { //Если ошибка 
                document.getElementById(result_id).innerHTML = "Ошибка при отправке формы"; 
                } 
             }); 
        }
   </script>
    </head>
    <body>
        <div style="border: 1px solid red; width: 220px; height: 80px; padding: 10px;" id="result_div_id">
            Тут будет вывод нашей формы<br/>
        </div>
        <br/><br/>
        <form method="post" action="./form.php" id="form_id">
            Имя: <input type="text" name="name" value="" /><br/>
            Телефон: <input type="text" name="phone" value="" /><br/>
            Сайт: <input type="text" name="site" value="" /><br/>
            <input type="button" value="Отправить" onclick="AjaxFormRequest('result_div_id', 'form_id', './form.php')" />
        </form>
 
    </body>
</html>

Всё равно не получилось. Думаю, дело в php.ini:php.zip

@Para bellum · 25.10.2012, 12:13

Жасмин333, у меня случалось такое из-за кодировки. Уберите в коде комментарии на русском языке и попробуйте.
P.S. Рекомендация: всегда внимательно следите за кодировкой своих файлов.

@Жасмин333 · 25.10.2012, 12:27 **[ТС]**

Сообщение от Lyodik

Жасмин333, у меня случалось такое из-за кодировки. Уберите в коде комментарии на русском языке и попробуйте.
P.S. Рекомендация: всегда внимательно следите за кодировкой своих файлов.

Попробовала, не получилось.

crautcher · 25.10.2012, 12:46

так а что пишет то , что в консоле ? ошибка отправки или просто в диве ничего ?

@Жасмин333 · 25.10.2012, 12:58 **[ТС]**

Сообщение от crautcher

так а что пишет то , что в консоле ? ошибка отправки или просто в диве ничего ?

Да просто в диве ничего, если убрать строку

Code
1
document.getElementById(result_id).innerHTML = "Ошибка при отправке формы";

crautcher · 25.10.2012, 13:40

JavaScript
1
2
3
success: function(response) { //Если все нормально 
                    alert(response); 
                },

@Жасмин333 · 25.10.2012, 14:05 **[ТС]**

Сообщение от crautcher

JavaScript
1
2
3
success: function(response) { //Если все нормально 
                    alert(response); 
                },

Ничего не изменилось. Скажите, пожалуйста, правильно ли я ввела адреса:

HTML5
1
2
3
4
5
url:     "form.php", 
...
<form method="post" action="http://localhost/form.php" id="form_id">
...
input type="button" value="Отправить" onclick="AjaxFormRequest('result_div_id', 'form_id', 'form.php')" />

Комментарий модератора

Есть теги кодов HTML, PHP и JS помимо CODE

Файлы form.php, index.html и jquery.js хранятся в сервере.

crautcher · 25.10.2012, 15:33

ну так алерт выскочил пустой или вообще не выскочил ?
может в пхп файле у вас какой-то косяк , попробуй просто вывести всё содержимое поста :

PHP
1
2
<?php
var_dump($_POST);

@Жасмин333 · 25.10.2012, 22:05 **[ТС]**

Сообщение от crautcher

ну так алерт выскочил пустой или вообще не выскочил ?
может в пхп файле у вас какой-то косяк , попробуй просто вывести всё содержимое поста :

PHP
1
2
<?php
var_dump($_POST);

Пыталась. Кнопка Отправить не работает. Вместо типа button указала тип submit. Всё нормально, работает, но не то. Мне надо без обновления текущей страницы.

Добавлено через 5 часов 31 минуту
Почему у меня ничего не происходит при нажатии кнопки? Может быть дело в адресах.

@spyeye · 25.10.2012, 22:45

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Отправка формы</title>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            function AjaxFormRequest(result_id,form_id) { 
                jQuery.ajax({ 
                    url:     "form.php", //Адрес подгружаемой страницы 
                    type:     "POST", //Тип запроса 
                    dataType: "html", //Тип данных 
                    data: jQuery("#"+form_id),  
                    success: function(response) { //Если все нормально 
                    $(result_id).html(response);
                }, 
                error: function(response) { //Если ошибка 
                 $(result_id).html('Ошибка'); 
                } 
             }); 
        }
   </script>
    </head>
    <body>
        <div style="border: 1px solid red; width: 220px; height: 80px; padding: 10px;" id="result_div_id">
            Тут будет вывод нашей формы<br/>
        </div>
        <br/><br/>
        <form method="post" action="form.php" id="form_id">
            Имя: <input type="text" name="name" value="" /><br/>
            Телефон: <input type="text" name="phone" value="" /><br/>
            Сайт: <input type="text" name="site" value="" /><br/>
            <input type="button" value="Отправить" onclick="AjaxFormRequest('result_div_id', 'form_id')" />
        </form>
 
    </body>
</html>

Если пишите на jQuery - так пишите корректно - без всяких innerHTML.
Зачем передавать url, если он не используется?
Зачем сериализовать данные клиента, если в сервере они не un'сериализуются?
Так и не понял, зачем форм_ид)

Добавлено через 3 минуты
Да и вообще как-то плохо написано, можно было проще и читабельней.

Добавлено через 26 минут
Всё отладил и проверил - работает на 100%.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Отправка формы</title>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>2
        <script type="text/javascript">
            function AjaxFormRequest(result_id) { 
                var name = $('input[name*="name"]').val();
                var phone = $('input[name*="phone"]').val();
                var site = $('input[name*="site"]').val();
                $.ajax({
                type: "POST",
                url: "form.php",
                data: { name: name, phone : phone, site: site }
                }).done(function(msg) {
                    $('#' + result_id).html(msg);
                });
        }
   </script>
    </head>
    <body>
        <div style="border: 1px solid red; width: 220px; height: 80px; padding: 10px;" id="result_div_id">
            Тут будет вывод нашей формы<br/>
        </div>
        <br/><br/>
        <form method="post" action="form.php" id="form_id">
            Имя: <input type="text" name="name" value="" /><br/>
            Телефон: <input type="text" name="phone" value="" /><br/>
            Сайт: <input type="text" name="site" value="" /><br/>
            <input type="button" value="Отправить" onclick="AjaxFormRequest('result_div_id')" />
        </form>
 
    </body>
</html>

PHP код тот же.

@Жасмин333 · 26.10.2012, 10:55 **[ТС]**

Сообщение от spyeye

.....
PHP код тот же.

Вы наверно сохранили этот файл с расширением php. У меня тоже всё работает! А если поменяла расширение на html, не работает.

@fa2m · 26.10.2012, 21:22

Сообщение от Жасмин333

Вы наверно сохранили этот файл с расширением php. У меня тоже всё работает! А если поменяла расширение на html, не работает.

Вот такие вещи случаются ))))))))))) Ну ничего, не ошибается тот, кто не работает (с)

@ednka44auto · 27.03.2013, 09:33

Здравствуйте! Помогите сделать Редирект(переход) на нужный URL при успешной отправке формы (после проверки полей) в этом скрипте без возможного возврата к самой форме...
Проверку формы я производил в файле с html формой (на php)...

crautcher · 27.03.2013, 12:06

редирект делается через хидер

PHP
1
header("Location: http://ur-url.com");

@ednka44auto · 27.03.2013, 12:25

Так выдает ошибку... 'Ошибка при отправке формы'... видимо этим HEADER прерывается функция...

crautcher · 27.03.2013, 12:28

его нужно делать до вывода Что означает предупреждение "headers already sent"

@ednka44auto · 27.03.2013, 12:44

Суть в том, что я использовал этот скрипт отправки формы как форму заказа.... и мне нужно чтобы при правильном заполнении этой формы(проверка происходит на php) - данные записываются в Базу Данных(это я сделал через PHP)... и при успешной отправке формы он переадресовывал на другую страницу(где будет написано "Спасибо за покупку и т.д") без возможности возврата к форме...

Добавлено через 8 минут
Ошибка не "headers already sent", а скрипт останаливается видимо... и пишет ошибку скрипта(т.е то что форма не отправлена - error: function(response) { //Если ошибка
document.getElementById(result_id).inner HTML = "Ошибка при отправке формы";
} )
т.е выводит это сообщение скрипта

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

crautcher 2450 / 2301 / 597 Регистрация: 27.05.2011 Сообщений: 7,845
	25.10.2012, 11:33
	у меня работает ваш скрипт , попробуйте указать урл назначения просот form.php 0

KOPOJI Почетный модератор 16844 / 6724 / 880 Регистрация: 12.06.2012 Сообщений: 19,967
	25.10.2012, 11:34
	Жасмин333, перекиньте все в одну папку на сервере и путь указывайте вместо http://localhost/form.php ./form.php 0

@Para bellum 5755 / 4134 / 1508 Регистрация: 06.01.2011 Сообщений: 11,276
	25.10.2012, 12:13
	Жасмин333, у меня случалось такое из-за кодировки. Уберите в коде комментарии на русском языке и попробуйте. P.S. Рекомендация: всегда внимательно следите за кодировкой своих файлов. 0

crautcher 2450 / 2301 / 597 Регистрация: 27.05.2011 Сообщений: 7,845
	25.10.2012, 12:46
	так а что пишет то , что в консоле ? ошибка отправки или просто в диве ничего ? 0

@ednka44auto 0 / 0 / 0 Регистрация: 27.03.2013 Сообщений: 4
	27.03.2013, 09:33
	Здравствуйте! Помогите сделать Редирект(переход) на нужный URL при успешной отправке формы (после проверки полей) в этом скрипте без возможного возврата к самой форме... Проверку формы я производил в файле с html формой (на php)... 0

@ednka44auto 0 / 0 / 0 Регистрация: 27.03.2013 Сообщений: 4
	27.03.2013, 12:25
	Так выдает ошибку... 'Ошибка при отправке формы'... видимо этим HEADER прерывается функция... 0

crautcher 2450 / 2301 / 597 Регистрация: 27.05.2011 Сообщений: 7,845
	27.03.2013, 12:28
	его нужно делать до вывода Что означает предупреждение "headers already sent" 0

@ednka44auto 0 / 0 / 0 Регистрация: 27.03.2013 Сообщений: 4
	27.03.2013, 12:44
	Суть в том, что я использовал этот скрипт отправки формы как форму заказа.... и мне нужно чтобы при правильном заполнении этой формы(проверка происходит на php) - данные записываются в Базу Данных(это я сделал через PHP)... и при успешной отправке формы он переадресовывал на другую страницу(где будет написано "Спасибо за покупку и т.д") без возможности возврата к форме... Добавлено через 8 минут Ошибка не "headers already sent", а скрипт останаливается видимо... и пишет ошибку скрипта(т.е то что форма не отправлена - error: function(response) { //Если ошибка document.getElementById(result_id).inner HTML = "Ошибка при отправке формы"; } ) т.е выводит это сообщение скрипта 0