Как я могу отправить данные POST и перемещаться с помощью JQuery?

Question

В моем блоге много блоков <pre>, содержащих фрагменты кода.

Я хочу добавить обработчик .click() ко всем элементам <pre> на странице, которые будут отправлятьего содержимое на другую страницу - назовем это viewcode.php - через POST.

Я знаю, как отправить информацию на эту страницу, используя $.ajax, я просто не уверен, как отправить информацию и перейдите на страницу.

Идея состоит в том, что посетители могут щелкнуть <pre>, чтобы перейти на другую страницу, содержащую код, для удобства чтения и простого копирования / вставки.

У меня такое ощущение, что решение очень простое и, вероятно, очевидно, я просто не могу об этом думать.

Answer 1

Не уверен, что я справлюсь с этим таким образом, возможно, я бы просто открыл диалоговое окно с кодом, а не покинул страницу, но вы могли бы справиться с этим, построив форму с использованием javascript, затем инициировав отправку этой формы вместо использованияAJAX.

Использование диалогов с пользовательским интерфейсом jQuery:

 $('pre').on('click', function() {
      $('<div title="Code Preview"><p>' + $(this).text() + '</p></div>').dialog({
          ... set up dialog parameters ...
      });
 });

Создание формы

 $('pre').on('click', function() {
      var text = $(this).text();
      $('<form class="hidden-form" action="something.php" method="post" style="display: none;"><textarea name="code"></textarea></form>')
          .appendTo('body');
      $('[name="code"]').val(text);
      $('.hidden-form').submit();
 });

Answer 2

Вы можете использовать скрытый элемент <form>. Затем установите атрибут onclick() для <pre>, чтобы скопировать значение из <pre> в форму. При желании вы можете установить атрибут action, чтобы выбрать страницу, на которую вы хотите опубликовать информацию. Наконец, отправьте эту форму.

Я знаю, что это не элегантно, но это сработает.

Answer 3

Да, вы должны создать форму и отправить ее.С ajax posts / gets можно делать все что угодно, но единственный способ перейти к результату поста - через реальную форму поста.Вот краткая версия этого:

$('<form style="display: none;"/>').attr('action', action).html(html).appendTo('body').submit();

Мой код делает это:

// Navigate to Post Response, Convert first form values to query string params:
// Put the things that are too long (could exceed query string limit) into post values
var form = $('#myForm');
var actionWithoutQueryString = form[0].action.split("?")[0];
var action = actionWithoutQueryString + '?' + $.param(form.serializeArray());
var html = myArray.map(function(v, i) { return "<input name='MyList[" + i + "]' value='" + v + "'/>"; }).join("\n");
$('<form style="display: none;"/>').attr('action', action).html(html).appendTo('body').submit();

Answer 4

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

Если фрагменты содержатся только в вашемhtml, и вы просто хотите отобразить их более четко, вам не нужно публиковать ajax.Возможно, вы захотите использовать hover div или плагин jquery, который всплывает и показывает более чистый фрагмент кода, полученный из элемента pre, что-то вроде:

$('pre').click(function() {
   var code = $(this).html(); //this is the pre contents you  want to send
   $('#hoverDiv').html(code).show();
});