В чем ошибка отправлений данных через ajax?

238

14 марта 2017, 15:34

Всем доброго времени суток,отправляю ajax'ом id в таблицу на удаление,беру через инпут.Выскакивает функция success,пишет,что все выполнено
НО
как закрываю алер,сразу перезагружается страница.
index.php

<script>
        $(document).ready(function(){
            $("#btn-delete").bind("click",function(){
                $.ajax({
                    type : 'POST',
                    url : 'file.php',
                    data : ({id:$("#input-name").val()}),
                    success : function(data){
                        alert("Выполнено");
                    }   
                });
            });
        });
    </script>
<form>
    <p>Удаление<br>
        <label>Введите айди пользователя</label>
        <input type="text" name="input-name" id="input-name">
        <button id="btn-delete">Удалить</button>
    </p>
</form>

file.php

    if(isset($_POST['id'])){
  $id=$_POST["id"];
}
function delete($pdo,$id){
    $sql = "DELETE FROM users WHERE id =".$id;
  $del = $pdo->prepare($sql);
  $del->execute();
}

Всем заранее благодарю за ответы:)

Answer 1

По умолчанию, <button>, расположенный в форме выполняет роль инпута с типом submit. Поэтому, в данном случае, нужно делать тоже самое, что при клике на ссылку, при клике на которую хочется отменить дефолтное поведение:

$("#btn-delete").bind("click",function(e){
    e.preventDefault();
    // всё остальное

Answer 2

Ваша кнопка без атрибута type находится в форме.
Для таких кнопок, type по умолчанию равен submit, она отправляет форму по нажатию.
Чтобы предотвратить это поведение, вы можете либо вызвать event.preventDefault() в обработчике клика, либо изменить type на button