0

1) При загрузке страницы отправляется ajax запрос на внешний файл ajax.php для того, чтобы получить список актуальных комментариев из БД и вывести их на страницу

function show() {  
            $.ajax({  
                url: "php/ajax.php",  
                cache: false,  
                success: function(html){  
                    $("#comments_wrapper").html(html);  
                }  
            });  
        }  

        $(document).ready(function(){  
            show();   
        }); 

Эта часть кода работает как надо.

При заполнение форму (новый коммент) и отправке ее, я хочу обновить список комментариев без перезагрузки страницы. Для этого я использую следующий код:

var button = $(".form-comment__submit");

        button.click(function(evt) {
            evt.preventDefult();
            var name = $("#name").value.replace(/<[^>]+>/g,''),
                comment = $("#comment").value.replace(/<[^>]+>/g,'');
            if(name === '' || comment === '') {
                alert('Заполните все поля!');
                return false;
            }
            $.ajax({  
                url: "php/ajax.php",  
                cache: false,
                type: 'POST',
                data: "name=" + encodeURIComponent(name) + "&comment=" + encodeURIComponent(comment),
                success: function(html){  
                    $("#comments_wrapper").html(html);  
                }  
            });
        });

В результате при клике происходит переход на страницу ajax.php и в DOM дереве на странице находится обновленный список комментариев (то есть новый коммент попал в базу). Вопрос: почему в первом случае (при загрузке страницы) контент блока обновляется успешно , а во втором происходит переход на ajax.php? Код ajax.php прилагаю

header("Content-Type: text/html; charset=UTF-8");
date_default_timezone_set('UTC');
$db = new SQLite3('../data.sqlite');

if ($_POST) {
    //var_dump($_POST);
    $name = $_POST['name']; 
    $comment = $_POST['comment'];
    $date = date("d.m.Y");

    $sql = "INSERT into comments (author, content, date) VALUES ('".$name."', '".$comment."', '".$date."')";
    $result = $db->query($sql); 
}


$sql="SELECT * FROM comments";  
$result = $db->query($sql);
$comments = array();

while($data = $result->fetchArray(SQLITE3_ASSOC)) {
     $comments[] = $data;
}

$avatars = ['img/deadpool.png', 'img/logan.png'];

foreach($comments as $comment){
    echo '<div class="post-item col-12">
            <div class="post-item__header">
                <a href="#" class="post-item__avatar">
                    <img src="'.$avatars[rand(0,1)].'" alt="аватар">
                </a>
                <div class="post-item__text">
                    <h3>'.$comment["author"].'</h3>
                    <span>'.$comment["date"].'</span>
                </div>
            </div>
            <div class="post-item__describe">'.
                $comment['content']
            .'</div>
        </div>';
} 

Пожалуйста, помогите.. Спасибо!

2
  • 1
    Потому, что форму с комментом вы сабмитете либо стандартно, без участия ajax вообще, либо не глушите дефолтное поведение кнопки type="submit" во время отправки ajax (при этом ajax запрос будет улетать а за ним будет происходить переход на файл, который указан для form атрибутом action, методом, указанным атрибутом method).
    – Kirill
    16 фев 2020 в 20:49
  • Приложите код формы. <br> В идеале делать событие не с кнопки, а с формы, там её сериализовать проще. <br> Если делаете отправку через js, то action не нужен, он путает вас, и вы думаете что не работает скрипт, на самом деле срабатывает форма. Да и форма в целом не нужна, но если кто-то отключает скрипты, то можно настроить на корректную работу без них 17 фев 2020 в 14:05

2 ответа 2

1

Вероятнее всего, кнопка отправки комментария имеет атрибут type="sumbit" и находится в форме с указанным атрибутом action="ajax.php".

В таком случае, при отправке формы (а отправка происходит при нажатии на элемент input type="submit"), браузер автоматически переадресовывает Вас на страницу, которая указана в форме, в атрибуте action.

Поменяйте input type="submit" на input type="button". А в идеале ещё и уберите форму, если отправка комментариев и их загрузка на страницу происходит через AJAX-запросы.

<form class="commentForm" action="ajax.php"> ===> <div class="commentForm">
    ...
    <input type="submit" ...> ===> <input type="button" ...>
    ...
</form> ===> </div>

Формы нужны для того, чтобы страница могла передать запросы непосредственно в PHP-скрипт. В случае, если Вы используете AJAX, формы не нужны.

1
  • Спасибо большое!
    – Katya
    18 фев 2020 в 14:35
1

var button = $(".form-comment__submit"); у Вас input type="submit"? Если да, то поменяйте на <button class="form-comment__submit"></button>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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