Добавление данных без перезагрузки в MySQL с PHP + Ajax

272

16 декабря 2017, 07:36

Добрый день! Если так все скомпоновать, то выдает ошибку. А если без script, то все ок, НО перегружает страничку.

file.php:

    <?php
        if (isset($_POST["name"])) {
    $sql = mysql_query("INSERT INTO `category_description` (`name`, `description`, `lang_id`, `meta_description`, `meta_title`, `meta_keyword`) 
                        VALUES ('".$_POST['name']."','".$_POST['description']."','".$_POST['lang_id']."','".$_POST['meta_description']."','".$_POST['meta_title']."','".$_POST['meta_keyword']."')");
    //Если вставка прошла успешно
    if ($sql) {
        echo "<p>Категория успешно добавлена в базу.</p>";
    } else {
        echo "<p>Произошла ошибка.</p>";
    }
}
?>

file.html

<form id="addCategory" class="form-horizontal" method="post">
<div class="form-group form-group-lg">
    <input name="name" class="form-control" type="text" id="formGroupInputLarge" placeholder="Введите название категории">
</div>
<div class="form-group form-group-sm">
    <input name="meta_title" class="form-control" type="text" id="formGroupInputSmall" placeholder="SEO тайтл">
</div>
    <input name="description" type="text" class="form-control" row="2" placeholder="Описание категории">
    <input name="meta_description" type="text" class="form-control" rows="2" placeholder="SEO Описание категории">
<select name="lang_id" class="form-control">
    <?php 
    $lang=mysql_query("select * from language"); 
    for ($q=0; $q<mysql_num_rows($lang); $q++) 
    { 
     $lang_id=mysql_fetch_array($lang); 
     echo "<option value=$lang_id[lang_id]>$lang_id[name]</option>"; 
    } 
    ?>
</select>
<center><input name="submitCat" type="submit" class="btn btn-success btn-anim" value="Add Category in DB"><div id="resp"></div></center>
</form>

Тот же html:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
 <script type="text/javascript">
   $(document).ready( function() 
   { 
    // обрабатываем событие нажатия на кнопку "Добавить новый товар"   
    $('input[name=submitCat]').click( 
        function () 
        {
        var name = $('input[name=name]').val();
        var description = $("input[description=description]").val();
        var lang_id = $("input[lang_id=lang_id]").val();
        var meta_description = $("input[meta_description=meta_description]").val();
        var meta_title = $("input[meta_title=meta_title]").val();
        var meta_keyword = $("input[meta_keyword=meta_keyword]").val();
           // отправляем AJAX запрос
           $.ajax(
              {
                 type: "POST",
                 url: "func/addcategory.php",
                 data: "name=" + name + "description=" + description + "lang_id=" + lang_id + "meta_description=" + meta_description + "meta_title=" + meta_title + "meta_keyword=" + meta_keyword,
                 success: function(response) 
                 {
                    if(response == "OK")
                    {
                       alert("Category " + name + " добавленa!");
                       location.reload();
                    }
                    else
                    alert("Ошибка в запросе! Сервер вернул вот что: " + response);
                 }
              }
              );
        }
     );
   });
  </script>

Answer 1

У Вас неверная выборка значений из инпутов как минмиум. Также нужно вешать событие preventDefault() на сабмит для того чтобы форма не перезагружала страницу, ну и "сериализовать" данные вместо длинных прописей в data

попробуйте следующий код

$(document).ready( function() { 
// обрабатываем событие нажатия на кнопку "Добавить новый товар"   
    $('#addCategory').submit(function (e) {
        e.preventDefault();
        var name = $('input[name="name"]').val();
        // отправляем AJAX запрос
        $.ajax(
          {
             type: "POST",
             url: "func/addcategory.php",
             data: $('#addCategory').serialize(),
             success: function(response) 
             {
                if(response == "OK")
                {
                   alert("Category " + name + " добавленa!");
                   location.reload();
                }
                else
                alert("Ошибка в запросе! Сервер вернул вот что: " + response);
             }
          }
          );
    }
 );