jQuery - Chuyển hướng với dữ liệu bài đăng

81

Làm cách nào để chuyển hướng với dữ liệu bài đăng?

Làm thế nào để chuyển sang trang mới với $_POST?

làm như thế nào? Nó được thực hiện như thế nào và tại sao nó phải được thực hiện

— y2k
nguồn

6

Tôi thực sự rất muốn nghe câu trả lời này.

— Sterling Archer

1

Không thể đặt vị trí cửa sổ với yêu cầu POST, chỉ yêu cầu GET và không thể chuyển hướng một yêu cầu POST, vì vậy giải pháp thông thường là tạo động một biểu mẫu với thuộc tính dữ liệu và hành động cần thiết và gửi nó.

— adeneo

Bạn quên thẻ PHP hoặc jQuery có một $_POSTbiến?

— Alex W

@ Y2K, không Đây có phải là sự cùng câu hỏi như stackoverflow.com/q/8389646/632951 ?

— Pacerier

90

Có một trình cắm thêm JQuery hoàn thành khá nhiều việc bạn đang cố gắng thực hiện: https://github.com/mgalante/jquery.redirect/blob/master/jquery.redirect.js .

Sau khi bao gồm JQuery và trình cắm thêm jquery.redirect.min.js, bạn có thể chỉ cần làm như sau:

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

Sử dụng mã sau trên các phiên bản JQuery mới hơn:

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

Hi vọng điêu nay co ich!

— Tim S
nguồn

@TimS, sau khi kiểm tra liên kết đó, tôi vẫn chưa rõ về cách bạn có thể lấy dữ liệu trong trang mới bằng cách sử dụng bài đăng.

— Yehuda Gutstein

đừng bận tâm, tôi đã tìm ra nó và làm cho nó hoạt động. Gợi ý tuyệt vời!

— Yehuda Gutstein

— TommyT

19

Sử dụng jquery 2.1.3 và cú pháp đúng với tôi là $ .redirect (...); Không có dấu ngoặc đơn.

— KDT

Vì vậy, chúng tôi không thể chuyển hướng đến một url khác và đăng lên một url khác>?

— TommyT

90

Đây là một hàm nhỏ đơn giản có thể áp dụng ở mọi nơi miễn là bạn đang sử dụng 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();
    }
});

Theo các nhận xét, tôi đã mở rộng câu trả lời của mình:

// 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
nguồn

9

thêm .appendTo('body')cho các thiết bị di động ... Ví dụ: $('<form action="'+location+'" method="POST">'+form+'</form>').appendTo('body').submit();ý tưởng dựa trên câu trả lời này

— CrandellWS

4

Giải pháp này tốt hơn nhiều so với câu trả lời được chấp nhận imo. Rất dễ thực hiện và không cần tải thêm thư viện!

— Matej Svajger,

3

Tôi nhận được $ .redirectPost không phải là một lỗi chức năng khi cố gắng sử dụng điều này.

— Rafiki

1

Ý tưởng tuyệt vời với mở rộng. Nhưng việc triển khai này không thoát khỏi các giá trị trước khi đưa chúng vào value=""thuộc tính. Vì vậy, nếu giá trị có chứa dấu ngoặc kép, nó không hoạt động. Chức năng chính nó có thể được thay thế bằng một trong đó là nhận thức về trích dẫn, như từ đây: stackoverflow.com/a/5533477/1775065

— cronfy

8

Tại sao không chỉ tạo một biểu mẫu với một số đầu vào ẩn và gửi nó bằng jQuery? Nên làm việc :)

— kao3991
nguồn

Sẽ không hoạt động với tải lên tệp drag'n'drop. Bạn không thể chỉ định đầu vào tệp vì lý do bảo mật.

— mlt

Tôi không thể nghĩ ra bất kỳ tình huống nào khi bạn có thể muốn chuyển hướng người dùng đến một nơi nào đó và yêu cầu họ tải lên một tệp có cùng yêu cầu. Nhưng tất nhiên - nó đúng, nó sẽ không hoạt động trong trường hợp này.

— kao3991

@mlt Tôi không chắc tại sao nó không hoạt động. Bạn không gán bất kỳ thứ gì cho đầu vào tệp, nhưng bạn sử dụng các trường ẩn đầu vào khác được đăng cùng lúc với biểu mẫu của bạn.

— Danosaure

3

Trước khi tài liệu / cửa sổ sẵn sàng, hãy thêm "extension" vào jQuery:

$.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();
    }
});

Sử dụng :

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

Lưu ý: phương pháp này không thể đăng tệp.

— sagie212
nguồn

2

Tôi nghĩ đây là cách tốt nhất để làm điều đó!

<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>

Điều này sẽ gần như ngay lập tức và người dùng sẽ không thấy gì cả!

— Prashant Singh
nguồn

2

Điều này sẽ chuyển hướng với dữ liệu đã đăng

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

    }

hàm .submit () tự động gửi đến url,
hàm .remove () sẽ hủy biểu mẫu sau khi gửi

— Tobiloba
nguồn

1

Điều này cần được làm rõ. Máy chủ của bạn có đang xử lý một BÀI ĐĂNG mà bạn muốn chuyển hướng đến một nơi khác không? Hoặc bạn đang muốn chuyển hướng yêu cầu GET của cơ quan quản lý đến một trang khác đang mong đợi ĐĂNG?

Trong cả hai trường hợp, những gì bạn có thể làm là như sau:

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

Có lẽ bạn nên tạo một liên kết có nội dung "nhấp vào đây nếu không được chuyển hướng tự động" để đối phó với các trình chặn cửa sổ bật lên.

— LameCoder
nguồn

1

Tương tự như câu trả lời trên, nhưng được viết khác.

$.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();
    }
});

— Alan
nguồn

0

tại sao không chỉ sử dụng một nút thay vì gửi. nhấp vào nút sẽ cho phép bạn tạo một url thích hợp để trình duyệt của bạn chuyển hướng đến.

$("#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);
});

— Radney Aaron Alquiza
nguồn

4

Điều này sẽ chỉ tạo ra một yêu cầu GET bình thường vì url đang thay đổi. Câu hỏi ban đầu là thực hiện yêu cầu ĐĂNG.

— pjotr_dolphin

0

Tôi đã bao gồm plugin jquery.redirect.min.js trong phần đầu cùng với giải pháp json này để gửi cùng với dữ liệu

<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>

Sau đó, ngay sau khi biểu mẫu tôi đã thêm

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

— kpatrickos
nguồn

Lưu ý: Đầu vào phải là đầu vào KHÔNG phải tên!

— kpatrickos

0

Tạo và điền vào biểu mẫu ẩn method = POST action = "http://example.com/vote" và gửi nó đi, thay vì sử dụng window.location.

hoặc là

$('#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();

— Daniel Kennedy
nguồn

0

"mở rộng" giải pháp trên với target. Vì lý do nào đó, tôi cần khả năng chuyển hướng bài đăng đến _blank hoặc một khung khác:

$.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
nguồn