Задать вопрос
@Karpkarp
ajax

Почему Аjax выполняется 2 раза?

Сижу разбираюсь в Ajax'е. Написал скрипт который без перезагрузки выводит новости, решил чуть ниже написать скрипт который сразу же, после добавления в бд эту новость выводит. В принципе всё работает, но: 1) Добавляется 2 записи в бд., 2) На страницу выводится не просто новая запись, а дублируется страница целиком вместе с формой. Что не так сделал?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript">
        $("document").ready(function(){
            
            $("#btn").click(function(){

                var title = $("#title").val();
                var description = $("#description").val();
                var texting = $("#texting").val();

                $("#title").val('');
                $("#description").val('');
                $("#texting").val('');

                $.ajax({
                    url: '../Model/AddPost.php',
                    type: 'POST',
                    data: {title:title, description:description, texting:texting},
                    success: function(data){
                        // alert(data);
                    }
                });

                $.ajax ({
                        type: "POST",
                        url: '../Model/AddPost.php',
                        data: {title:title, description:description, texting:texting},
                        success: function(data){
                            $("#textpost").html(data);
                        }
                });

            });

        });
    </script>
    <title>Form</title>
    <style>
        textarea {
            outline: none;
            border: none;
            border-bottom: 1px solid #000;
            resize:none;
        }
        button {
            margin-top: 10px;
            margin-bottom: 10px;
        }
        form {
            margin-top: 10px;
        }
        .post {
            font-size:16px;
        }
        .textpost {
            padding-left:150px;
            padding-right:150px;
        }
    </style>
</head>
<body>
    
    <center>
    <label for="">Add Post</label>
    <form action="../Model/AddPost.php" method="POST" id="form">
        <textarea id="title" placeholder="Title" name="title" cols="60" rows="2"></textarea><br>
        <textarea id="description" placeholder="Description" name="description" cols="60" rows="2"></textarea><br>
        <textarea id="texting" placeholder="Text" name="texting" cols="60" rows="10"></textarea><br>
        <button id="btn" type="button">Send</button>
    </form>
    <hr>

    <div class="textpost" >
        <?php foreach($posts as $post) : ?>
            <div class="post" ><b><?php echo $post['title'] ?></b></div>
            <div class="post" ><i><?php echo $post['description'] ?></i></div>
            <div class="post" ><?php echo $post['texting'] ?></div><br>
        <?php endforeach; ?>    
    </div>

    <div id="textpost"></div>

    </center>
   
</body>
</html>
  • Вопрос задан
  • 111 просмотров
1 комментарий
Подписаться 1 Простой 1 комментарий
Пригласить эксперта
Ответы на вопрос 1
KickeRocK
@KickeRocK
FrontFinish
вместо этого:
$("document").ready(function(){
            
            $("#btn").click(function(){

                var title = $("#title").val();
                var description = $("#description").val();
                var texting = $("#texting").val();

                $("#title").val('');
                $("#description").val('');
                $("#texting").val('');

                $.ajax({
                    url: '../Model/AddPost.php',
                    type: 'POST',
                    data: {title:title, description:description, texting:texting},
                    success: function(data){
                        // alert(data);
                    }
                });

                $.ajax ({
                        type: "POST",
                        url: '../Model/AddPost.php',
                        data: {title:title, description:description, texting:texting},
                        success: function(data){
                            $("#textpost").html(data);
                        }
                });

            });

        });

вот это
$("document").ready(function(){
            
            $("#form").submit(function(e){
e.preventDefault();
                var title = $("#title").val();
                var description = $("#description").val();
                var texting = $("#texting").val();

                $("#title").val('');
                $("#description").val('');
                $("#texting").val('');
                $.ajax ({
                        type: "POST",
                        url: '../Model/AddPost.php',
                        data: {title:title, description:description, texting:texting},
                        success: function(data){
                            $("#textpost").html(data);
                        }
                });

            });

        });

И зачем вы 2 раза отправляли?
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Контент-менеджер с навыками веб-разработки и чувством стиля
ULHC • Москва
До 70 000 ₽
Ведущий консультант 1С (бюджетирование)
Wanted.
До 300 000 ₽
Аналитик данных
Wanted. • Санкт-Петербург
До 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать лендинг с нуля
28 дек. 2024, в 05:33
100000 руб./за проект
Сделать рабочую копию сайта
28 дек. 2024, в 01:30
7000 руб./за проект
Написать хук для потоков которые используют GetRawInputData
28 дек. 2024, в 01:07
1500 руб./за проект
Ещё заказы