Пример работы 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. Хотя надеюсь все и так понятно.
Источник: sitear.ru
Июнь 12th, 2012 
Archi 
Опубликовано в рубрике 
Метки: