web-dev-qa-db-ja.com

JavaScript / jQueryを使用してPOSTデータをリダイレクトで送信しますか？

基本的に私がやりたいことは、私がwindow.locationを変更したときにPOSTデータを送信することです。これは、ユーザーがフォームを送信して新しいページに移動した場合と同じです。隠しURLを渡す必要があるため、このようにする必要があります。見た目上の理由から、単にURLをGETとしてURLに配置することはできません。

これは私が現在持っているものですが、POSTデータを送信しません。

if(user has not voted) {

    window.location = 'http://example.com/vote/' + Username;

}

jQuery.post()でPOSTデータを送信できることは知っていますが、新しいwindow.locationと共に送信する必要があります。

要約すると、私はPOSTを介してapi_urlの値をhttp://example.com/vote/に送信し、同時にユーザーを同じページに送信する必要があります。

今後の参考のために、結局次のようにしました。

if(user has not voted) {

    $('#inset_form').html('<form action="http://example.com/vote/' + Username + '" name="vote" method="post" style="display:none;"><input type="text" name="api_url" value="' + Return_URL + '" /></form>');

    document.forms['vote'].submit();

}
javascriptjquerypost
190
Josh Foskett

method=POST action="http://example.com/vote"を使用するのではなく、隠しwindow.locationフォームを作成して記入して送信します。

149
Kevin Reid

@ Kevin-Reidの答えによると、ここでは "jQueryを使って"特別にフォームを作成することでフォームオブジェクトに名前を付けて再度検索する必要がないようにする "次の作業をした"の代わりになります.

var url = 'http://example.com/vote/' + Username;
var form = $('<form action="' + url + '" method="post">' +
  '<input type="text" name="api_url" value="' + Return_URL + '" />' +
  '</form>');
$('body').append(form);
form.submit();
197
tardate

これは、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 ) {
            value = value.split('"').join('\"')
            form += '<input type="hidden" name="'+key+'" value="'+value+'">';
        });
        $('<form action="' + location + '" method="POST">' + form + '</form>').appendTo($(document.body)).submit();
    }
});
44
tfont

JQueryを使用している場合、POSTまたはGETメソッドで動作する リダイレクトプラグイン があります。隠し入力を含むフォームを作成して送信します。それを動かす方法の例：

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

注：オプションの3番目のパラメーターとして、メソッド・タイプGETまたはPOSTを渡すことができます。 POSTがデフォルトです。

24
Tom Sarduy

これがjQueryを使わないメソッドです。私はそれを使ってブックマークレットを作成しました。これはw3-html-validatorの現在のページをチェックします。

var f = document.createElement('form');
f.action='http://validator.w3.org/check';
f.method='POST';
f.target='_blank';

var i=document.createElement('input');
i.type='hidden';
i.name='fragment';
i.value='<!DOCTYPE html>'+document.documentElement.outerHTML;
f.appendChild(i);

document.body.appendChild(f);
f.submit();
17
olee

ここでの答えは混乱を招く可能性があるので、私は一緒に作業しているサンプルコードをお見せします。

あなたが参照しているJavaスクリプトwindows.location関数へのPOSTパラメータがないことに注意して始めてください。

だからあなたはする必要があります...

  1. POSTパラメータを使用して動的にフォームを作成します。

  2. 投稿する値をテキストボックスに動的に配置します。

  3. 動的に作成した送信フォームを起動します。

そして例として。

     //---------- make sure to link to your jQuery library ----//

<script type="text/javascript" >

    var form = $(document.createElement('form'));
    $(form).attr("action", "test2.php");
    $(form).attr("method", "POST");
    $(form).css("display", "none");

    var input_employee_name = $("<input>")
    .attr("type", "text")
    .attr("name", "employee_name")
    .val("Peter" );
    $(form).append($(input_employee_name));


    var input_salary = $("<input>")
    .attr("type", "text")
    .attr("name", "salary")
    .val("1000" );
    $(form).append($(input_salary));

    form.appendTo( document.body );
    $(form).submit();

</script>

すべてうまくいけば、test2.phpにリダイレクトされます。そしてPOSTを使用して、渡されたemployee_nameとsalaryの値を読み取ることができます。それはそれぞれPeterと1000になります。

Test2.phpでは、このようにして値を取得することができます。

$employee_name = $_POST['employee_name'];
$salary = $_POST['salary'];

言うまでもなく、渡された値をサニタイズするようにしてください。

11
webs

特定のURLにJavaScriptオブジェクトを投稿するための汎用関数。

function postAndRedirect(url, postData)
{
    var postFormStr = "<form method='POST' action='" + url + "'>\n";

    for (var key in postData)
    {
        if (postData.hasOwnProperty(key))
        {
            postFormStr += "<input type='hidden' name='" + key + "' value='" + postData[key] + "'></input>";
        }
    }

    postFormStr += "</form>";

    var formElement = $(postFormStr);

    $('body').append(formElement);
    $(formElement).submit();
}
7
therealrootuser

これはとても便利です。

var myRedirect = function(redirectUrl, arg, value) {
  var form = $('<form action="' + redirectUrl + '" method="post">' +
  '<input type="hidden" name="'+ arg +'" value="' + value + '"></input>' + '</form>');
  $('body').append(form);
  $(form).submit();
};

それからそれを使用します：

myRedirect("/yourRedirectingUrl", "arg", "argValue");
6
Ali John
var myRedirect = function(redirectUrl) {
var form = $('<form action="' + redirectUrl + '" method="post">' +
'<input type="hidden" name="parameter1" value="sample" />' +
'<input type="hidden" name="parameter2" value="Sample data 2" />' +
'</form>');
$('body').append(form);
$(form).submit();
};

http://www.prowebguru.com/2013/10/send-post-data-while-redirecting-with-jquery/ にコードが見つかりました。

私の仕事のためにこれと他の提案を試しに行く。

同じことをする他の方法はありますか？

1
Rajesh

Iframeからのリダイレクトでフォームを送信するためにtarget属性を使用できます。フォームのオープンタグは次のようになります。

method="post" action="http://some.url.com/form_action" target="_top"
0
joni jones