При выполнении $.ajax перезагружается страница

@utopia · Регистрация: 24.01.2013

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

Подскажите пажалуйста почему перезагружается страница? Мысль такая что результат запроса добавляется в <div id="eg_err"></div>

JavaScript    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function registr()
{
    var data = $("#regForm").serialize()
 
    $.ajax({
        type: "POST",
        url: "register_user.php",
        data: data,
        success: callback
        });
}
 
function callback(response){
        $("div #reg_err").append(response);
}

@Mullih · 24.01.2013, 18:32

займусь ясновидением

ваша функция вызывается на сабмите

т.е. все выглядит так

JavaScript    
        
            
                
                
                
                
            
        
    Скопировано
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
jQuery(function($){
 $("#regForm").submit(registr);
 
// а далжно быть так
 
 $("#regForm").submit(function(e){
  e.preventDefault();
  registr();
 });
 
})
 
function registr()
{
    var data = $("#regForm").serialize()
 
    $.ajax({
        type: "POST",
        url: "register_user.php",
        data: data,
        success: callback
        });
}
 
function callback(response){
        $("div #reg_err").append(response);
}

PS если я угадал с вас репутация благодарности))

@utopia · 24.01.2013, 18:38 **[ТС]**

Вот сама форма

HTML5    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<form id="regForm">
<p>
    <label>Ваш логин:<br></label>
    <input id="login" name="login" type="text" size="15" maxlength="15">
</p>
<p>
    <label>Ваш e-mail:<br></label>
    <input id="email" name="email" type="text" size="15" maxlength="15">
</p>
<p>
    <label>Ваш пароль:<br></label>
    <input id="password" name="password" type="password" size="15" maxlength="15">
</p>
<p>
    <input type="submit" name="submit" value="Зарегистрироваться">
</p>
</form>
<div id="reg_err"></div>

Добавил, то что вы написали, всё равно обновляется(

@Dolphin · 24.01.2013, 18:58

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

HTML5    
        
    Скопировано
1
<input type="submit" name="submit" value="Зарегистрироваться">

HTML5    
        
    Скопировано
1
<input type="button" name="submit" value="Зарегистрироваться" onclick="registr()" />

@utopia · 24.01.2013, 19:19 **[ТС]**

Всем спасибо! Вопрос решён!

@Mullih · 24.01.2013, 19:32

вот вам рабочий вариант и пару коментариев по нем

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
    <script type="text/javascript">
 
        jQuery(function ($) {
            $("#regForm").submit(function (e) {
                e.preventDefault();
                registr();
            });
 
        })
 
        function registr() {
            var data = $("#regForm").serialize()
 
            $.ajax({
                type: "POST",
                url: "index2.html", //"register_user.php",
                data: data,
                dataType: 'html', //на всякий добавил тип ожидаемых данных
                success: callback
            });
        }
 
        function callback(response) {
            $("#reg_err").append(response);
        }
    </script>
</head>
<body>
    <form id="regForm">
    <p>
        <label>
            Ваш логин:<br>
        </label>
        <input id="login" name="login" type="text" size="15" maxlength="15">
    </p>
    <p>
        <label>
            Ваш e-mail:<br>
        </label>
        <input id="email" name="email" type="text" size="15" maxlength="15">
    </p>
    <p>
        <label>
            Ваш пароль:<br>
        </label>
        <input id="password" name="password" type="password" size="15" maxlength="15">
    </p>
    <p>
        <input type="submit" name="submit" value="Зарегистрироваться">
    </p>
    </form>
    <div id="reg_err">
    </div>
</body>
</html>

Добавлено через 1 минуту

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

HTML5    
        
    Скопировано
1
<input type="button" name="submit" value="Зарегистрироваться" onclick="registr()" />

а вот так как раз писать очень плохо. особенно если вы работаете с DOM 0, а уж тем более работаете с jquery

это очень bad practice

@Dolphin · 24.01.2013, 19:47

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

а вот так как раз писать очень плохо. особенно если вы работаете с DOM 0, а уж тем более работаете с jquery

чем интересно? Приведите пример

@Mullih · 24.01.2013, 23:49

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

чем интересно? Приведите пример

например разделением представления от логики фронт энда, что улучшает поддержку кода и уменьшает время на внесение изменений

также делает html код чище

локализация кода в отдельных файлах что приводит к уменьшению размера отдаваемого файла сервером, что в свою очередь приводит к уменьшению нагрузки на сервер

возможность минимизировать js код и использовать такие механизмы как кэширование. причем браузерное и прокси кеширование для субъекта оплачивающего хостинг не стоит ничего но позволяет ускорить загрузку страницы для клиента

ну и конечно идеология правильного построения архитектуры

Если вы с чемто не согласны, было бы отлично если бы аргументировали ваше мнение по не согласному пункту

Новые блоги и статьи Все статьи Все блоги /
Агрегаты и сущности в DDD микросервисах Javaican 10.04.2025 Разработка современных программных систем часто приводит на распутье: монолит или микросервисы? Даже при выборе микросервисной архитектуры многие команды сталкиваются с проблемой правильного. . .	Многопоточность в C#: Task и параллельное программирование UnmanagedCoder 10.04.2025 Современные процессоры уже давно перестали наращивать тактовую частоту в пользу увеличения количества ядер. Это создало интересную ситуацию: разработчики, привыкшие к последовательному. . .	Линейное решение нелинейной задачи. Формулы от LM по моему решению пока не проверял. В итоговой её формуле видно её заблуждение. Hrethgir 10.04.2025 В продолжение Эта LM дала ответ похожий на нормальный. В комментриях мой комментарий - похоже она ошиблась с выведением итоговой формулы, но остальные проверю. Assistant qwen2. 5-14b-instruct . . . .	Переменные в Python py-thonny 10.04.2025 Переменная в программировании — это символическое имя, связанное с областью памяти, в которой хранится значение. Она позволяет получать доступ к данным через понятные человеку идентификаторы, а не. . .	Многопоточность в C#: Task и асинхронные операции UnmanagedCoder 10.04.2025 Многопоточность позволяет выполнять несколько операций одновременно, что важно для решения двух основных задач: повышения скорости выполнения вычислительно-сложных операций и сохранения отзывчивости. . .
Линейное решение не линейной задачи (емкость вычислений в сравнении с традиционными решениями пока не определена). Hrethgir 10.04.2025 В рамках предстоящих вычислений пришлось (да, я тоже знаю про корень числа, и про степеня, и прочие теоремы, но. . . ) найти способ нахождения отношения двух углов. . . .	Запуск контейнеров Docker на ARM64 Mr. Docker 09.04.2025 Появление таких решений, как Apple M1/ M2, AWS Graviton, Ampere Altra и Raspberry Pi, сделало использование ARM-систем обыденностью для многих разработчиков и DevOps-инженеров. При этом Docker,. . .	Vue SFC компонент на PHP с Fusion Jason-Webb 09.04.2025 PHP на сервере и JavaScript на клиенте — классическое сочетание, которое, несмотря на свою эффективность, создает определенный когнитивный диссонанс при разработке. В этом контексте появляются. . .	TypeScript vs JavaScript: Отличия и когда что использовать Reangularity 09.04.2025 JavaScript появился в 1995 году как творение Брендана Эйха и быстро стал основой интерактивности в вебе. За свою историю он прошел путь от простого языка для манипуляций с DOM до полноценной. . .	Подключение Kafka к Elasticsearch Codd 09.04.2025 Apache Kafka и Elasticsearch — две мощные технологии, которые при совместном использовании создают эффективную платформу для обработки и анализа данных в реальном времени. Kafka, выступая в роли. . .

@utopia 2 / 2 / 1 Регистрация: 24.01.2013 Сообщений: 80
	24.01.2013, 19:19 [ТС]
	Всем спасибо! Вопрос решён! 0

@Dolphin 814 / 797 / 201 Регистрация: 21.09.2012 Сообщений: 2,656
	24.01.2013, 19:47
	Сообщение от Mullih а вот так как раз писать очень плохо. особенно если вы работаете с DOM 0, а уж тем более работаете с jquery чем интересно? Приведите пример 0

@Mullih 92 / 71 / 8 Регистрация: 05.08.2012 Сообщений: 138
	24.01.2013, 23:49
	Сообщение от Dolphin чем интересно? Приведите пример например разделением представления от логики фронт энда, что улучшает поддержку кода и уменьшает время на внесение изменений также делает html код чище локализация кода в отдельных файлах что приводит к уменьшению размера отдаваемого файла сервером, что в свою очередь приводит к уменьшению нагрузки на сервер возможность минимизировать js код и использовать такие механизмы как кэширование. причем браузерное и прокси кеширование для субъекта оплачивающего хостинг не стоит ничего но позволяет ускорить загрузку страницы для клиента ну и конечно идеология правильного построения архитектуры Если вы с чемто не согласны, было бы отлично если бы аргументировали ваше мнение по не согласному пункту 0