jquery - soumettre un message de manière synchrone (pas ajax)

Question

J'ai une page (page 1) qui accepte les demandes de post, fait certaines choses et affiche des données à la fin.

d'une autre page (page 2), je veux rediriger vers page 1 quand un bouton est cliqué, d'envoyer bien sûr toutes les données pertinentes requises par page 1 via POST.

Je peux, bien sûr, utiliser le vieux hack d'avoir une forme invisible sur la page, en bourrant toutes les données dont j'ai besoin en utilisant jquery, juste après que l'utilisateur a cliqué sur le bouton, et submit() automatiquement. Mais cela semble lourd - il est beaucoup plus agréable d'utiliser une syntaxe similaire à $.post, plutôt que de commencer à manipuler html. $.post serait parfait, était-il réellement rediriger vers la page et ne pas faire la demande de façon asynchrone (je ne peux pas simplement rediriger vers page 1 après que le post ajaxy a terminé puisque page 1 a besoin des données pour afficher quelque chose).

Y a-t-il un moyen de faire ce que je veux avec jquery, ou est-ce que les formes invisibles sont la seule solution?

PS

Je sais qu'il ya d'autres façons alambiquées de réaliser ce que je veux, par exemple en utilisant $.post et juste planter le code HTML de répondre à la page que nous sommes actuellement, mais je veux juste savoir s'il y a un simple façon de procéder avec jquery

Answer 1

Je suppose que la réponse est qu'il n'y a pas de moyen simple. Pour une fonction générale qui ajoute cette fonctionnalité, voir la réponse de Greg W.

Answer 2

Si vous devez envoyer une requête POST, la forme invisible est l'une de vos meilleures options.

Si votre application fonctionne avec une requête GET, je voudrais encoder les données dans la chaîne de requête et faire un.

document.location.href =

Vous pouvez utiliser jQuery.serialize pour générer la chaîne de requête.

Answer 3

html:

<form id="myform" method="get" acction="page2"> 
    <!-- data --> 
</form> 

js:

$('#myform').bind('submit', function(ev) { 

    ev.stopPropagation(); 

    var ok = true; 
    //manipulate html and 'ok' 

    return ok; // if ok == false, don't execute post 


}); 

Answer 4

Cela m'a donné une idée pour une petite fonction jQuery pour imiter le comportement .post $ que vous avez décrit. Il utilise toujours des formes invisibles en arrière-plan, mais sa syntaxe est relativement claire et directe.

$(document).ready(function(){ 
    $('#myButton').PostIt('post.php', {foo:'bar', abc:'def', life:42}); 
    $('#myOtherButton').PostIt('post.php', dataObjectFromSomewhereElse); 
}); 

$.fn.PostIt = function(url, data){ 

    $(this).click(function(event){ 

     event.preventDefault(); 

     $('body').append($('<form/>', { 
      id: 'jQueryPostItForm', 
      method: 'POST', 
      action: url 
     })); 

     for(var i in data){ 
      $('#jQueryPostItForm').append($('<input/>', { 
      type: 'hidden', 
      name: i, 
      value: data[i] 
      })); 
     } 

     $('#jQueryPostItForm').submit(); 
    }); 
} 

Answer 5

J'adapté le code de Greg W à une fonction droite que vous pouvez appeler dans votre code:

function postIt(url, data){ 

    $('body').append($('<form/>', { 
     id: 'jQueryPostItForm', 
     method: 'POST', 
     action: url 
    })); 

    for(var i in data){ 
     $('#jQueryPostItForm').append($('<input/>', { 
     type: 'hidden', 
     name: i, 
     value: data[i] 
     })); 
    } 

    $('#jQueryPostItForm').submit(); 
}