среда, 18 октября 2017 г.

PHP + jQuery + AJAX + JSON + MySQL

Выведем из БД с помощью ajax.



Файл .htaccess
AddDefaultCharset UTF-8

Файл db.php
<?php
$link = mysqli_connect("localhost", "root", "", "cart");

if (!$link) {
    echo "Ошибка: Невозможно установить соединение с MySQL." . PHP_EOL;
    echo "Код ошибки errno: " . mysqli_connect_errno() . PHP_EOL;
    echo "Текст ошибки error: " . mysqli_connect_error() . PHP_EOL;
    exit;
}

//echo "Соединение с MySQL установлено!" . PHP_EOL;
//echo "Информация о сервере: " . mysqli_get_host_info($link) . PHP_EOL;

mysqli_close($link);
?>

Файл server.php
<?php
// Выборка всех книг из БД.
require_once('bd.php');

$link = mysqli_connect("localhost", "root", "", "cart");

$sql = "SELECT * FROM products";
$query = mysqli_query($link, $sql) or die(mysqli_error($link));


$array = array();

while($row = mysqli_fetch_assoc($query)) {
$array[] = $row;
}

$json = json_encode($array);
echo $json; //
?>

Файл server1.php
<?php
// Выборка одной книги по id
require_once('bd.php');

$link = mysqli_connect("localhost", "root", "", "cart");

if(isset($_GET['id'])) {
$id = $_GET['id'];

$sql = "SELECT * FROM products WHERE id = $id";
$query = mysqli_query($link, $sql) or die(mysqli_error($link));
$row = mysqli_fetch_row($query);
$json = json_encode($row);
echo $json;
}


?>
Файл index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery-3.2.1.js"></script>
<script src="myscript.js"></script>
</head>
<body>
<h1>PHP + jQuery + AJAX + JSON + MySQL</h1>
<div id="show_books"></div>
<div id="book" style="display: none"></div>
</body>
</html>

Файл myscript.js
$(document).ready(function(){
//alert('hello!');

$.ajax({
url:"server.php",
type:"GET",
dataType:"json",
success:function(json){
var j = 0;
var out = '';
while(j <= json.length-1) {
out += "<p class='name' style='cursor:pointer; text-decoration:underline' data-id='"+ json[j].id +"'> Назание книги: " + json[j].title + "</p>" +
"<p> Краткое описание: " + json[j].description + "</p>" +
"<p>Полное описание: " + json[j].body + "</p>" +
"<p>Цена: " + json[j].price + " руб.</p> <br> <br> <hr>";
j++;
}
$("#show_books").html(out);
$("#show_books .name").click(function(){
var id = $(this).data("id");
//alert(id);
$("#show_books").hide();
$("#book").show();

$.ajax({
url:"server1.php",
type:"GET",
data: ({id : id}),
dataType:"json",
success: function(data){
//alert(id);
var output = "<p> Название книги: "+data[1]+"</p>"+
"<p> Краткое описание книги: "+data[2]+"</p>"+
"<p> Полное описание книги: "+data[3]+"</p>"+
"<p> Цена книги: "+data[4]+" руб.</p>";
$("#book").html(output);
}
});

});
}
});


});

Комментариев нет:

Отправить комментарий

Materialize-css. Футер

Сделаем футер и прижмем к низу страницы. Документация: https://materializecss.com/footer.html