Ajax отправка данных в бд

@2849141 · Регистрация: 06.10.2015

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

Здравствуйте!

Помогите пожалуйста, я пытаюсь реализовать отправку в базу данных вводимое пользователем
в input без перезагрузки страницы, в фоновом режиме. Но после нажатия на кнопку в адресной
строке просто добавляется знак вопроса (http://mysite.com/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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My page</title>
        <link rel="stylesheet" href="style.css">
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $("#otpravka").submit(function(){
                var otv = $("#otvet").val();
                if (otv =='')  
                {  
                    alert ("Поле не заполнено!");  
                    return false;  
                }
                $.ajax({
                    type: "POST",  
                    url: "otpravka.php",
                    data: "otvet="+otv,
                    success: function(){  
                        var forma = $('#otpravka');
                        $forma.delay(350).fadeOut('slow');
                    }
                });
                return false;
            }
        </script>
    </head>
        <body>
                <form id="otpravka">
                    <input id="otvet" placeholder="Введите отправляемые данные" /> 
                    <input type="submit" value="Отправить" />
                </form>
            </div>
        </body>
</html>

Обработка: (otpravka.php)

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
 
mysql_connect("mysql.mysite.com", "user", "password") or die (mysql_error ());
mysql_select_db("my_base") or die(mysql_error());
 
if (isset($_POST["otvet"])) {
    $strSQL = "INSERT INTO my_table(otvet) VALUES('" . $_POST["otvet"] . "')"; 
    mysql_query($strSQL) or die(mysql_error());
}
 
mysql_close();
 
?>

Почему не работает?

@Svid_off · 06.10.2015, 12:29

Почему не работает?

Во-первых, поместите весь javascript код внутрь $(function(){});

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    $(function(){
            $("#otpravka").submit(function(e){
            e.preventDefault();
                var otv = $("#otvet").val();
                if (otv =='')  
                {  
                    alert ("Поле не заполнено!");  
                    return false;  
                }
                $.ajax({
                    type: "POST",  
                    url: "otpravka.php",
                    data: "otvet="+otv,
                    success: function(){  
                        var $forma = $('#otpravka');
                        $forma.delay(350).fadeOut('slow');
                    }
                });
            }); 
    });;

Во-вторых, отмените действие по умолчанию: e.preventDefault(); - иначе у Вас форма будет "естественным" образом сабмититься. Ну, и $forma = $('#otpravka'); а не forma = $('#otpravka'); раз уж Вы ниже обращаетесь к ней $forma.delay(350).fadeOut('slow');

@2849141 · 06.10.2015, 16:10 **[ТС]**

А как при помощи javascript можно менять стили элемента?
Например, вместо fadeOut, пускай форма станет полупрозрачной

CSS
1
opacity: 0.5;

и для эффекта как-бы затухания добавить

CSS
1
transition: opacity 200ms cubic-bezier(0.42, 0, 0.58, 1);

Добавлено через 3 часа 9 минут
Нашел

Java
1
2
document.getElementById('otpravka').style.transition = 'opacity 200ms cubic-bezier(0.42, 0, 0.58, 1)';
document.getElementById('otpravka').style.opacity = '0';

Новые блоги и статьи Все статьи Все блоги /
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .

Ajax отправка данных в бд

Решение