Нужен совет по AJAX

[Fastfold]

Здравствуйте,сразу прошу прощения за мою орфаграфию. Ну так вот, недавно передомной появилась задача сделать небольшое веб-приложение с использованием таких технологий как: PHP, MySql [ PDO или MySqli ], AJAX [ например JQUERY ], JSON.

Посколько раньше я не когда не сталкивался с JS, прошу совета или помощи у вас. Привиду пример, чтобы было понятнее.

Представим страницу на которой выводится:

• Форма добавления задачи
  
• Задачи со статусом ( например завершена и незавершена )
  
• И счетчик количества задач.
  

PS. Так же на странице должна быть возможность удалить задачу, изминить статус задачи. И все изменения должны сразу отображатся.

Как все это реализовать с использованием PHP и MySql понятно,но как все это сделать без перезагрузки страница возникают проблемы. Вот такой небольшой вымышленный пример. Я даже нашел что-что похожее в интернете ( сыллка). Но там, слишком все неясно.

Может кто подскажет, что дельное как это реализовать и в сторону каких функций jquery смотреть.Если покажите примеры, цены вам не будет, спасибо большое.

Edited October 22, 2013 by Fastfold

[Николя223]

Как все это реализовать с использованием PHP и MySql понятно,но как все это сделать без перезагрузки страница возникают проблемы

Всё точно также. Единственное для транспортировки используется Аякс.

Если у вас в программировании вобще никаких знаний нет, то долго объяснять. Если нет, то - сами разберётесь))

вот документация http://jquery-docs.ru/Ajax/

Аякс - это транспорт. Т.е. вы отправляете запрос к скрипту или странице, и т.д. Получаете в ответ данные и вставляете их к себе на страницу.

В Аяксе используются POST и GET запросы), JSON используется для передачи массивов.

С помощью Аякса - практически невозможно получить информацию с другого домена, без спец. разрешения, из за политики безопасности. Только связка Аякс и Curl.

Ещё в инструментарии аякса есть метод load()(не путать с одноименной функцией ожидания загрузки ). Он хорош своей простотой. Берет страницу, напрямую парсит её и вставляет нужные данные. удобно , но долго.

Мой вам совет. Если вы в PHP разбираетесь, сделайте с начала прототип - как вы видите это без JS, дальше видно будет

[Fastfold]

Например создал я класс, с функцией get_completed в которой получаем информацию их базы данных.

class Tasks {
private $db;

public function __construct($database) {
$this->db = $database;
}

public function get_completed() {
$query = $this->db->prepare("SELECT * FROM `list` WHERE `status` = 0");
try {
$query->execute();
}
catch(PDOException $e) {
die($e->getMessage());
}
return $query->fetchAll(PDO::FETCH_ASSOC);
}

В файл init.php поместил инициализацию класса.

<?php
require_once 'config/database.php';
require_once 'classes/tasks.inc.php';

$tasks = new Tasks($db);
?>

В файле json.php перевожу данные в формат нужный формат.

<?php
require_once 'core/init.php';
$completed = $tasks -> get_completed();
echo json_encode($completed);
?>

В myscript.js привожу все в читабельный вид.

$(document).ready(function() {
$('#show-records').click(function() {
$.post('json.php', function(data) {
var pushedData = jQuery.parseJSON(data);
var htmldata = "";
$.each(pushedData, function(i, serverData) {
htmldata = htmldata + serverData.name + "Status: " + serverData.status + " Date:" + serverData.date + "<br/>";
});
$('#show-list').html(htmldata);
});
});
});

Правильно ли я начал делать, и как это вывести в html таблице ?

Edited October 22, 2013 by Fastfold

[stars]

ну скажем нужно вам проверить статус по клику, выглядеть это будет так:

1) Кликаете мышкой на какой то элемент

2) По событию клика JS обращается к серверу(какой то странице + можно передать GET или POST)

3) Получаем данные хоть в json хоть просто в html хоть как это зависит от того какие данные отдаст ваша страница(PHP) + желательно заголовки правильные прописать для json

4) Полученные данные обрабатываем и выводим на страницу.

Вот простой пример:

У нас есть 2 файла на сервере index.html - страница где все выводится и некий status.php нам надо по клику получить информацию из status.php и вывести ее в h1#main

index.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тест</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>

<h1 id="main">Я тут!</h1>

<div id="click">кликни</div>


<script type="text/javascript">
// присваиваем событие клика
$(document).on('click', '#click', function()
{
// получаем данные из status.php и записываем их в элемент с ID main, причем при получении мы попутно отправим данные методом POST
$('#main').load('status.php', { str: 'getStatus' } );

return false;
});

</script>
</body>
</html>

<?php

echo isset($_POST['str']) ? $_POST['str'] : 'ошибка';

я для простоты использовал Jquery но думаю главное это идея и она ясна... Так же я не рассматривал вариант с json данными но там не намного сложнее просто при получении нужно будет разбирать полученные данные, в jquery для асинхронных запросов много функций .ajax .get .post .load

Edited October 22, 2013 by stars

[wwt]

$.post("http://mysite.ru/test.php",//адрес запроса
$('#myForm').serialize(),//post данные берем из формы с помощью метода .serialize() на выходе получается строка вида "key=value&key=value"
function(data) {//функция которая примет ответ и обработает его. data это уже объект инициированный из JSON строки ответа
},
"json"//указываем что ответ будет в JSON
);

Edited October 22, 2013 by wwt

[stars]

В myscript.js привожу все в читабельный вид.

$(document).ready(function() {
$('#show-records').click(function() {
$.post('json.php', function(data) {
var pushedData = jQuery.parseJSON(data);
var htmldata = "";
$.each(pushedData, function(i, serverData) {
htmldata = htmldata + serverData.name + "Status: " + serverData.status + " Date:" + serverData.date + "<br/>";
});
$('#show-list').html(htmldata);
});
});
});

Правильно ли я начал делать, и как это вывести в html таблице ?

все верно, вы получили некий массив вам нужно пройти по массиву(что вы и делаете) и присваивать значения нужным ячейкам... Например у вас некий таск лист

<table>
 <tr id="$n">
  <td class="status">.......</td>
 </tr>
 .....
</table>

$.each(pushedData, function(i, serverData) {
 htmldata = htmldata + serverData.name + "Status: " + serverData.status + " Date:" + serverData.date + "<br/>";
 $('#' + id + ' td.status').html(htmldata);
});

[Fastfold]

Не могу сообразить, что-то. (myscript.js)

PS. При вставке html тэгов например "<tr><td>" + serverData.name + "<td/></tr>" то вообще не работает.

$(document).ready(function() {
$('#show-records').click(function() {
$.post('json.php', function(data) {
var pushedData = jQuery.parseJSON(data);
var htmldata = "";
$.each(pushedData, function(i, serverData) {
htmldata = htmldata + serverData.name + serverData.status + serverData.date + "<br />";
$('#show').html(htmldata);
});
});
});
});

HTML

<table class="table table-striped">
	 <thead>
	 <tr>
		 <th>Task</th>
		 <th>Status</th>
		 <th>Date</th>
		 <th></th>
	 </tr>
	 </thead>
	 <tbody>
	 <?php
		 foreach ($completed as $task) {
		 echo "<tr><td>".$task['name']."</td><td>".$tasks->get_status($task['status'])."</td>"."<td>".$tasks->get_date($task['date'])."</td><td>Removed</td></tr>";
		 }
	 ?>
	 </tbody>
	 </table>
	 <hr>
	 <table class="table table-striped">
	 <thead>
	 <tr>
		 <th>Task</th>
		 <th>Status</th>
		 <th>Date</th>
		 <th></th>
	 </tr>
	 </thead>
	 <tbody>
	 <tr id="show"></tr>
	 </tbody>
	 </table>

База данных

Вывод данных. Первая таблица это вывод php,тоже самое нужно сделать на JS.

Снизу это то что мне удалось вывести на данный момент ( файл myscript.js )

PS. Для преобразования даты и статуса я сделал две функций. Но как такое осуществить при выводе на JS ?

public function get_status($status) {
$array = array( "Completed", "Incomplete", "Removed" );
if (isset($status)) {
return $array[$status];
}
else {
return false;
}
}
public function get_date($date) {
if (isset($date)) {
return date('j.m.y', $date);
}
else {
return false;
}
}

Еще было бы не плохо разобратся как изминить стату по нажатию на него, и удалить задачу. ( ведь запросы надо отправлять как то обратно ).

Edited October 22, 2013 by Fastfold

[Николя223]

если вы никогда не работали с JS, то учитесь пользоваться консолью браузера)) она не заменима и показывает все ошибки.

у вас тривиально простая задача, но делаете вы её как то криво =) завтра буду на работе гляну

Да и смотрите - раньше JS разработчики использовали для отладки alert() но алерты - тоже не все показывают - например ассоциативные массивы - нет.

Но jQuery подружила их с консолью.

проверяйте то что на выходе у вас в консоли console.log(data)

тогда вы сразу увидите что не так... и как вообще ваши ассоциативные массивы разобрать

в хроме её можно открыть : shift+ ctrl+j, либо F12

Edited October 22, 2013 by Николя223

[Fastfold]

Вот криво, я так и думал

Если будет возможность сделать пример, на основе мойх данных было бы очень замечательно.

Я бы хоть увидел, как это надо делать верно)

Edited October 22, 2013 by Fastfold