«Создание или обновление» поведение формы при ударе кнопку

Question

назад У меня есть следующий рабочий процесс на веб-сайте:

1. Некоторые пользователя John Doe объявляет компанию через форму 1 (поля: название, головной офис место)
2. После того, как Джон Доу отправляет (HTTP POST) форму 1, он перенаправляется (HTTP 302) в форму компании 2 с дополнительной юридической информацией о компании.

Проблема заключается в том, что если Джон Доу нажимает кнопку «Назад» своего браузера во время шага 2, он приземляется на форму 1 с данными, заполненными браузером (используя значения, которые он уже отправил - это то, что Firefox и основные браузеры, похоже, делают).

John Doe может подумать, что он может использовать эту форму для обновления некоторой информации (например, исправить опечатку в названии компании), тогда как он фактически создаст новую компанию, которая делает это, поскольку мы не знаем на сервере кто хочет объявить новую компанию или обновить тот, который он только что создал.

Знаете ли вы какое-нибудь простое решение для решения этой проблемы?

Answer 1

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

1. Давайте предположим, что пользователь находится на странице /some-page, который содержит «Создать новую компанию» кнопку. Когда пользователь откроет эту страницу, на стороне сервера будет выполнен специальный метод createOrFindCompanyDraft(). Этот метод создает новую «проектную» запись в БД (только для текущего пользователя). Например, черновик записи имеет первичный ключ id=473. Когда вы снова запустите этот метод, он вернет ту же запись с id=473 (с статусом «черновик»). Запись «Черновик» должна отображаться на любых других интерфейсах. И «Создать новую компанию» имеет ссылку /company/common/473.

2. Когда пользователь перейдет к /company/common/473, вы отобразите форму 1, которая будет заполнена из «черновиковой» записи. В первый раз пользователь увидит пустую форму. Технически пользователь обновит существующую запись, но вы можете отобразить заголовок «Создать новую компанию» на странице.

3. Затем пользователь переходит к форме 2, например /company/legal-info/473, для этой формы вы создаете аналогичную черновик записи (аналогично шагу 1).

4. Когда пользователь отправляет форму 2, вы удаляете статус «черновик» из записи id=473 (и любых связанных записей).

5. В следующий раз, когда пользователь откроет страницу /some-page, будет создана новая черновая запись для текущего пользователя.

История браузера будет содержать:

• /some-page
• /company/common/473
• /company/legal-info/473
• /some-page2

Мне нравится этот подход, потому что все для m только записи обновления. Вы можете перейти к предыдущей/следующей форме много раз (например, кнопки «Назад»/«Вперед»). Вы можете закрыть браузер и открыть не заполненные формы завтра. Этот способ не требует каких-либо дополнительных манипуляций с историей браузера.

Answer 2

Сценарий javascript/jquery после загрузки страницы для удаления всех входов. Это предотвратит путаницу «обновления компании».

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

$('#elementID').val(''); 

Answer 3

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

Скажем, форма шага 1 указана по адресу /create_company/. Тогда я мог бы заставить эту страницу генерировать случайный код XXX и перенаправить на /create_company/?token=XXX. Когда я создаю компанию, я сохраняю информацию, которую она создала с помощью страницы с маркером XXX (например, я сохраняю ее в сеансе пользователя, так как нам не нужно сохранять эту информацию навсегда) и когда форма отправлена, если я знаю что компания уже была сгенерирована с использованием этого токена, я знаю, что пользователь использовал один и тот же экземпляр формы и должен был использовать кнопку «Назад», поскольку токен был бы другим, если бы он явно попросил другую компанию.

Что вы думаете? (Первоначально я думал, что должно быть более простое решение, так как это кажется немного более сложным для такой простой проблемы).

Answer 4

Это больше похоже на вопрос UX.

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

Укажите название, которое гласит: «Создайте компанию», например, и установите кнопку отправки в качестве «Создать компанию», которая поможет вашему пользователю с этим. Используйте уникальный идентификатор при создании объекта компании и передайте идентификатор обратно на тот же URL-адрес, чтобы выполнить обновление. Затем вы должны обновить свой заголовок и кнопку, которая сообщает пользователю, что они обновляются, а не создают.

В этом смысле я бы сказал, что лучше использовать более общий URL-адрес, например /company и /company?id=12345.

Вы также можете рассмотреть использование протокола Restful API, чтобы помочь вашему серверу идентифицировать операцию CRUD.http://www.restapitutorial.com/lessons/httpmethods.html

Answer 5

Вы также можете обращаться с ситуацией: manipulating the browser history при загрузке формы 2 и передать CompanyId сгенерированную заявку на отправку формы 1 с помощью строки запроса. Чтобы вы могли реально обновить компанию в качестве пользователя

Предположим, что Джон подает form1.html, сгенерирован и перенаправлен уникальный файл form1.html CompanyId «1001». Теперь на нагрузке form2 вы можете изменить историю браузера form1.html? CompanyID = 1001 с использованием

var stateObj = { foo: "bar" }; 
history.pushState(stateObj, "page 1", "form1.html?companyid=1001"); 

Теперь, когда пользователь нажимает кнопку назад и снова подает Form1. вы можете проверить companyid в querystring и обновить компанию.

Answer 6

Без «маршрутизации» части django трудно помочь. Я могу просто ответить на мой опыт от функции express.js-router:

• Вы можете указать сообщение в/компании, которое предназначено для новых пользователей.
• Вы можете указать другой маршрут для публикации в компании/компании /: companyid для меняющейся формы
• и в ответ от созданного сообщения вы можете перенаправить на другое место.

Answer 7

попробовать этот

<form autocomplete="off" ...></form> 

И еще один

Использование временных таблиц или сеанса для хранения данных формы Page 1. Если форма страницы 2 представлена ​​временными данными страницы 1, которая хранится в базе данных или в сеансе.

использовать отдельный ключ (скрытое поле) в оба странице 1 и странице 2.