Пример работы ajax с mysql и php

В данной стать рассмотрим как создаются простые запросы в базу данных с помощью ajax. и на примере создадим страничку которая создаёт блоки, а также изменяет ширину блока и перемешивает в случайном порядке.

История написания данной статьи: как то раз хотел устроиться в одну компанию, и прислали данную работу так и появилась статья.

шаг 1.

С начало создадим конструкция нашего тестового примера

  1. css/
    • stile.css
  2. include/
    • bd.php     —  // Соединение с базой
  3. js/
    • -jquery-1.4.4.min.js   // плагин можно скачать с официального сайта
    • -jquery-ui-1.8.9.custom.min.js // плагин ui с можно скачать с официального сайта
    • -script.js  // наш скрипт
  4. index.php
  5. action.php  // страница действия
  6. block.php // наш блок

содержание index.php

<?php include("include/bd.php");
$result=mysql_query("select * from settings where id='1'");
$myrow = mysql_fetch_array ($result);
$w = $myrow['width'];
$result=mysql_query("select * from blocks ORDER BY id ASC");
$myrow = mysql_fetch_array ($result);
do { /*echo $myrow['id']; */ $kol=$myrow['id'];} while($myrow = mysql_fetch_array ($result));
/*echo $kol;*/

?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Untitled Document</title>
<link href="css/stile.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
function show_messages()
{
$.ajax({
url: "block.php",
cache: false,
success: function(html){
$("#main-content").html(html);
}
});
}
$(document).ready(function() {

show_messages();

var moto = document.getElementById('block');

var i=<? echo $w;?>;

$('#Add').click(function(){

$.ajax({
type: "POST",
url: "action.php",
data: "username="+i+"&action=add",
success: function(){
show_messages();
}
});

});
$('#Resort').click(function(){

var res='<? echo $kol; ?>';

$.ajax({
type: "POST",
url: "action.php",
data: "action=resort",
success: function(){
show_messages();
}
});

});
$('#Increase').click(function(){
i=i+20;

$.ajax({
type: "POST",
url: "action.php",
data: "width="+i+"&action=edit",
success: function(){
show_messages();
}
});

});
$('#Decrease').click(function(){
i=i-20;

$.ajax({
type: "POST",
url: "action.php",
data: "width="+i+"&action=edit",
success: function(){
show_messages();
}
});

});

});
</script>

</head>
<body>

<div id="header">
</div>

<div id="content">
<div id="block-main"  >
<h1>Select Action</h1>
<p id="Add">Add block with random text</p>
<p id="Resort">Resort blocks randomly</p>
<p id="Increase">Increase blocks width</p>
<p id="Decrease">Decrease blocks width</p>
</div>

<div id="main-content"></div>

<div id="clear" ></div>
</div>

<div id="footer">
</div>
</body>
</html>

Содержание bd.php

<?php $db=mysql_connect("localhost","root","");
mysql_select_db("script",$db);
?>

Содержание stile.css

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd,  fieldset, form, label, legend,  caption, tbody, tfoot, thead,  th {
margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; }
/*****Базовые элементы Определение стилей для тегов: body, h1-h6, ul, ol, a, p и т.п.*****/
body{
background: #e7e7e7; }
h1{ font-size:14px; color:#000000; font-weight:bold; text-align:left;  padding-top:4px; padding-bottom:10px;}

p{ text-align:left;}

#header{ background:url(image/header.jpg) no-repeat; width:874px; height:129px; margin-left:auto; margin-right:auto;}
#content{ background:#FFFFFF; width:874px; margin-left:auto; margin-right:auto;  }
#block-main, #block{ background:url(image/baground.png) repeat-x #FFFFFF; float:left;
padding-left:12px;
padding-right:12px;
margin-bottom:30px;
margin-left:30px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 15px;
-moz-box-shadow: #666 0px 2px 15px;
box-shadow: #666 0px 2px 15px;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url(/PIE.htc);}
#block-main{ height:150px; width: 200px;}
#block{ width: 200px;}
#block-main p{ font-size:14px;  font-weight:bold;  border-bottom:1px solid #f0f0f0 ; padding-top:6px; cursor:pointer; color: #004388; }
#block-main a{ text-decoration:none; }
#footer{background:#FFFFFF; width:874px; margin-left:auto; margin-right:auto; height:100px;}

.displei_no { display:none;}
.displei_yes { }

#clear{clear:both; width:100%; height:1px;}
/*div { border:1px solid  #000000; }*/

Содержания файла block.php

<?php include("include/bd.php"); ?>

<?

$result=mysql_query("select * from blocks ORDER BY id ASC");

$myrow = mysql_fetch_array ($result);

do { $kol=$myrow['id'];} while($myrow = mysql_fetch_array ($result));

$result=mysql_query("select * from settings where id='1'");

$myrow = mysql_fetch_array ($result);

$boks  = $myrow['sort'];

$width=$myrow['width'];

$nomerboks = explode(" ", $boks);

for ($j = 1; $j <= $kol; $j++) {

$id= $nomerboks[$j];

$result=mysql_query("select * from blocks where id='$id'  ");

$myrow = mysql_fetch_array ($result);

if ($myrow['id']==$nomerboks[$j]) {

?>

<div id="block" style="width:<? echo $width; ?>px"  >

<h1>Select Action <? echo $myrow['id']; ?> </h1>

<p><? echo $myrow['text']; ?> </p>

</div>
<?
}
}
?>

Содержания файла action.php






Комментарии закрыты

Другие статьи рубрики "Компонет ajax"