Как эффективно изменить локальные изменения, внесенные в HTML-документ через JavaScript обратно на сервер?

Question

Допустим, вы отображаете список элементов div, каждый из которых представляет элемент списка с определенными свойствами (например, список задач):

<div class="list">
    <div class="items" id="item1">
        <div class="itemtitle">Some title</div>
        <div class="icon"><img src="1.jpg"></div>
        <div class="footer1" />
    </div>
    .
    .
    .
    <div class="items" id="itemN">
        <div class="itemtitle">Some other title</div>
        <div class="icon"><img src="2.jpg"></div>
        <div class="footer4" />
    </div>
</div>

Теперь у каждого элемента есть три свойства (заголовок, определенныйзначок и пользовательский нижний колонтитул).Все эти свойства могут быть изменены с помощью javascript (скажем, нажатие на одну из них переключает опции).Теперь каждый раз, когда что-то меняется, я хочу сохранить эти изменения на сервере (и нет, я не хочу хранить весь блок HTML-кода (таким образом я не могу сортировать по свойствам позже, также это ужасно;)).Каков был бы самый элегантный и эффективный способ сделать это?(Я использую jQuery, если это поможет ...)

Спасибо большое!

Answer 1

Если вы хотите передать все изменения обратно на сервер за один раз, то, естественно, вам нужно поместить их в какой-то элемент <input>.<input type="hidden"> - самый очевидный выбор.Если вы идете по этому пути, вы можете использовать обработчик onsubmit в своей форме, чтобы обновить скрытые входные данные из текста в документе, или вы можете обновить скрытые входные данные в режиме реального времени при обновлении самого документа.

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

Вы можете создать целую кучу скрытых входных данных с name="itemtitle" и связкой с name="icon" и т. Д., Если ваша серверная инфраструктура знает, как интерпретировать полученные данные публикации формы как список-списокзначения для itemtitle и для значка.

Вы можете создать скрытые вводы с помощью name="itemtitle1" и т. д.

Или вы можете просто использовать один фиксированный скрытый ввод и заполнить его всем списком, закодированным в некоторой форме.например, JSON, если у вашей серверной инфраструктуры есть простой метод для анализа JSON.Тогда вы будете использовать javascript либо в onsubmit, либо при каждом изменении, чтобы обновить скрытый ввод, чтобы он состоял из [{itemtitle = "what", icon = "what, ...}, {itemtitle =" ... "}] и разобрать его в виде списка JSON на стороне сервера.

Другой вариант - вообще не использовать скрытые входные данные, а использовать текстовые поля в самом документе. С помощью стилей можно создать вид текстового поля.недоступно для редактирования. Если вы это сделаете, то ваша структура списка будет отправлять сообщения обратно сама по себе, когда она является частью публикации формы.

Answer 2

Одна вещь, которую вы можете попробовать, - это собрать информацию в литерал объекта JavaScript, который по сути похож на структуру хэш-таблицы / словаря, но вы можете вкладывать структуры внутрь. Это не фиксированная структура и не требует наличия скрытых элементов в вашей DOM - вы можете полностью отделить ее от вашей DOM.

Затем вы можете воспользоваться нотацией JSON для передачи этой информации на ваш сервер через POST. Использование библиотеки Дугласа Крокфорда JSON2.js позволяет сериализовать и десериализовать эту структуру в / из литеральной нотации объекта. И есть большая поддержка JSON на стороне сервера.

Итак, для вашего примера вы можете сделать что-то подобное в jQuery (я немного расширил вашу разметку, чтобы иметь действующий рабочий пример):

<div class="list">
    <div class="items" id="item1">
        <div class="itemtitle">Some title</div>
        <div class="icon"><img src="1.jpg"></div>
        <div class="footer1">blah</div>
    </div>
    <div class="items" id="item2">Stuff</div>
    <div class="items" id="item3">Stuff2</div>
    <div class="items" id="item4">
        <div class="itemtitle">Some other title</div>
        <div class="icon"><img src="2.jpg"></div>
        <div class="footer4">boo</div>
    </div>
</div>

( Я предполагаю, что ваши DIV-идентификаторы последовательно нумеруются - item1, item2, item3 и т. Д. )

и JavaScript ...

var theData = {};
$(document).ready(function() {
    $(".items").click(function() {
        theData["title"] = $(this).find(".itemtitle").text();
        theData["icon"] = $(this).find(".icon img").attr("src");
        theData["footer"] = $(this).find(".footer" + ($(this).index()+1)).text();

        alert(JSON.stringify(theData));
    });
});

( Я предполагаю, что данные нижнего колонтитула могут быть выбраны на основе последовательно пронумерованного идентификатора DIV. )

Теперь, когда ваши измененные данные находятся в литеральной переменной объекта theData, вы можете отправить их на ваш сервер / службу с помощью вызова jQuery $.ajax:

$.ajax({
    url: "/ajax_json_echo/",
    data: theData,  //just pass the literal to your server...most can handle it
    type: "POST",
    dataType: "json",
    success: function(data) { alert(JSON.stringify(data)); },  //output it readable form
    error: function(x, t, m) { alert("Error: " + t + " :: " + m); }
});

Вы можете проверить скрипку Я собрал эту демонстрацию.

Надеюсь, это поможет!

Answer 3

Пока у вас есть уникальный идентификатор для каждого блока, вы можете нажимать каждое изменение на размытие этого элемента.

Пользователь меняет .itemTitle в # item4, вы знаете, что идентификатор равен 4. Таким образом, вы можете использовать запись ajax, отправить идентификатор элемента, тип элемента (название) и обновленное значение. Затем на стороне сервера (например, php) вы можете выполнить простое обновление mysql (я предполагаю).

Это имеет смысл? Я могу показать фактический код в случае необходимости.