¿Cómo puedo enviar datos POST y navegar con JQuery?

Question

En mi blog tengo un montón de bloques <pre> que contienen fragmentos de código.

Lo que quiero hacer es agregar un controlador .click() a todos los <pre> elementos de la página que enviará su contenido a otra página - llamémoslo viewcode.php - a través de POST.

Sé cómo enviar información a esta página usando $.ajax, no estoy seguro de cómo enviar la información y vaya a la página.

La idea es que los visitantes pueden hacer clic en <pre> que se desplazará a otra página que contiene el código en sí mismo para facilitar su lectura y copiar/pegar fácilmente.

Tengo la sensación de que la solución es absolutamente simple y probablemente obvia, simplemente no puedo pensar en ello.

Answer 1

No

seguro de que manejarlo de esta manera, probablemente simplemente abriría un cuadro de diálogo con el código en lugar de abandonar la página, pero podría manejarlo creando un formulario usando javascript y luego activando un envío en ese formulario en lugar de usar AJAX.

Uso de diálogos con jQuery UI:

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

crear un formulario

$('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

Puede usar un elemento oculto <form>. A continuación, establezca el atributo onclick() del <pre> para copiar el valor del <pre> en el formulario. Opcionalmente, puede configurar el atributo action para seleccionar la página en la que desea publicar la información. Finalmente, envíe ese formulario.

Sé que no es elegante, pero funcionará.

Answer 3

Si sus fragmentos de código están almacenados en alguna parte de una base de datos o archivos, le sugiero que vincule los fragmentos a una página donde obtenga el fragmento basado en algún identificador.

Si los fragmentos solo están contenidos en su html, y solo desea mostrarlos de una manera más limpia, no debería necesitar ninguna publicación Ajax. Es posible que desee utilizar un div vuelo estacionario o un plugin de jQuery, se acabó el que el pop y muestra una pieza limpia de código obtenido a partir del elemento previo, algo así como:

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

Answer 4

Sí, usted tiene que crear un formulario y enviarlo. Puede hacer todo tipo de cosas con ajax posts/gets, pero la única forma de navegar hasta un resultado de publicación es a través de una publicación de formulario real. He aquí la versión concisa de que:

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

Mi código hace esto: no

// 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();