0

AJAX не работает, страница перезагружается, в бд тоже ничего не попадает вот код

<!DOCTYPE html>

<html>
<head>
    <title>Регистрация</title>
    <meta http-equiv="Content-Style-Type" content="text/css" charset="utf-8">
    <meta name="keywords" content="Ключевые слова для поисковиков">
    <meta name="description" content="Описание сайта">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="1/my_room/css/style.css" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="stylesheet" type="text/css" href="1/my_room/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="1/my_room/js/bootstrap.min.js"></script>
    <style>
        .error, .success{
            display: block;
            position: absolute;
            top:0;
            left:0;
            padding: 7px 5px 7px 5px;
            border-bottom-right-radius: 10px;
            display: none;
        }
        .error{
            background: #b9f3f2;
            border:1px solid #b23c3c;
        }
        .success{
            background: #ed9999;
            border: 1px solid #326db5;
        }
    </style>
</head>
<body>
<script>
    $(document).ready(function() {
        $("#clickButtonForm").bind("click", function () {
            $.ajax ({
                url: "ajax.php",
                type: "POST",
                data: ({login: $("#login").val(), password: $("#password").val(), email: $("#email").val()}),
                dataType: "text",
                beforeSend: function (){
                    $("#information").text ("Expectaton data...")
                },
                success: function (data){
                    // в случае, когда пришло success. Отработало без ошибок
                    if (data == "0")
                        alert("data in bd");
                    //   $("#error").text("You success registration").removeClass("error").addClass("success").show().delay(3000).fadeOut(3000);
                    // в случа ошибок

                    else (data == "1")
                    $("#error").text("Occured error speak administraor").removeClass("success").addClass("error").show().delay(8000).fadeOut(3000);

                }

            });
        });
    });



</script>

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-lg-4">
            <div class="panel">
                <form role="form" class="formForMe" id="register_form">
                    <div class="input-group">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                        <input type="text" class="input form-control" name="login" id="login" placeholder="Введите Ваш будующий логин для входа" required autofocus />
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                        <input type="password" name="password" id="password" class="input form-control" placeholder="Введите Ваш пароль для входа" required />
                    </div>
                    <!--<div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                    <input type="password" name="rpassword" id="rpassword" class="form-control" placeholder="Повторите пароль для входа" required />
                    </div>-->

                    <div class="input-group">
                        <span class="input-group-addon"><span class="add-on">@</span></span>
                        <input type="text" class="input form-control" name="email" id="email" placeholder="Ваш существующий email" required autofocus />
                    </div>

                    <div class="row">
                        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-12">

                        </div>
                        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-12">
                            <button class="clickButtonForm btn btn-labeled btn-success" id="clickButtonForm">
                                <span class="btn-label"><i class="glyphicon glyphicon-ok"></i></span>Войти</button>
                            <button onclick="location.href='../index.html'" type="submit" class="btn btn-labeled btn-danger">
                                <span class="btn-label"><i class="glyphicon glyphicon-remove"></i></span>Назад</button>
                        </div>
                    </div>
                    <p>
                        <a href="#">Забыли свой пароль?</a></p>
                </form>
            </div>
        </div>
    </div>
</div>

<span id="information" class=""></span>
<span id="error" class=""></span>

</body>
</html>

а вот php обработчик

<?php
header('Content-Type: text/html; charset=utf-8');
mysql_connect("localhost", "a0031620_saratov", "oImjHwXm");

mysql_select_db("a0031620_saratov");
if (isset($_POST['login']))
{
    $login = ($_POST['login']);
}

if (isset($_POST['email']))
{
    $email = (isset($_POST['email']));
}

if (isset($_POST['password'])
{
    $password = ($_POST['password']);
}
$sql = mysql_query("INSERT INTO `users` (`login`, `e-mail`, `paroli`) VALUES ('$login', '$email', '$password')");

if ($sql) {
    echo 0;
}
else
{
    echo 1;
}
?>
3
  • посмотрите что у вас в $_POST
    – ArchDemon
    20 авг 2016 в 17:29
  • 1
    в обработчике click нужно вернуть false, иначе кнопка <button> сработает как кнопка отправки не-ajax формы.
    – Sanya_Zol
    20 авг 2016 в 19:04
  • тип кнопки submit убрать, чтобы была обычной кнопкой 20 авг 2016 в 22:19

1 ответ 1

1
$(document).ready(function() {
    $("#clickButtonForm").on("click", function (e) {
        e.preventDefault();
        $.ajax ({
            url: "ajax.php",
            type: "POST",
            data: $("#register_form").serialize(),
            dataType: "text",
            beforeSend: function (){
                $("#information").text ("Expectaton data...")
            },
            success: function (data){
                // в случае, когда пришло success. Отработало без ошибок
                if (data == "0"){
                    alert("data in bd");
                //   $("#error").text("You success registration").removeClass("error").addClass("success").show().delay(3000).fadeOut(3000);
                // в случае ошибок

                }else{
                    $("#error").text("Occured error speak administraor").removeClass("success").addClass("error").show().delay(8000).fadeOut(3000);
                }
            }

        });
    });
});

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.