Использование ajax при работе с формами и бд - PHP

IntegralAL · 19.11.2013, 16:36

обрый вечер! У меня написан на чистом php такой демо-пример http://example.book-fan.ru/index.php для работы с базой данной, которая показывает как добавлять записи, изменять и удалять во множественном варианте. И вот сказали теперь все это сделать с использованием ajax, тоесть чтобы редактирование базы шло без перегрузки страницы. К примеру добавили запись, и она тут же появилась в списке товаров. Это сложно делать? Покажите простой как можно осуществить такую задачу. Я технологию ajax Не знаю к сожалению совсем... Только прошу не предлагайте какие-либо библиотеки. Хотелось бы в базовом варианте javaScript решить эту задачу.

К примеру в простейшем случае у меня такой код примерно:

Код:

<?php

        $hostname = 'localhost';
        $username = 'root';
        $passwordname = '';
        $basename = 'Art';

        global $l;
         $l = new mysqli($hostname, $username, $passwordname, $basename) 
         or die ('Невозможно открыть базу');
         $l->query("SET NAMES 'utf8'");

        function Insert_article($Name_cat)
         {
           global $l;
           $Name_cat = htmlspecialchars($Name_cat);
           $Name_cat = trim($Name_cat);
           $sql = "Insert Into categories (Name_cat) VALUES ('".$Name_cat."')";   
           $l->query($sql); // or die(mysql_error());
         }

          if ($_POST['article_add']== "f1")
          {        
            if (isset($_POST['article_name']) && $_POST['article_name'] == "")
            {
              $ErrorCat = "Название товара должно быть заполнено";
            }
            else
            {
               $ErrorCat = "";
               Insert_article($_POST['article_name']);    
               unset($_POST);
            }   
          }

        ?>

        <html>
        <head>
        <title>Редактор товаров.</title>
        <script type="text/javascript">
         function createObject() {
           var request_type;
           var browser = navigator.appName;
           if(browser == "Microsoft Internet Explorer"){
           request_type = new ActiveXObject("Microsoft.XMLHTTP");
           } else {
             request_type = new XMLHttpRequest();
           }
           return request_type;
           }

           var http = createObject();

           function InsertRecord() {

           }
        </script>  
        </head>
        <body>
          <h1> Редактор товаров</h1>
              Добавить товар:
              <div> 
                <form name="form1" action="index.php" method="post">
                <input type="hidden" name="article_add" value="f1" />
                <input type="text" name="article_name" value ="" />
                <input type="submit" name="add" value="Добавить" onclick='InsertRecord()'/><br>
                <p id="catError"><strong style="color:red;"><?php echo $ErrorCat; ?></strong></p>                   
                </form>
              </div>  
        <div>
    <table border="0" cellspacing="0" cellpadding="0">
            <caption>
            Просмотр существующих товаров
            </caption>
            <tr>
              <th>Номер товара</th>
              <th>Название товара</th>
              <th>Редактирование</th>
            </tr>
            <?php 
                $result = List_articles(); 
                while ($row = $result->fetch_assoc())
                {
            ?>

            <tr>
              <td><?php echo $row['id_cat']; ?></td>
              <td><?php echo $row['Name_cat']; ?></td>
              <td><input type="checkbox" name="delete_button[]" value="<?php echo $row['id_cat']; ?>"></td>
            </tr>

            <?php
               }      
            ?>

          </table>

        </div>  
        </body>
        <html>

Как допилить его до того, чтобы при добавлении записи, не было обновления страницы и отображалась добавленная запись в таблице?

CodeNOT · 19.11.2013, 16:41

Лучше думаю использовать готовый фреймворк, например jQuery. У него есть встроенные функции для работы с ajax

пример такой функции возможно в вашем случае:

Код:

function send_ajax_query(form_object){
$.ajax({
    type : "POST",
    url : 'путь до файла обработчика',
    data : $(form_object).serialize(),
    success : function(mess){
       тут что должно произойти после отправки
    },
    error: function(){Ошибканамана}
});
}

Fenex · 19.11.2013, 19:42

Только для ajax подключать такую тяжёлую библиотеку - кощунство!
Да и автор просил....

О ajax можно почитать здесь http://xmlhttprequest.ru/ , там же есть кроссбразуерная функция-конструктор.

P.S. могу посоветовать вот это https://code.google.com/p/microajax/

pompiduskus · 29.11.2013, 16:33

Пожно использовать такой вариант кроссбраузерного XMLHttpRequest()

Код:

function getXmlHttp(){
	var xmlhttp;
	
	try{ xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){
		try{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }catch(E){
			xmlhttp = false;
		}
	}
	
	if(!xmlhttp && typeof XMLHttpRequest!='undefined') {
		xmlhttp = new XMLHttpRequest();
	}
	return xmlhttp;
}

Naive · 29.11.2013, 16:40

Цитата:

Сообщение от Fenex

Только для ajax подключать такую тяжёлую библиотеку - кощунство!

Ну на этом уровне, действительно. А вот если нужны промисы, то я бы подцепил 100% =)

notHaker · 29.11.2013, 16:48

Цитата:

Сообщение от Fenex

Только для ajax подключать такую тяжёлую библиотеку - кощунство!
Да и автор просил....

О ajax можно почитать здесь http://xmlhttprequest.ru/ , там же есть кроссбразуерная функция-конструктор.

P.S. могу посоветовать вот это https://code.google.com/p/microajax/

Предлагаете ему изобрести велосипед? jQuery — отточенный и не такой уж "большой" инструмент, в таких случаях, кстати, очень даже нужный.

Fenex · 30.11.2013, 14:05

http://microjs.com/#ajax, сам использую чуть переделанный microAjax.

И не сколько предлагаю, сколько заостряю внимание на этом.

19.11.2013, 16:41	#2
CodeNOT Форумчанин Регистрация: 08.11.2010 Сообщений: 593	Лучше думаю использовать готовый фреймворк, например jQuery. У него есть встроенные функции для работы с ajax пример такой функции возможно в вашем случае: Код: `function send_ajax_query(form_object){ $.ajax({ type : "POST", url : 'путь до файла обработчика', data : $(form_object).serialize(), success : function(mess){ тут что должно произойти после отправки }, error: function(){Ошибканамана} }); }`

19.11.2013, 19:42	#3
Fenex Форумчанин Регистрация: 15.02.2012 Сообщений: 821	Только для ajax подключать такую тяжёлую библиотеку - кощунство! Да и автор просил.... О ajax можно почитать здесь http://xmlhttprequest.ru/ , там же есть кроссбразуерная функция-конструктор. P.S. могу посоветовать вот это https://code.google.com/p/microajax/ ^-.-^ My GitHub

29.11.2013, 16:33	#4
pompiduskus юзер как все Участник клуба Регистрация: 10.01.2012 Сообщений: 1,586	Пожно использовать такой вариант кроссбраузерного XMLHttpRequest() Код: `function getXmlHttp(){ var xmlhttp; try{ xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }catch(E){ xmlhttp = false; } } if(!xmlhttp && typeof XMLHttpRequest!='undefined') { xmlhttp = new XMLHttpRequest(); } return xmlhttp; }` <Дзен - Вся вселенная в тебе > \| Резюме: https://ch3ll0v3k.github.io/CV/

30.11.2013, 14:05	#7
Fenex Форумчанин Регистрация: 15.02.2012 Сообщений: 821	http://microjs.com/#ajax, сам использую чуть переделанный microAjax. И не сколько предлагаю, сколько заостряю внимание на этом. ^-.-^ My GitHub Последний раз редактировалось Fenex; 30.11.2013 в 14:10.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
C/C++ Использование функций при работе с двумерными массивами	bilochka	Помощь студентам	1	24.02.2013 21:27
С++ использование указателей при работе массива	bilochka	Общие вопросы C/C++	1	13.02.2013 15:02
С++ использование указателей при работе массива	bilochka	Помощь студентам	1	10.02.2013 17:10
Ошибка при работе с формами (Delphi)	MaGiS	Помощь студентам	3	16.03.2010 17:53