Nicht-Ajax-GET/POST mit jQuery (Plugin?)

Question

Dies ist eine jener Situationen, in denen ich das Gefühl, dass ich eine entscheidende Schlüsselwort bin fehlt die Antwort auf Google zu finden ...

Ich habe eine Tüte Parameter und ich möchte den Browser zu einer GET-URL mit den Parametern navigieren. jQuery Benutzer zu sein, ich weiß, dass wenn ich eine Ajax-Anforderung machen wollte, würde ich einfach tun:

$.getJSON(url, params, fn_handle_result); 

Aber manchmal will ich nicht Ajax verwenden. Ich möchte nur die Parameter einreichen und eine Seite zurückbekommen.

Jetzt weiß ich, ich kann die Parameter Schleife und manuell eine GET URL erstellen. Für POST kann ich dynamisch ein Formular erstellen, es mit Feldern füllen und senden. Aber ich bin sicher, dass jemand ein Plugin geschrieben hat, das das schon macht. Oder vielleicht habe ich etwas verpasst und du kannst es mit Core jQuery machen.

Also weiß jemand von solch einem Plugin?

EDIT: Im Grunde, was ich will, ist zu schreiben:

$.goTo(url, params); 

Und optional

$.goTo(url, params, "POST"); 

Answer 1

jQuery Plugin in IE8 funktioniert schien sehr gut zu funktionieren, bis ich es auf IE8 versucht. Ich musste diese leichte Änderung machen, um es auf IE zu arbeiten:

(function($) { 
    $.extend({ 
     getGo: function(url, params) { 
      document.location = url + '?' + $.param(params); 
     }, 
     postGo: function(url, params) { 
      var $form = $("<form>") 
       .attr("method", "post") 
       .attr("action", url); 
      $.each(params, function(name, value) { 
       $("<input type='hidden'>") 
        .attr("name", name) 
        .attr("value", value) 
        .appendTo($form); 
      }); 
      $form.appendTo("body"); 
      $form.submit(); 
     } 
    }); 
})(jQuery); 

Answer 2

Es ist von der Frage nicht klar, ob Sie eine zufällige Reihe von Werten haben Sie übergeben möchten auf der Querystring oder ist es Form Werte.

Für Formularwerte verwenden Sie einfach die .serialize Funktion, um die Querystring zu konstruieren.

beispiels

var qString = $('#formid').serialize(); 
document.location = 'someUrl' + '?' + serializedForm 

Wenn Sie eine zufällige Reihe von Werten haben, können Sie ein Objekt aus und verwenden Sie die .param Dienstprogramm Methode konstruieren.

beispiel

var params = { width:1680, height:1050 }; 
var str = jQuery.param(params); 
console.log(str) 
// prints width=1680&height=1050 
// document.location = 'someUrl' + '?' + str 

Answer 3

Die akzeptierte Antwort scheint nicht Ihren POST Bedarf zu decken, als document.location Einstellung immer in einer GET-Anforderung führen. Hier ist eine mögliche Lösung, obwohl ich bin mir nicht sicher jQuery erlaubt, den gesamten Inhalt der Seite wie folgt geladen:

$.post(url, params, function(data) { 
    $(document).html(data); 
}, "html"); 

Answer 4

Hier ist, was ich am Ende tun, mit der Spitze von redsquare:

(function($) { 
    $.extend({ 
     doGet: function(url, params) { 
      document.location = url + '?' + $.param(params); 
     }, 
     doPost: function(url, params) { 
      var $form = $("<form method='POST'>").attr("action", url); 
      $.each(params, function(name, value) { 
       $("<input type='hidden'>") 
        .attr("name", name) 
        .attr("value", value) 
        .appendTo($form); 
      }); 
      $form.appendTo("body"); 
      $form.submit(); 
     } 
    }); 
})(jQuery); 

Verbrauch:

$.doPost("/mail/send.php", { 
    subject: "test email", 
    body: "This is a test email sent with $.doPost" 
}); 

Jede Rückmeldung wäre willkommen.

Update: siehe Dustin Antwort für eine Version, die

Answer 5

Gute Arbeit itsadok!Wenn Sie eine unsichtbare Form es in versteckten DIV setzen wollen:

(function($) { 
    $.extend({ 
     doGet: function(url, params) { 
      document.location = url + '?' + $.param(params); 
     }, 
     doPost: function(url, params) { 
      var $div = $("<div>").css("display", "none"); 
      var $form = $("<form method='POST'>").attr("action", url); 
      $.each(params, function(name, value) { 
       $("<input type='hidden'>") 
        .attr("name", name) 
        .attr("value", value) 
        .appendTo($form); 
      }); 
      $form.appendTo($div); 
      $div.appendTo("body"); 
      $form.submit(); 
     } 
    }); 
})(jQuery); 

Answer 6

FYI für jedermann die doPost für Schienen 3 zu tun, müssen Sie in den CSRF-Token hinzuzufügen, nach dem Hinzufügen zur Antwort sollte das tun ...

var token = $('meta[name="csrf-token"]').attr('content'); 
$("<input name='authenticity_token' type='hidden' value='" + token + "'/>").appendTo($form); 

Answer 7

Dies ist ähnlich wie oben, außer es Array-Parameter übergeben werden, um MVC

(function($) { 
    $.extend({ 
     getGo: function(url, params, traditional) { 
      /// <summary> 
      ///  Perform a GET at url with specified params passed as part of the query string. 
      /// </summary> 
      /// <param name="url"></param> 
      /// <param name="params"></param> 
      /// <param name="traditional">Boolean: Specify true for traditional serialization.</param> 
      document.location = url + '?' + $.param(params, traditional); 
     }, 
     postGo: function (url, params) { 
      /// <summary> 
      ///  Perform a POST at url with the specified params as part of a form object. 
      ///  If a parameter is an array then it will submit it as multiple attributes so MVC will see it as an array 
      /// </summary> 
      /// <param name="url" type="string"></param> 
      /// <param name="params" type="Object"></param> 
      var $form = $("<form>").attr("method", "post").attr("action", url); 
      $.each(params, function (name, value) { 
       if (value.length != null && value.length > 0) { 
        for (var i = 0; i < value.length; i++) { 
         $("<input type='hidden'>").attr("name", name + '[' + i + ']').attr("value", value[i]).appendTo($form); 
        } 
       } 
       else { 
        $("<input type='hidden'>").attr("name", name).attr("value", value).appendTo($form); 
       } 
      }); 
      $form.appendTo("body"); 
      $form.submit(); 
     } 
    }); 
})(jQuery);