jQuery-投稿データでリダイレクト

81

投稿データでリダイレクトするにはどうすればよいですか？

で新しいページに移動する方法は$_POST？

これを行う方法？それはどのように行われ、なぜそれが行われるのか

— y2k
ソース

6

私は実際にこの答えを聞いて非常に興味があります。

— スターリングアーチャー

1

POSTリクエストでWindowsの場所を設定することはできず、GETリクエストのみを設定することはできません。また、POSTリクエストをリダイレクトすることもできないため、通常の解決策は、必要なデータとアクション属性を使用してフォームを動的に作成し、送信することです。

— adeneo 2013

PHPタグを忘れてい$_POSTますか、それともjQueryに変数がありますか？

— Alex W

@ y2k、これはstackoverflow.com/q/8389646/632951と同じ質問ではありませんか？

— Pacerier 2015年

90

https://github.com/mgalante/jquery.redirect/blob/master/jquery.redirect.js：あなたがやろうとしていることをほぼ達成するJQueryプラグインがあります。

JQueryとjquery.redirect.min.jsプラグインを組み込んだ後、次のようなことを簡単に行うことができます。

$().redirect('demo.php', {'arg1': 'value1', 'arg2': 'value2'});

代わりに、新しいJQueryバージョンで次のコードを使用してください。

$.redirect('demo.php', {'arg1': 'value1', 'arg2': 'value2'});

お役に立てれば！

— ティムS
ソース

@TimS、そのリンクをチェックした後、postを使用して新しいページのデータを取得する方法がまだわかりません。

— Yehuda Gutstein 2013年

気にしないで、私はそれを理解し、それを機能させました。素晴らしい提案です！

— Yehuda Gutstein 2013年

— TommyT 2014年

19

jquery 2.1.3を使用し、正しい構文は$ .redirect（...）;でした。括弧なし。

— KDT 2015

したがって、別のURLにリダイレクトして別のURLに投稿することはできません>？

— TommyT 2015年

90

これは、jQueryを使用している限りどこにでも適用できる単純な小さな関数です。

var redirect = 'http://www.website.com/page?id=23231';
$.redirectPost(redirect, {x: 'example', y: 'abc'});

// jquery extend function
$.extend(
{
    redirectPost: function(location, args)
    {
        var form = '';
        $.each( args, function( key, value ) {
            form += '<input type="hidden" name="'+key+'" value="'+value+'">';
        });
        $('<form action="'+location+'" method="POST">'+form+'</form>').appendTo('body').submit();
    }
});

コメントによると、私は私の答えを拡張しました：

// jquery extend function
$.extend(
{
    redirectPost: function(location, args)
    {
        var form = $('<form></form>');
        form.attr("method", "post");
        form.attr("action", location);

        $.each( args, function( key, value ) {
            var field = $('<input></input>');

            field.attr("type", "hidden");
            field.attr("name", key);
            field.attr("value", value);

            form.append(field);
        });
        $(form).appendTo('body').submit();
    }
});

— tfont
ソース

9

.appendTo('body')モバイルデバイス用に追加...例：この回答に$('<form action="'+location+'" method="POST">'+form+'</form>').appendTo('body').submit();基づくアイデア

— CrandellWS 2014年

4

このソリューションは、受け入れられた回答imoよりもはるかに優れています。実装は簡単で、追加のライブラリをロードする必要はありません！

— Matej Svajger 2015年

3

これを使おうとすると、$。redirectPostは関数エラーではありません。

— ラフィキ2016

1

拡張機能を備えた素晴らしいアイデア。ただし、この実装では、値をvalue=""属性に入れる前に値をエスケープしません。したがって、値に引用符が含まれている場合、それは機能しません。関数自体は、ここからのように、引用を認識しているものに置き換えることができます：stackoverflow.com/a/5533477/1775065

— cronfy 2016年

8

いくつかの非表示の入力を含むフォームを作成し、jQueryを使用して送信しないのはなぜですか？動作するはずです:)

— kao3991
ソース

ドラッグアンドドロップファイルのアップロードでは機能しません。セキュリティ上の理由から、ファイル入力を割り当てることはできません。

— mlt 2016年

ユーザーをどこかにリダイレクトして、同じリクエストでファイルをアップロードさせたい場合は、どのような状況も考えられません。しかしもちろん、その通りです。この場合は機能しません。

— kao3991 2017年

@mltなぜそれが機能しないのかわかりません。ファイル入力には何も割り当てませんが、フォームと同時に投稿される他の入力非表示フィールドを使用します。

— danosaure 2017

3

ドキュメント/ウィンドウの準備ができる前に、jQueryに「extend」を追加します。

$.extend(
{
    redirectPost: function(location, args)
    {
        var form = '';
        $.each( args, function( key, value ) {

            form += '<input type="hidden" name="'+value.name+'" value="'+value.value+'">';
            form += '<input type="hidden" name="'+key+'" value="'+value.value+'">';
        });
        $('<form action="'+location+'" method="POST">'+form+'</form>').submit();
    }
});

使用する：

$.redirectPost("someurl.com", $("#SomeForm").serializeArray());

注：このメソッドはファイルを投稿できません。

— sagie212
ソース

2

これが最善の方法だと思います！

<html>
<body onload="document.getElementById('redirectForm').submit()">
<form id='redirectForm' method='POST' action='/done.html'>
<input type='hidden' name='status' value='complete'/>
<input type='hidden' name='id' value='0u812'/>
<input type='submit' value='Please Click Here To Continue'/>
</form>
</body>
</html>

これはほぼ瞬時に行われ、ユーザーには何も表示されません。

— プラシャントシン
ソース

2

これは投稿されたデータでリダイレクトされます

$(function() {
       $('<form action="url.php" method="post"><input type="hidden" name="name" value="value1"></input></form>').appendTo('body').submit().remove();
    });

    }

.submit（）関数はURLへの送信を自動的に
行います。.remove（）関数は送信後にフォームを強制終了します

— トビロバ
ソース

1

これは明確にする必要があります。サーバーは、別の場所にリダイレクトするPOSTを処理していますか？または、POSTを期待している別のページにregulatr GETリクエストをリダイレクトしたいですか？

どちらの場合でも、あなたができることは次のようなものです。

var f = $('<form>');
$('<input>').attr('name', '...').attr('value', '...');
//after all fields are added
f.submit();

ポップアップブロッカーに対処するために、「自動的にリダイレクトされない場合はここをクリックしてください」というリンクを作成することをお勧めします。

— LameCoder
ソース

1

上記の回答と似ていますが、書き方が異なります。

$.extend(
{
    redirectPost: function (location, args) {
        var form = $('<form>', { action: location, method: 'post' });
        $.each(args,
            function (key, value) {
                $(form).append(
                    $('<input>', { type: 'hidden', name: key, value: value })
                );
            });
        $(form).appendTo('body').submit();
    }
});

— アラン
ソース

0

送信する代わりにボタンを使用しないのはなぜですか。ボタンをクリックすると、ブラウザがリダイレクトする適切なURLを作成できます。

$("#button").click(function() {
   var url = 'site.com/process.php?';
   $('form input').each(function() {
       url += 'key=' + $(this).val() + "&";
   });
   // handle removal of last &.

   window.location.replace(url);
});

— ラドニーアーロンアルキザ
ソース

4

これにより、URLが変更されるため、通常のGETリクエストが発生します。元々の質問はPOSTリクエストを行うことでした。

— pjotr_dolphin 2014年

0

データとともに送信するこのjsonソリューションと一緒にjquery.redirect.min.jsプラグインをheadセクションに含めました

<script type="text/javascript">     
    $(function () {
     $('form').on('submit', function(e) {
       $.ajax({
        type: 'post',
        url: 'your_POST_URL',
        data: $('form').serialize(),
        success: function () {
         // now redirect
         $().redirect('your_POST_URL', {
          'input1': $("value1").val(), 
          'input2': $("value2").val(),
      'input3': $("value3").val()
       });
      }
   });
   e.preventDefault();
 });
 });
 </script>

次に、追加したフォームの直後

 $(function(){
     $( '#your_form_Id' ).submit();
    });

— kpatrickos
ソース

注：入力は、名前ではなく入力IDである必要があります。

— kpatrickos 2013年

0

window.locationをまったく使用せずに、非表示のmethod = POST action = "http://example.com/vote"フォームを作成して入力し、送信します。

または

$('#inset_form').html(
   '<form action="url" name="form" method="post" style="display:none;">
    <input type="text" name="name" value="' + value + '" /></form>');
document.forms['form'].submit();

— ダニエルケネディ
ソース

0

上記のソリューションをターゲットで「拡張」しました。何らかの理由で、投稿を_blankまたは別のフレームにリダイレクトする可能性が必要でした。

$.extend(
   {
       redirectPost: function(location, args, target = "_self")
       {
           var form = $('<form></form>');
           form.attr("method", "post");
           form.attr("action", location);
           form.attr("target", target);
           $.each( args, function( key, value ) {
               var field = $('<input></input>');
               field.attr("type", "hidden");
               field.attr("name", key);
               field.attr("value", value);
               form.append(field);
           });
           $(form).appendTo('body').submit();
       }
   });

— ThoCra
ソース