Войти Регистрация

Ajax + БД: взаимодействие ajax с базой данных


Пример работы Ajax с базой данных

Пример взаимодействия ajax и бд

Эта статья о взаимодействии ajax и базы данных. Под базой данных (БД) мы подразумеваем MySQL базу данных. Мы будем вставлять запись в таблицу базы данных, и показывать сообщение после записи информации. В этом примере мы будем добавлять веб-сайт (url и название сайта) в таблицу.

Как работает Ajax + БД?

В корневой папке сайта у нас есть файлы:

index.php – содержит простую форму ввода текста.

ajax_framework.js – javascript функции обеспечивающие работу ajax.

insert.php – php код, который будет вставлять запись в таблицу БД.

Имейте в виду, что index.php и ajax_framework.js не зависят от языка скриптов PHP, ASP, Coldfusion... Для примера, если вы используете другие языки сценария, вы можете переименовать расширение index.php на index.cfm или другое. Только не изменяйте исходного кода скрипта.

Шаг 1 – index.php

Ниже предоставленный код для index.php, который являет собою простую форму ввода, которая вызывает js функцию insertRecord(), которая находится в файле ajax_framework.js.

<!-- Include AJAX Framework -->

<script src="ajax/ajax_framework.js" language="javascript"></script>

<!-- Show Message for AJAX response -->

<div id="insert_response"></div>

<!-- Form: the action="javascript:insert()"calls the javascript function "insert" into ajax_framework.js -->

<form action="javascript:insert()" method="post">

<input name="site_url" type="text" id="site_url" value=""/>

<input name="site_name" type="text" id="site_name" value=""/>

<input type="submit" name="Submit" value="Insert"/>

</form>

Шаг 2 – javascript функция insert() в ajax_framework.js

Для работы ajax, нам необходимо создать объект XMLHttpRequest. Для его создания мы добавим этот код в ajax_framework.js:

/* ---------------------------- */

/* XMLHTTPRequest Enable */

/* ---------------------------- */

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();

После создания объекта XMLHttpRequest, создадим, в том же файле, функцию insert().

/* -------------------------- */

/* INSERT */

/* -------------------------- */

/* Required: var nocache is a random number to add to request. This value solve an Internet Explorer cache issue */

var nocache = 0;

function insert() {

 // Optional: Show a waiting message in the layer with ID login_response

 document.getElementById('insert_response').innerHTML = "Just a second..."

 // Required: verify that all fileds is not empty. Use encodeURI() to solve some issues about character encoding.

var site_url= encodeURI(document.getElementById('site_url').value);

var site_name = encodeURI(document.getElementById('site_name').value);

 // Set te random number to add to URL request

nocache = Math.random();

 // Pass the login variables like URL variable

http.open('get', 'insert.php?site_url='+site_url+'&site_name=' +site_name+'&nocache = '+nocache);

http.onreadystatechange = insertReply;

http.send(null);

}

function insertReply() {

if(http.readyState == 4){ 

var response = http.responseText;

// else if login is ok show a message: "Site added+ site URL".

document.getElementById('insert_response').innerHTML = 'Site added:'+response;

 }

 }

Вот и готов наш js файл для взаимодействия ajax и БД.

Шаг 3 – insert.php

Теперь мы напишем строки php кода, позволяющие создать запись в базе данных и вернуть сообщение или ошибку.

Данный код вставьте в файл insert.php:

<!-- Include Database connections info. -->

<?php include('config.php'); ?>

<!-- Verify if user exists for login -->

<?php

if(isset($_GET['site_url']) && isset($_GET['site_name'])){

$url= $_GET['site_url'];

$sitename= $_GET['site_name'];

$insertSite_sql = 'INSERT INTO SITE (site_url, site_name) VALUES('. $url. ',' . $sitename. ')';

$insertSite= mysql_query($insertSite_sql) or die(mysql_error());

<!-- If is set URL variables and insert is ok, show the site name -->

echo $sitename;

} else { 

echo 'Error! Please fill all fileds!';

}

?>

Этот файл необходимо редактировать под  свою базу данных. Для этого создайте файл конфигурации config.php и поместите в него настройки соединения с БД. Само собой не забудьте создать таблицу в базе данных с именем site и полями site_url, site_name. Хотя надеюсь все и так понятно.

Сохраните и испытайте работу примера на вашем локальном хостинге.

Остались вопросы по поводу ajax и БД? Пишите и спрашивайте в комментариях, если что-то непонятно по поводу взаимодействия ajax с базой данных. 



Дальше: PHP Скрипт загрузки файлов


Дискуссия по теме    30 Комментариев
Добавить комментарий
Никита 25.03.2015 в 12:48
Долго мучался с этой проблемой и наконец нашёл для неё решение. Огромное спасибо!
Сергей 01.03.2015 в 09:21
Спасибо за скрипт! Добавил свои поля, но не могу разобраться как передавать файлы. Подскажите пожалуйста кому не лень п.с. Если что - моя страница vk.com/depser_star
fan 19.01.2014 в 15:44
Спасибо , помогло !!
Виктор 06.05.2013 в 23:03
Ну ничё так)
Анастасия 02.12.2012 в 13:58
Уже весь мозг сломан, а проблема таки не решена. Смотрю в отладке - браузер не видит ajax_framework. Соответственно, он лежит там же, где и все
Евген 12.03.2014 в 15:04
Если файл ajax_framework.js лежит просто в корне, то подключать его стоит так: <script src="ajax_framework.js" language="javascript"></script> , а не так: <script src="ajax/ajax_framework.js" language="javascript"></script>
json 20.10.2012 в 06:51
Роман, считует и записывает var object = new window.XMLHttpRequest(); object.ajax = function (key,data) { this.open(’POST’,'file.php’,true); this.setRequestHeader(’Content-Type’,'application/x-www-form-urlencoded’); this.send(’key=’ key ‘
MIlo 27.07.2012 в 21:13
почитал коментарии увидел что многие не смогли записывать текст в базу столкнулся с тойже проблеммой решил заменой в файле insert.php : $insertSite_sql = 'INSERT INTO SITE (site_url, site_name) VALUES('. $url. ',' . $sitename. ')'; на $insertSite_sql = ("INSERT INTO site (site_url, site_name) VALUES('$url','$sitename')");
Иван 30.06.2012 в 19:43
тоже пока не могу разобратся, создал базу, файлы, весь код раскидал по файлам теперь пытаюсь прикрутить к форме добавления новостей на сайт но что то жму добавить и тишина вот посмотрите http://newsrbk.ru/news_add.php что то не могу понять что не так
Я 10.05.2012 в 01:53
Подскажите пожалуйста как в этой строке document.getElementById('insert_response').innerHTML = 'Site added:' response; вывести после Site added: другую переменную, не урл а имя сайта... у меня просто ваш вкрипт добавляет изображения и хочу чтоб он писал не только "Добавлено" а "Добавлено :имя изображения:" Заранее благодарен!
Тарас 10.05.2012 в 13:07
Я так понимаю выводиться то, что передаеться php файлом (insert.php)... строкой echo $sitename; Просто выведите другую переменную, которую вам необходимо... через echo
Я 11.05.2012 в 22:49
Спасибо за внимание к вопросу но проблема оказалась намного легче (просто понял как оно работает): var response = encodeURI(document.getElementById('atitle').value); document.getElementById('insert_response').innerHTML = 'Добавлено: ' response; присвоил response другое значение.
Я 14.05.2012 в 20:24
Возникла проблема с кодировкой:( var response = encodeURI(document.getElementById('atitle').value); document.getElementById('insert_response').innerHTML = 'Добавлено: ' response; atitle - может быть как кирилицей так и латиницей, так вот, кирилицу пишет:?%(%(:%*%*?ПП. подскажите где задать кодировку (на сайте УТФ8 задана в подключении к БД)
Тарас 16.05.2012 в 01:50
Насчет кирилицы... я делал так, каждый элемент GET массива перекодировал с помощью iconv, вот так это делаеться... while(list ($key, $val) = each ($_GET)){$_GET[$key]=iconv("UTF-8","CP1251", $_GET[$key]);} Если не ошибаюсь, это нужно вставить в insert.php, после строки if(isset($_GET['site_url']).....
Я 18.05.2012 в 20:55
В базу все нормально пишет, а вот в этом блоке <div id="insert_response"></div> в котором выводится "Добавлено...." переменная response которая равна var response = encodeURI(document.getElementById('atitle').value); и выводит казябры((( Тоесть надо как-то в аяксе кодировку настроить... Пока не нашел как поменять...
Павел 02.05.2012 в 16:32
Тарас, не работает location.href = 'http://sitear.ru' есть еще варианты? Или нельзя делать редирект после добавления данных в дб с помощью ajax - в принципе?
Тарас 02.05.2012 в 16:32
Тогда не знаю... (((
Мария 28.03.2012 в 19:58
Большое спасибо за статью...=)
Роман 18.03.2012 в 16:53
Если набрать адрес: http://x.xx/insert.php?site_url=www.mysite.ru
Павел 14.03.2012 в 13:52
А как сделать редирект если данные успешно добавлены? Что-то вроде: if($insertSite) header('Refresh: 3; URL=http://yandex.ru'); echo 'Через 3 сек. вы будете перенаправлены на новую страницу.'; Только хэдер нельзя (и meta тоже), а location.replace("http://2011kino.ru"); - не работает. Как тут быть?
Тарас 14.03.2012 в 16:05
Попробуйте location.href = 'http://sitear.ru' должно помочь...
Дмитрий 21.02.2012 в 11:54
Помогите пожалуйста реализовать ввод символов а не только цифр. Ну или публично и понятно разъясните как это реализовать, а то уже пол дня статью что выше ссылка есть, мучаю ничего не выходит... я конечно понимаю что знания у меня нулевые, но все же хочется разобраться за ранее спасибо
Тарас 22.02.2012 в 12:30
Сделайте по примеру этой статьи http://sitear.ru/material/ajax-php, будет работать 100%, у нас на сайте комментарии и многое другое по этому принципу работает.
Мария 16.02.2012 в 23:48
Добрый вечер, у меня срабатывает только если вводить цифровые значения. В случае любых букв, выдается ошибка, как и у Алексея. Приведите, пожалуйста, пример вводимых данных, когда скрипт должен сработать, если не сложно.
Тарас 17.02.2012 в 00:12
Смотрели другой пример взаимодействия ajax с php? ссылка выше, под комментарием Алексея
Тарас 22.12.2011 в 23:32
Этот ответ присылает обработчик, который работает с ajax, только сам понять не могу, где у вас появилось неизвестное поле test... Вот, можете воспользоваться другим примером работы ajax с PHP. http://sitear.ru/material/ajax-php Впринцыпе, главное понять как передаются переменные из ajax на серверную сторону (php), далее вы принимаете эти переменные и пишите в БД, как это обычно делается.
Леша 22.12.2011 в 16:40
Почему, когда я добавляю данные появляется сообщение "Site added: Unknown column 'test' in 'field list'"? Что за 'field list'?
Тарас 14.11.2011 в 16:30
В данной статье приводится пример работы с базой данных без использования библиотеки jquery. Я не работаю с этой библиотекой, но могу предположить, что записать информацию в БД, также как и считать, разница только в PHP скрипте. В случае записи в БД: вы передаете в php скрипт все необходимые данные для записи, пользуясь insert запросом вставляете, в случае успешного результата выводите через echo что все прошло в норме. Для примера, могу посоветовать, как пример статью о скрипте комментариев: http://sitear.ru/material/php-script-kommentariev Еще раз повторюсь, в статье НЕ ИСПОЛЬЗУЕТСЯ библиотека jquery.
Роман 14.11.2011 в 00:21
Помогите пожалуйста, научите самым простым способом записать данные в базу данных, при помощи Jquery.ajax! Я так научился только считывать данные! А записывать сложновато что-то.
Сергей 22.07.2011 в 15:18
Хороший пример работы ajax. Главное что коротко и по сути. Не люблю долго читать )))
Добавить комментарий
Просмотров: 33929