melewatkan data posting dengan window.location.href

113

Saat menggunakan window.location.href, saya ingin meneruskan data POST ke halaman baru yang saya buka. apakah ini mungkin menggunakan JavaScript dan jQuery?

Brian
sumber
11
Pengaturan window.location.hrefmelakukan permintaan GET untuk URL baru, bukan POST.
Chetan S

Jawaban:

85

Menggunakan window.location.hrefitu tidak mungkin untuk mengirim permintaan POST.

Yang harus Anda lakukan adalah menyiapkan formtag dengan bidang data di dalamnya, menyetel actionatribut formulir ke URL dan methodatribut ke POST, lalu memanggil submitmetode pada formtag tersebut.

Guffa
sumber
Saya memiliki data yang berasal dari 3 bentuk berbeda dan saya mencoba mengirim semua 3 formulir ke halaman yang sama jadi saya telah mencoba membuat serial formulir dengan jQuery dan mengirimkannya dengan cara lain
Brian
@ Brian: Tidak bisakah Anda memasukkan semuanya menjadi satu form, jadi semuanya dikirim bersama secara otomatis?
Marcel Korpel
Satu bentuk ada di kotak dialog jQueryUI - jadi saya tidak bisa memasukkan semuanya.
Brian
12
Tarik semua nilainya, buat formulir secara dinamis dengan semua bidang di ketiga formulir, dan kirimkan formulir itu. Bentuknya bisa jadi tidak terlihat. Jangan gunakan metode JQuery AJAX, gunakan $("#myForm").submit(). Formulir - yang tidak akan terlihat, dan hanya digunakan untuk mengirimkan nilai dari kode sisi klien Anda, bukan masukan pengguna - tidak akan pernah ditampilkan atau digunakan, dan halaman akan disegarkan.
Matt Luongo
79

Tambahkan formulir ke HTML Anda, seperti ini:

<form style="display: none" action="/the/url" method="POST" id="form">
  <input type="hidden" id="var1" name="var1" value=""/>
  <input type="hidden" id="var2" name="var2" value=""/>
</form>

dan gunakan JQuery untuk mengisi nilai-nilai ini (tentu saja Anda juga dapat menggunakan javascript untuk melakukan hal serupa)

$("#var1").val(value1);
$("#var2").val(value2);

Lalu akhirnya kirimkan formulir

$("#form").submit();

di sisi server Anda seharusnya bisa mendapatkan data yang Anda kirim dengan memeriksa var1dan var2, cara melakukannya tergantung pada bahasa sisi server yang Anda gunakan.

Mohamed Khamis
sumber
ketika saya melakukan ini, browser saya dialihkan ke domain / undefined. Apa yang saya lakukan salah?
vigamage
9

Gunakan file ini: "jquery.redirect.js"

$("#btn_id").click(function(){
    $.redirect(http://localhost/test/test1.php,
        {
            user_name: "khan",
            city : "Meerut",
            country : "country"
        });
    });
});

lihat https://github.com/mgalante/jquery.redirect

Mohd Tauovir Khan
sumber
9

Seperti yang dikatakan di jawaban lain, tidak ada cara untuk membuat permintaan POST menggunakan window.location.href, untuk melakukannya Anda dapat membuat formulir dan mengirimkannya segera.

Anda dapat menggunakan fungsi ini:

function postForm(path, params, method) {
    method = method || 'post';

    var form = document.createElement('form');
    form.setAttribute('method', method);
    form.setAttribute('action', path);

    for (var key in params) {
        if (params.hasOwnProperty(key)) {
            var hiddenField = document.createElement('input');
            hiddenField.setAttribute('type', 'hidden');
            hiddenField.setAttribute('name', key);
            hiddenField.setAttribute('value', params[key]);

            form.appendChild(hiddenField);
        }
    }

    document.body.appendChild(form);
    form.submit();
}

postForm('mysite.com/form', {arg1: 'value1', arg2: 'value2'});

https://stackoverflow.com/a/133997/2965158

Aquajet
sumber
8

Jawaban singkatnya: tidak. window.location.hreftidak mampu melewatkan data POST.

Jawaban yang agak lebih memuaskan: Anda dapat menggunakan fungsi ini untuk mengkloning semua data formulir Anda dan mengirimkannya.

var submitMe = document.createElement("form");
submitMe.action = "YOUR_URL_HERE"; // Remember to change me
submitMe.method = "post";
submitMe.enctype = "multipart/form-data";
var nameJoiner = "_";
// ^ The string used to join form name and input name
//   so that you can differentiate between forms when
//   processing the data server-side.
submitMe.importFields = function(form){
    for(k in form.elements){
        if(input = form.elements[k]){
            if(input.type!="submit"&&
                     (input.nodeName=="INPUT"
                    ||input.nodeName=="TEXTAREA"
                    ||input.nodeName=="BUTTON"
                    ||input.nodeName=="SELECT")
                     ){
                var output = input.cloneNode(true);
                output.name = form.name + nameJoiner + input.name;
                this.appendChild(output);
            }
        }
    }
}
  • Lakukan submitMe.importFields(form_element);untuk masing-masing dari tiga formulir yang ingin Anda kirimkan.
  • Fungsi ini akan menambahkan setiap nama formulir ke nama input turunannya (Jika Anda memiliki <input name="email">in <form name="login">, nama yang dikirimkan akan menjadi login_name.
  • Anda dapat mengubah nameJoinervariabel menjadi sesuatu selain _agar tidak bertentangan dengan skema penamaan input Anda.
  • Setelah Anda mengimpor semua formulir yang diperlukan, lakukan submitMe.submit();
joequincy
sumber
4

sesederhana ini

$.post({url: "som_page.php", 
    data: { data1: value1, data2: value2 }
    ).done(function( data ) { 
        $( "body" ).html(data);
    });
});

Saya harus menyelesaikan ini untuk membuat kunci layar aplikasi saya di mana saya harus meneruskan data sensitif sebagai pengguna dan url tempat dia bekerja. Kemudian buat fungsi yang menjalankan kode ini

Sergio Roldan
sumber
1
Atau di done()set fungsiwindow.location.href
Chris Edwards
Ya @ChrisEdwards, dalam contoh saya, saya mencoba menggunakan data kembalian te dari posting jquery. Saya berharap ini akan bermanfaat bagi seseorang.
Sergio Roldan
3

Sudahkah Anda mempertimbangkan untuk hanya menggunakan Penyimpanan Lokal / Sesi? -atau- Bergantung pada kompleksitas dari apa yang Anda bangun; Anda bahkan dapat menggunakan indexDB.

catatan :

Local storagedan indexDBtidak aman - jadi Anda ingin menghindari penyimpanan data sensitif / pribadi (misalnya nama, alamat, alamat email, DOB, dll) di salah satu dari ini.

Session Storage adalah opsi yang lebih aman untuk apa pun yang sensitif, itu hanya dapat diakses oleh asal yang mengatur item dan juga membersihkan segera setelah browser / tab ditutup.

IndexDBsedikit lebih [tetapi tidak lebih] rumit dan 30MB noSQL databasedibangun di setiap browser (tetapi pada dasarnya bisa tidak terbatas jika pengguna memilih) -> lain kali Anda menggunakan dokumen Google, buka DevTools -> aplikasi -> IndexDB dan mencapai puncaknya. [peringatan spoiler: itu dienkripsi].

Berfokus pada Localdan Session Storage; keduanya sangat mudah digunakan:

// To Set 
sessionStorage.setItem( 'key' , 'value' );

// e.g.
sessionStorage.setItem( 'formData' , { name: "Mr Manager", company: "Bluth's Frozen Bananas", ...  } );    

// Get The Data 
const fromData = sessionStorage.getItem( 'key' );     

// e.g. (after navigating to next location)
const fromData = sessionStorage.getItem( 'formData' );

// Remove 
sessionStorage.removeItem( 'key' );

// Remove _all_ saved data sessionStorage
sessionStorage.clear( ); 

Jika sederhana bukanlah hal Anda -atau- mungkin Anda ingin keluar dari jalan raya dan mencoba pendekatan yang berbeda secara bersamaan -> Anda mungkin dapat menggunakan shared web worker... Anda tahu, hanya untuk iseng.

Down_with_opp
sumber
-4

Anda dapat menggunakan GET sebagai ganti pass, tetapi jangan gunakan metode ini untuk nilai-nilai penting,

function passIDto(IDval){    
window.location.href = "CustomerBasket.php?oridd=" +  IDval ;
}   

Di CustomerBasket.php

<?php
  $value = $_GET["oridd"];
  echo  $value;
?>
Kissa Mia
sumber
3
metode GET-nya tetapi pertanyaannya adalah metode POST sobat
Thamaraiselvam
@thamaraiselvam Kissa Mia mungkin belum mengutarakan jawabannya dengan baik tetapi benar tentang rute GET di sini. Pertanyaannya tidak terprogram untuk menggunakan metode POST - pengguna hanya bertanya apakah ada cara untuk mengambil data POST dan mengirimkannya melalui window.location.href. Dan pertama-tama Anda harus tahu bahwa Window.location.href ADALAH permintaan GET. Jawaban ini tidak salah - tidak akan mudah untuk menskalakan ke sejumlah besar bidang formulir, yang dikodekan sebagai QueryString. Namun, cara paling jelas untuk mengirim data melalui URL (yang dapat Anda ubah dengan window.location.href) adalah melalui parameter string kueri.
SylonZero
@Sylonero Anda tidak dapat melampirkan data POST ke permintaan GET. Mereka adalah jenis permintaan yang berbeda dan datanya terlihat berbeda dalam POST. Bagian penting dari spesifikasi HTTP cukup pendek.
Colin vH
@ColinvH Anda perlu membaca apa yang saya tulis lebih hati-hati. Versi TLDR: Anda dapat mengambil data yang akan digunakan untuk membuat POST dan menyandikannya sebagai parameter string kueri.
SylonZero