0

Добрый день! Я ajax практически не знаю, просто копался в интернете за этот день. В итоге накатал код который поидее должен был добавлять запись без перезагрузки и тут выводить ее в таблице. Однако, что-то ничего не происходит при нажатии кнопки "добавить". Кто опытным взглядом может определить в чем ошибка?

Вообщем имеется таблица article с полями:

  • article_id integer not null auto_increment primary key;
  • article_title varchar(300);

И имеются два файла:

  • index.php в котором есть вывод данных из таблицы и скрипт ajax по поводу передачи данных на вставку.
  • addArticle.php - файл в котором идет вставка записи;

Код файла addArticle.php:

    <?php
    $article_title = $_POST['article_title'];

    $connect = new mysqli("localhost", "root", "", "managerarticle");

    if($connect->query("insert into article (article_title) values ('$article_title')"))
      echo "OK";
    else
      echo "ОШИБКА В ЗАПРОСЕ!";
    ?>

Код основного файла index.php:

<?php
  // mysqli(хост, пользователь, пароль_пользователя, название_БД)
  $connect = new mysqli("localhost", "root", "", "managerarticle");
  $connect->query("SET NAMES 'utf8'");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Сайтик</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="layout/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"> 
  $(document).ready( function() 
  { 
   // обрабатываем событие нажатия на кнопку "Добавить новый товар"   
   $('input[name=addArticle]').click( 
       function () 
       {
          var article_title = $('input[name=article_title_new]').val();
          // отправляем AJAX запрос
          $.ajax(
             {
                type: "POST",
                url: "http://localhost/MyAjax/addArticle.php",
                data: "article_title=" + article_title,
                success: function(response) 
                {
                   if(response == "OK")
                   {
                      alert("Товар " + article_title + " добавлен!");
                      location.reload();
                   }
                   else
                   alert("Ошибка в запросе! Сервер вернул вот что: " + response);
                }
             }
             );
       }
    );
  });
 </script>
</head>
<body>
<div id="wrap">
  <div id="header">
    <div id="logo">Редактор статей по технологии Ajax</div>
    <div id="nav">
      <ul>
        <li class="active"><a href="index.php">Главная страница</a></li>
      </ul>
    </div>
    <div id="header-pic"> <img src="info/header-pics/index-header.jpg" alt="" /> </div>
  </div>
  <div id="content-wrap">
    <div id="content">
      <h1> Редактор товаров</h1>
      <div>
      Добавить товар:<br>
      <input type="text" name="article_title_new"  placeholder="Название товара">
      <input type="button" name="addArticle" value="Добавить новый товар"><br>
      </div><br>
      <table border="0" cellspacing="0" cellpadding="0">
        <caption>
        Товары
        </caption>
        <tr>
          <th >Номер товара</th>
          <th>Название</th>
          <th>Редактирование</th>
        </tr>
        <?php
          // достаем из базы данных ID и заголовок всех статей
          $result = $connect->query("select article_id, article_title from article");
          //определяем количество полученных записей
          $colResult = $result->num_rows;

          if($colResult > 0)
          {
            for($i = 0; $i < $colResult; $i++)
            {
               $row = $result->fetch_object();
               echo"<tr>";
               echo "<td>".$row->article_id."</td>";
               echo "<td>".$row->article_title."</td>";
               echo "<td><center><input type='checkbox' name='delete_button[]' value='".$row->article_id."'></center></td>";
               echo "</tr>";    
            }
          } 
        ?>
      </table>

    </div>
  </body>
 </html>

И вообщем этот код не срабатывает. Почему не добавляется запись ни в таблицу, ни соответственно не выводится в теге таблицы. В чем может быть ошибка?

6
  • По коду (хтмл index.php) у Вас не подключена библиотека jquery. Поэтому и не срабатывает скрипт отправки данных.
    – terantul
    20 ноя 2013 в 12:28
  • нет я подлючил ее). Просто тут пропустил код. Сейчас поправлю) пишу вот так: src="ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js". Ошибка судя по всему в коде ajax, просто я ее не вижу... Потому прошу помощи.
    – IntegralAL
    20 ноя 2013 в 12:32
  • alert вылазиет на success(response){ }?
    – ferrari
    20 ноя 2013 в 12:42
  • нет никаких окошек нет не появляется. Похоже что success не срабатывает.
    – IntegralAL
    20 ноя 2013 в 12:48
  • А трейсинг в консоле браузер вы делали? запрос отправляется? Событие на инпут повесилось?
    – Opalosolo
    20 ноя 2013 в 12:51

2 ответа 2

3

Во первых, вытащи свой JS код из <script> в которой ты подгружаешь jquery, создай отдельный <script> для кода.
Во вторых, data:{ article_title:article_title } http://pastebin.com/DR9g9rLR PS:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">

   $(document).ready( function() 
   { 
    // обрабатываем событие нажатия на кнопку "Добавить новый товар"   
    $('input[name=addArticle]').click( 
        function () 
        {
           var article_title = $('input[name=article_title_new]').val();
           // отправляем AJAX запрос
           $.ajax(
              {
                 type: "POST",
                 url: "http://localhost/MyAjax/addArticle.php",
                 data: "article_title=" + article_title,
                 success: function(response) 
                 {
                    if(response == "OK")
                    {
                       alert("Товар " + article_title + " добавлен!");
                       location.reload();
                    }
                    else
                    alert("Ошибка в запросе! Сервер вернул вот что: " + response);
                 }
              }
              );
        }
     );
   });
  </script>

Браузером корректно не обработается, нужно сделать

<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=addArticle]').click( 
        function () 
        {
           var article_title = $('input[name=article_title_new]').val();
           // отправляем AJAX запрос
           $.ajax(
              {
                 type: "POST",
                 url: "http://localhost/MyAjax/addArticle.php",
                 data: "article_title=" + article_title,
                 success: function(response) 
                 {
                    if(response == "OK")
                    {
                       alert("Товар " + article_title + " добавлен!");
                       location.reload();
                    }
                    else
                    alert("Ошибка в запросе! Сервер вернул вот что: " + response);
                 }
              }
              );
        }
     );
   });
  </script>
7
  • Если не доходит, то прежде чем писать, ознакомтесь с базовыми мануалами, там все подробно описано... PS: имяпредущейпостпеременной: "данные этой самой перменной" В вашем случае: data:{ article_title:$('input[name=article_title_new]').val() }
    – avengerweb
    20 ноя 2013 в 13:02
  • Я же вроде перед этим написал строку var article_title = $('input[name=article_title_new]').val(); А потом переменную article_title присвоил полю article_title. Или я неправильно сделал? Почему двоеточие стоит вместо равно? Я по примеру в интернете делал, там вроде = использовалось... вот ссылка на статью workmake.ru/veb-razrabotka/…
    – IntegralAL
    20 ноя 2013 в 13:11
  • Делайте по шагам копипаст нынче не в моде.
    – avengerweb
    20 ноя 2013 в 13:36
  • Да я оттуда собственно взял только запрос ajax подправил его под себя, а он не работает. И выяснилось что одни делают присвоение через = , другие через : .Не знаю кто прав... Тороплюсь, потому что завтра надо уже сделать все операции добавления, изменения, удаления без перезагрузки. А времени на изучения Ajax Не хватает.
    – IntegralAL
    20 ноя 2013 в 13:51
  • Во первых, вытащи свой JS код из <script> в которой ты подгружаешь jquery, создай отдельный <script> для кода.
    – avengerweb
    20 ноя 2013 в 13:55
2

Правильней будет передавать значение переменной как указал avengerweb (приношу извинение за неточность)

data:{ article_title:article_title }

И проверьте что у вас заходит в ajax , через тот же alert или консоль, далее проверьте что у ваз попадает в php код, и корректно ли там все отрабатывается

6
  • Решил убрать код php. Разместил тут jsfiddle.net/T4tcr/3 и срабатывает событие ошибки. Это нормально (так как не указан url и данные никакие не передаются)? Или нет?
    – IntegralAL
    20 ноя 2013 в 14:36
  • Здесь вроде все нормально. Пробуйте проанализировать что у вас попадает в РНР-код, и как это дел там обыгрывается.
    – gart67
    20 ноя 2013 в 14:46
  • А почему тогда срабатывает ошибка alert? Ведь в принципе должна работать ветка успешного добавления товара мне кажется...
    – IntegralAL
    20 ноя 2013 в 14:52
  • Странно, у меня ошибка alert не генериться... Т.е. при клике на кнопку никакой реакции... Но если я добавляю alert с выводом нужной нам переменной то отрабатывается только он.
    – gart67
    20 ноя 2013 в 15:00
  • Похоже условие if(response == "OK") {...}else {...} вообще не работает. Без условия alert работает...
    – IntegralAL
    20 ноя 2013 в 15:11

Ваш ответ

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

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