Ajax, php, код рабочий но данные пропадают через секунду

208

14 декабря 2017, 00:49

Собственно код рабочий и на секунду показывает то что я хочу увидеть, но сразу проподает.

Форма:

<form id="form" > 
    <div class="row"> 
        <div class="col-xs-4 "> 
          <input  name="email"type="text" class="form-control " placeholder="Email"  > 
        </div>  
   </div> 
   <hr/> 
   <div class="row"> 
        <div class="col-xs-4"> 
            <input  name="name1" type="text" class="form-control" placeholder="Назва"> 
        </div> 
        <div class="col-xs-4"> 
            <input  name="autor1" type="text" class="form-control" placeholder="Автор"> 
        </div> 
        <div class="col-xs-4"> 
            <input  name="year1" type="text" class="form-control" placeholder="Рік випуску"> 
        </div>  
    </div> 
    <button type="submit" class="btn btn-primary btn-lg"  >Відправити</button> 
</form>

Скрипт:

<script> 
    $(document).ready(function () { 
        $("#form").submit(function () {  
            var form_data = $(this).serialize();  
            $.ajax({ 
                type: 'POST',  
                url: "catalog_show.php",  
                data: form_data, 
									 
                cache: false, 
                success: function (data) { 
									 
                    $("#catalog_table").html(data); 
                                         
                } 
																	 
            }); 
        }); 
    }); 
</script>

catalog_show.php:

echo hi

Хотя с таким скриптом все работает(но мне нужно чтобы он срабатывал не сразу, а при отправки формы):

<script> 
$.ajax({ 
    url: "catalog_show.php", 
    cache: false, 
    success: function(res){ 
        $("#catalog_table").html(res); 
    } 
}); 
</script>

Answer 1

В вашем случае форма сабмитит дважды - без перезагрузки аяксом и сразу после срабатывает get сабмит формы (стандартный) который, как вы знаете, перезапрашивает страницу с параметрами (queryString). Это происходит из-за того, что событие $("#form").submit продолжает распространение (выполнение) после запроса ajax. Его необходимо остановить (return false).

$("#form").submit(function () { 
    ...
    $.ajax({
        url: "catalog_show.php",
        ...
        success: function(res){
            ...
        }
    });
return false; //gimme some magic
});