web-dev-qa-db-ja.com

jQueryを使用した非ajaxGET / POST（プラグイン？）

これは、Googleで答えを見つけるための重要なキーワードが不足していると感じる状況の1つです...

パラメータのバッグがあり、ブラウザでパラメータを使用してGETURLに移動できるようにします。 jQueryユーザーである私は、ajaxリクエストを作成したい場合は、次のようにするだけです。

$.getJSON(url, params, fn_handle_result);

しかし、時々私はajaxを使いたくありません。パラメータを送信してページを取り戻したいだけです。

これで、パラメーターをループして手動でGETURLを作成できることがわかりました。 POSTの場合、フォームを動的に作成し、フィールドを入力して送信できます。しかし、誰かがすでにこれを行うプラグインを書いていると確信しています。あるいは、何かが足りなかったので、コアjQueryでそれを行うことができます。

だから、誰かがそのようなプラグインを知っていますか？

編集：基本的に、私が欲しいのは書くことです：

$.goTo(url, params);

そしてオプションで

$.goTo(url, params, "POST");
javascriptjqueryjquery-plugins
34
itsadok

jQueryプラグインは、IE8で試すまではうまく機能しているようでした。 IEで動作させるには、このわずかな変更を加える必要がありました。

(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);
50
Dustin

これが、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);

使用法：

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

フィードバックは大歓迎です。

更新： IE8で動作するバージョンについては、dustinの回答を参照してください

20
itsadok

クエリ文字列に渡したい値がランダムにたくさんあるのか、それともフォームの値なのかは、質問からは明らかではありません。

フォーム値の場合は、 。serialize 関数を使用してクエリ文字列を作成します。

例えば

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

ランダムな値の束がある場合は、オブジェクトを作成して 。param ユーティリティメソッドを使用できます。

例えば

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

Rails 3のdoPostを実行している人のための参考までに、CSRFトークンを追加する必要があります。答えに次を追加すると、それが実行されます...

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

これは、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);
1
zlsmith86

お疲れ様でした！非表示のフォームが必要な場合は、非表示のDIVに入れます。

(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);
0
piper