Блог

во-первых, имейте в виду, что это может получиться не так, как я предполагаю: p

Я работаю над небольшим личным проектом. У меня есть веб-страница с 3 списками на ней в отдельных разделах. при загрузке страницы появляется php-скрипт, который считывает данные из таблицы базы данных и помещает данные в эти списки в зависимости от значения a в столбце результирующего набора.

Затем на странице пользователь может перетаскивать данные из одного списка в другой, используя некоторые элементы javascript html 5.

Я хотел бы, чтобы была кнопка сохранения или что-то еще, что затем обновит базу данных, чтобы при следующей загрузке страницы списки были в том же состоянии, что и после того, как пользователь перетащил их

проблема в том, что я не могу придумать какой-либо способ, которым сохранить данные обратно в базу данных — вся эта штука на стороне сервера и клиента!

Есть предложения? я открыт для всех, если мне нужно выучить новый язык программирования, чтобы это произошло, то пусть будет так 🙂

Vade

Вам просто нужно отправить новый заказ обратно на сервер с помощью AJAX.

Предполагая, что ваш HTML выглядит следующим образом:

 <div id="FirstList"><ul>
  <li>Item 2</li>
</ul></div>
<div id="SecondList"><ul>
  <li>Item 1</li>
  <li>Item 4</li>
</ul></div>
<div id="ThirdList"><ul>
  <li>Item 3</li>
</ul></div>
<input type="button" id="save_btn" value="save"/>
  

Используя jQuery, это довольно просто:

 function saveStuff() {
    var data = {};
    // for each list
    for(var name in {'FirstList':1,'SecondList':1,'ThirdList':1}) {
        data[name] = [];
        // for each li in the list
        $('#' name ' li').each(function() {
            // fill data with item text content (you can change that)
            data[name].push($(this).text());
        }
    }
    // then send the new order to the server (with AJAX in JSON)
    $.post('save.php',
           {data: JSON.stringify(data)}, 
           function(){ alert('Data saved!'); }, 
           'json');
}

$(function(){
    // register the handler on the button
    $('#save_btn').click(saveStuff);
});
  

В save.php:

 $data = json_decode($_POST['data']);
$data['SecondList'][1]; // contains "Item 4"
  

добавьте список выбора к каждой строке [сохраните индекс, который должен быть первичным ключом в скрытом поле], с помощью javascript убедитесь, что они уникальны (1 может быть выбран один раз). При нажатии кнопки сохранить отправьте форму с помощью jQuery.post

Есть несколько решений.

1. Использование файлов cookie. (не …)

2. Использование AJAX. (может быть немного затруднено в зависимости от того, как вы с этим справляетесь)

3. Использование веб-хранилища, добавляемого с помощью HTML 5. (возможно, это проще всего реализовать)

Обратите внимание. Если вы хотите постоянно вносить изменения в базу данных, вам нужно использовать AJAX, в основном сделать запрос через JavaScript с некоторыми данными на страницу PHP, которая обновляет вашу базу данных.

Файлы cookie и веб-хранилище могут быть удалены браузером, который … использует конечный пользователь. Но все же. Структура таблицы для вашего проекта кажется сложной для реализации на вашем уровне. Вот почему я настоятельно рекомендую веб-хранилище.

Последующее редактирование

Обратите внимание, все ваши потребности в AJAX могут быть обработаны с помощью jQuery.ajax(), которая может быть очень полезной библиотекой во всех ваших начинаниях.