Сохранение/возобновление выполнения HTML-заявки

У меня есть большая форма, содержащая более 100 полей. Вновь появилось несколько динамически генерируемых полей, в которых пользователи могут добавлять несколько записей, поэтому есть справедливый бит JavaScript/JQuery.Сохранение/возобновление выполнения HTML-заявки

Какие подходы следует рассмотреть, чтобы сохранить такую форму и заселить все эти поля.

1) Сериализуйте объект. В конце концов я сохраняю эту большую форму в сериализованном объекте после нажатия кнопки «Сохранить». Однако, думая о количестве кодирования, которое требуется для регенерации всех этих динамически генерируемых полей/таблиц после «Возобновить», мне интересно узнать о втором подходе.

2) Храните весь HTML-код в тегах формы. Просто используя вызов AJAX, передайте все содержимое (включая динамические структуры) в БД. Кажется, было бы проще получить доступ к объекту с помощью JQuery и повторно заполнить форму после «Возобновить». Тем не менее, я еще не проверял это.

Любое понимание/советы о том, как другие получили вокруг этого, будут высоко оценены.

источник

2016-01-10 Norman Bentley

Я бы предложил посмотреть на BackboneJS, поскольку он будет хранить и перемещать данные намного проще для вас.

Это пара вступительных книг по позвоночнику, которые научат вас всем основам, которые вам нужно знать через день или два.

источник

2016-01-10 19:14:42

Благодаря Дэвиду. Я реализовал свой проект выше, используя ASP.NET MVC, поэтому я вижу много сходства в том, как данные перемещаются из представления в БД и наоборот, к файлу Bakcbone.js. Я уже могу хранить свою модель и получать изменения, моя основная проблема - получение данных из БД и повторное заполнение этих динамически создаваемых структур (поля ввода/таблицы/кнопки). Я все еще читаю документацию, надеюсь, что она сможет помочь мне воссоздать эти динамические структуры. –

Если вы укажете имена ваших html-полей в соответствии с именами в вашей модели, вы должны будете написать простой цикл для этого. –

Чтобы сохранить ответы, вы можете использовать localStorage или sessionStorage. Вот простой пример, который хранит массив имен и значений. При сохранении он подталкивает все к доступному хранилищу, восстанавливает в массиве get массив из локального хранилища и устанавливает значение входных данных для сохраненных данных.

Нет необходимости в запросе ajax.

не работает в стеке из-за "не то же происхождения-политики в IFRAME"

$(function() { 
 
    var $form = $('#form'), 
 
    $save = $('#save'), 
 
    $restore = $('#restore'), 
 
    results = [], 
 
    storage = window.localStorage || window.sessionStorage; 
 

 
    $form.on('change', 'input[type=text]', function(e) { 
 
    results = $form.serializeArray(); 
 
    console.log('change', results); 
 
    }); 
 

 
    $save.on('click', function(e) { 
 
    storage.setItem('form-inputs', JSON.stringify(results)); 
 
    $form.reset(); 
 
    }); 
 

 
    $restore.on('click', function(e) { 
 
    var inputs = JSON.parse(storage.getItem('form-inputs')) 
 
    inputs.forEach(function(input) { 
 
     $('[name=' + input.name + ']').val(input.value); 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://codepen.io/synthet1c/pen/WrQapG.js"></script> 
 
<form id="form"> 
 
    <input type="text" name="first_name" id="first_name" value="foo" /> 
 
    <input type="text" name="last_name" id="last_name" value="bar" /> 
 
    <input type="button" id="save" value="save" /> 
 
    <input type="button" id="restore" value="restore" /> 
 
</form>

источник

2016-01-10 19:43:33 synthet1c

Сохранение/возобновление выполнения HTML-заявки

ответ

Смежные вопросы