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 Скрипт загрузки файлов