Cara membaca parameter permintaan posting menggunakan JavaScript

92

Saya mencoba membaca parameter permintaan posting dari HTML saya. Saya dapat membaca parameter permintaan get menggunakan kode berikut di JavaScript.

$wnd.location.search

Tapi itu tidak berfungsi untuk permintaan posting. Adakah yang bisa memberi tahu saya cara membaca nilai parameter permintaan posting di HTML saya menggunakan JavaScript?

DonX
sumber

Jawaban:

184

Data POST adalah data yang ditangani sisi server . Dan Javascript ada di sisi klien. Jadi tidak mungkin Anda bisa membaca data kiriman menggunakan JavaScript.

rahul
sumber
69
Meskipun kesimpulannya benar (Anda tidak bisa mendapatkan data itu dari javascript), alasannya salah. Klien (browser) adalah yang pertama kali mengirimkan data POST ke server. Jadi, klien tahu betul data apa itu. Alasan sebenarnya adalah karena browser tidak membuat data tersebut tersedia untuk javascript (tetapi sebenarnya bisa).
Dapatkan Gratis
@GetFree: Apa gunanya apa yang disebut pengetahuan tentang variabel POST ini bagi pengembang web? Tidak ada pengembang web yang akan menulis skrip sisi klien yang didasarkan pada browser yang mungkin membuat data posting tersedia untuk JavaScript karena, seperti yang Anda tunjukkan, itu tidak pernah terjadi dalam praktiknya . Jadi, di dunia nyata , jawaban yang disajikan di sini benar, juga saya sendiri.
Platinum Azure
34
@PlatinumAzure, saya tidak yakin Anda mengerti maksudnya. Anda mengatakan data POST ada di server, dan karena javascript berjalan di klien, tidak mungkin JS dapat mengakses data itu. Itu salah, data POST ada di klien dan server dan alasan mengapa JS tidak dapat mengakses data itu hanya karena klien (browser) tidak membuatnya tersedia untuk JS. Sesimpel itu.
Dapatkan Gratis
13
@PlatinumAzure, Ya, itu tidak dapat dilakukan untuk alasan apa pun. Tetapi jika Anda akan menjelaskan apa alasannya, pastikan itu alasan yang benar. Penjelasan Anda mengapa itu tidak mungkin salah, itulah intinya.
Dapatkan Gratis
10
Karena browser mendapatkan hal-hal seperti aplikasi web, aplikasi berjalan (seringkali) 100 persen di browser (tidak ada server, selain file hosting), itu akan menjadi kebutuhan alami untuk dapat menerima potongan data yang lebih besar. Ada batasan pada ukuran string kueri (metode GET) (pikirkan 4K), jadi kemampuan untuk membaca potongan data POSTED yang lebih besar dari javascript akan menjadi ide bagus IMHO.
Netsi1964
26

Sepotong kecil PHP untuk membuat server mengisi variabel JavaScript cepat dan mudah:

var my_javascript_variable = <?php echo json_encode($_POST['my_post'] ?? null) ?>;

Kemudian akses saja variabel JavaScript dengan cara biasa.

Perhatikan bahwa tidak ada jaminan data atau jenis data tertentu akan diposting kecuali Anda mencentang - semua kolom masukan adalah saran, bukan jaminan.

Roger
sumber
12
Hati-hati untuk menyela / menambahkan tanda kutip / dll. ke data POST Anda jika Anda menggunakan rute ini. Alternatifnya adalah dengan menggunakan json_encode (), yang akan bekerja untuk hampir semua tipe data. Contoh: abeautifulsite.net/passing-data-from-php-to-javascript
claviska
Inilah yang saya sebut berpikir di luar kotak.
I.Am.A.Guy
Ini adalah cara termudah untuk melakukan ini dengan pasti. Ini bekerja untuk saya di wordpress dengan membuat halaman tema baru dan cukup mengekspos data posting di tingkat jendela seperti window.my_prefix_post_data = <? Php echo $ _POST ['my_post']?>; dan kemudian mengakses data posting dari ruang lingkup apa pun dengan mudah dengan cara itu. Ini tidak akan direkomendasikan untuk situs dengan banyak data kiriman sensitif yang masuk sepanjang waktu, tetapi untuk cakupan halaman / situs kami, ini berfungsi dengan baik.
OG Sean
2
ini tidak layak, mungkin ada masalah pelarian karakter.
MathieuAuclair
1
Diretas, pasti. Jangan gunakan metode di atas tanpa melarikan diri.
reggie
10

JavaScript adalah bahasa skrip sisi klien, yang berarti semua kode dijalankan di mesin pengguna web. Variabel POST, di sisi lain, pergi ke server dan berada di sana. Browser tidak menyediakan variabel tersebut ke lingkungan JavaScript, dan pengembang pun tidak boleh mengharapkan variabel tersebut secara ajaib ada di sana.

Karena browser melarang JavaScript mengakses data POST, sangat tidak mungkin untuk membaca variabel POST tanpa aktor luar seperti PHP yang menggemakan nilai POST ke dalam variabel skrip atau ekstensi / addon yang menangkap nilai POST saat transit. Variabel GET tersedia melalui solusi karena berada di URL yang dapat diurai oleh mesin klien.

Platinum Azure
sumber
3
Saya sangat tidak setuju dengan -1 Anda. Tidak ada tempat di OP apakah pertanyaan menentukan AJAX, sehingga membiarkan kemungkinan klik tautan dan pengiriman formulir tidak dilakukan oleh JavaScript. Yang terakhir ini secara khusus adalah contoh di mana variabel POST ada tetapi tidak tersedia di sisi klien, kecuali jika respons server dibuat oleh skrip dan skrip memilih untuk menggemakan nilai variabel POST ke dalam kode JS. Jika saya bisa -1 komentar Anda, saya akan.
Platinum Azure
2
Saya tidak berbicara tentang AJAX. Argumen saya mengacu pada segala bentuk permintaan POST. Browser mengetahui setiap parameter yang dikirim sebagai bagian dari permintaan HTTP, yang meliputi, antara lain, parameter URL dan POST. Beberapa dari parameter tersebut tersedia untuk javascript yang lainnya tidak. Ini hanyalah batasan yang diberlakukan oleh browser, itu bisa memberikan akses ke parameter POST dari JS dengan sangat baik, tetapi tidak, itu kebenaran yang sederhana.
Dapatkan Gratis
1
Anda tidak mengerti maksud saya. Tidak ada yang akan menulis JavaScript dengan harapan variabel POST tersedia kecuali server secara eksplisit menyediakannya. Jika server tidak menyediakannya, maka sejauh pengembang web yang menulis kode JavaScript diperhatikan, mereka mungkin juga tidak berada di sisi klien sama sekali.
Platinum Azure
3
Penjelasan saya tidak lengkap, tidak salah. Saya telah mengedit jawaban saya sehingga Anda pun harus bahagia. Jika tidak, maka alih-alih memberi saya -1 dan komentar sinis, edit sendiri.
Platinum Azure
1
Yang saya maksud adalah, server tidak mengekspos mereka ke klien sebagai data GET, melainkan klien dapat mengurai ulang URL untuk mereka. Data POST, di sisi lain, tidak akan ada di URL. Senang mengubah bahasa jika Anda suka, tetapi klaim tersebut tidak dalam sengketa.
Platinum Azure
9

Gunakan sessionStorage!

$(function(){
    $('form').submit{
       document.sessionStorage["form-data"] =  $('this').serialize();
       document.location.href = 'another-page.html';
    }
});

Di another-page.html:

var formData = document.sessionStorage["form-data"];

Tautan referensi - https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

Alexandre Parpinelli
sumber
Salah ketik: sumbit.
Alejandro Salamanca Mazuelo
Bagaimana jika permintaan posting berasal dari subdomain atau domain lain? Konsepsi rusak.
tidak ditentukan
Seharusnyaform.on('submit',function(){document.sessionStorage["form-data"] = $('this').serialize();window.location.href = 'another-page.html';})
Justin Liu
@ZefirZdravkov Anda bisa menetapkan cookie dengan samesite = Nonedan Securesehingga krom memungkinkan penggunaan itu.
Justin Liu
6

Mengapa tidak menggunakan localStorage atau cara lain untuk mengatur nilai yang ingin Anda teruskan?

Dengan begitu Anda memiliki akses ke sana dari mana saja!

Di mana saja yang saya maksud dalam domain / konteks tertentu

Ian Mbae
sumber
2
mengapa tidak hanya kue sederhana?
jj_
1
Bagaimana jika permintaan posting berasal dari subdomain atau domain lain? Konsepsi rusak.
tidak ditentukan
@ZefirZdravkov, meskipun saya setuju dengan Anda tentang adanya batasan yang diberikan, batasan tersebut ada karena penerapan keamanan berbasis browser. Saya hanya bisa membayangkan kengerian tanpa batas jika itu adalah skenario 'situs mana pun dapat membaca konten lain'.
Ian Mbae
@Ian Situs mana pun sebenarnya dapat membaca konten orang lain melalui CURL atau Ajax. Jika merujuk ke 'penyimpanan lokal situs lain', maka, ya, itu akan sangat menjijikkan. Yang saya katakan hanyalah jawaban ini hanya akan berfungsi jika Anda menerima / mengirim permintaan POST ke domain ini saja. Misalnya, permintaan POST dari cloudianos.comtidak akan mencapai api.cloudianos.comJavaScript, karena keduanya tidak berbagi sama localStorage.
tidak ditentukan
2

Anda dapat membaca parameter permintaan posting dengan jQuery-PostCapture ( @ ssut / jQuery-PostCapture ).

Plugin PostCapture terdiri dari beberapa trik.

Saat Anda mengklik tombol kirim, onsubmitacara akan dikirim.

Pada saat itu, PostCapture akan membuat serialisasi data formulir dan disimpan ke html5 localStorage (jika tersedia) atau penyimpanan cookie.

ssut
sumber
Ini hanya akan berfungsi untuk pengiriman posting antara domain yang sama (subdomain juga tidak berfungsi)
tidak ditentukan
1

POST adalah apa yang dikirimkan browser dari klien (broswer Anda) ke server web. Data posting dikirim ke server melalui header http, dan hanya tersedia di ujung server atau di antara jalur (contoh: server proxy) dari klien (browser Anda) ke server web. Jadi tidak dapat ditangani dari skrip sisi klien seperti JavaScript. Anda perlu menanganinya melalui skrip sisi server seperti CGI, PHP, Java, dll. Jika Anda masih perlu menulis dalam JavaScript, Anda harus memiliki server web yang memahami dan menjalankan JavaScript di server Anda seperti Node.js

kiranvj
sumber
1

Jika Anda bekerja dengan Java / REST API, solusinya mudah. Di halaman JSP, Anda dapat melakukan hal berikut:

    <%
    String action = request.getParameter("action");
    String postData = request.getParameter("dataInput");
    %>
    <script>
        var doAction = "<% out.print(action); %>";
        var postData = "<% out.print(postData); %>";
        window.alert(doAction + " " + postData);
    </script>
pengguna3260912
sumber
1
<script>
<?php
if($_POST) { // Check to make sure params have been sent via POST
  foreach($_POST as $field => $value) { // Go through each POST param and output as JavaScript variable
    $val = json_encode($value); // Escape value
    $vars .= "var $field = $val;\n";
  }
  echo "<script>\n$vars</script>\n";
}
?>
</script>

Atau gunakan untuk memasukkannya ke dalam kamus yang dapat diambil oleh suatu fungsi:

<script>
<?php
if($_POST) {
  $vars = array();
  foreach($_POST as $field => $value) {
    array_push($vars,"$field:".json_encode($value)); // Push to $vars array so we can just implode() it, escape value
  }
  echo "<script>var post = {".implode(", ",$vars)."}</script>\n"; // Implode array, javascript will interpret as dictionary
}
?>
</script>

Kemudian di JavaScript:

var myText = post['text'];

// Or use a function instead if you want to do stuff to it first
function Post(variable) {
  // do stuff to variable before returning...
  var thisVar = post[variable];
  return thisVar;
}

Ini hanya sebuah contoh dan tidak boleh digunakan untuk setiap data sensitif seperti password, dll Metode POST ada karena suatu alasan; untuk mengirim data dengan aman ke backend, sehingga akan menggagalkan tujuan.

Tetapi jika Anda hanya membutuhkan sekumpulan data formulir non-sensitif untuk pergi ke halaman berikutnya tanpa /page?blah=value&bleh=value&blahbleh=valuedi url Anda, ini akan membuat url lebih bersih dan JavaScript Anda dapat segera berinteraksi dengan data POST Anda.

internetgho5t
sumber
1

Saya memiliki kode sederhana untuk membuatnya:

Di index.php Anda:

<input id="first_post_data" type="hidden" value="<?= $_POST['first_param']; ?>"/>

Di main.js Anda:

let my_first_post_param = $("#first_post_data").val();

Jadi ketika Anda akan memasukkan main.js di index.php ( <script type="text/javascript" src="./main.js"></script>) Anda bisa mendapatkan nilai input tersembunyi Anda yang berisi data posting Anda.

Louis Hervé
sumber
0

Anda dapat 'json_encode' untuk pertama kali menyandikan variabel posting Anda melalui PHP. Kemudian buat objek JS (larik) dari variabel posting yang dikodekan JSON. Kemudian gunakan loop JavaScript untuk memanipulasi variabel tersebut ... Seperti - dalam contoh di bawah ini - untuk mengisi formulir HTML:

<script>

    <?php $post_vars_json_encode =  json_encode($this->input->post()); ?>

    // SET POST VALUES OBJECT/ARRAY
    var post_value_Arr = <?php echo $post_vars_json_encode; ?>;// creates a JS object with your post variables
    console.log(post_value_Arr);

    // POPULATE FIELDS BASED ON POST VALUES
    for(var key in post_value_Arr){// Loop post variables array

        if(document.getElementById(key)){// Field Exists
            console.log("found post_value_Arr key form field = "+key);
            document.getElementById(key).value = post_value_Arr[key];
        }
    }


</script>
TV-C-15
sumber
0

Salah satu opsinya adalah menyetel cookie di PHP.

Misalnya: cookie bernama tidak valid dengan nilai $invalidkedaluwarsa dalam 1 hari:

setcookie('invalid', $invalid, time() + 60 * 60 * 24);

Kemudian baca kembali di JS (menggunakan plugin JS Cookie ):

var invalid = Cookies.get('invalid');

if(invalid !== undefined) {
    Cookies.remove('invalid');
}

Anda sekarang dapat mengakses nilai dari invalidvariabel di JavaScript.

Danny Beckett
sumber
0

Itu tergantung dari apa yang Anda definisikan sebagai JavaScript. Saat ini kami memiliki JS di program sisi server seperti NodeJS. Ini adalah JavaScript yang sama persis dengan yang Anda kodekan di browser Anda, kecuali sebagai bahasa server. Jadi Anda dapat melakukan sesuatu seperti ini: ( Kode oleh Casey Chu: https://stackoverflow.com/a/4310087/5698805 )

var qs = require('querystring');

function (request, response) {
    if (request.method == 'POST') {
        var body = '';

        request.on('data', function (data) {
            body += data;

            // Too much POST data, kill the connection!
            // 1e6 === 1 * Math.pow(10, 6) === 1 * 1000000 ~~~ 1MB
            if (body.length > 1e6)
                request.connection.destroy();
        });

        request.on('end', function () {
            var post = qs.parse(body);
            // use post['blah'], etc.
        });
    }
}

Dan dari situ digunakan post['key'] = newVal;dll ...

William R.
sumber
-1

Variabel POST hanya tersedia untuk browser jika browser yang sama mengirimkannya terlebih dahulu. Jika formulir situs web lain dikirimkan melalui POST ke URL lain, browser tidak akan melihat data POST masuk.

SITUS A: memiliki formulir kirim ke URL eksternal (situs B) menggunakan POST SITUS B: akan menerima pengunjung tetapi hanya dengan variabel GET

Chris Denman
sumber
-1
function getParameterByName(name, url) {
            if (!url) url = window.location.href;
            name = name.replace(/[\[\]]/g, "\\$&");
            var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
                results = regex.exec(url);
            if (!results) return null;
            if (!results[2]) return '';
            return decodeURIComponent(results[2].replace(/\+/g, " "));
        }
var formObj = document.getElementById("pageID");
formObj.response_order_id.value = getParameterByName("name");
le cuong
sumber
Ini adalah variabel GET, OP meminta var POST secara khusus dan mencatat bahwa dia sudah memiliki variabel GET dengan mudah.
OG Sean
-3
$(function(){
    $('form').sumbit{
        $('this').serialize();
    }
});

Di jQuery, kode di atas akan memberi Anda string URL dengan parameter POST di URL. Bukan tidak mungkin untuk mengekstrak parameter POST.

Untuk menggunakan jQuery , Anda perlu menyertakan perpustakaan jQuery. Gunakan yang berikut untuk itu:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
Kelinci
sumber
4
Hal ini hanya akan mendapatkan parameter POST pada halaman di mana bentuk sedang disampaikan dari . Tampaknya asumsi yang aman OP ingin mendapatkan parameter POST di halaman formulir tersebut diserahkan ke . Itu tidak mungkin dilakukan.
John Washam
-3

Kita bisa mengumpulkan form params yang dikirimkan menggunakan POST dengan menggunakan konsep serialize .

Coba ini:

$('form').serialize(); 

Cukup lampirkan itu peringatan, ini akan menampilkan semua parameter termasuk tersembunyi.

praveen
sumber
-4
<head><script>var xxx = ${params.xxx}</script></head>

Menggunakan ekspresi EL $ {param.xxx} in <head>untuk mendapatkan params dari metode posting, dan pastikan file js disertakan setelahnya <head>sehingga Anda dapat menangani parameter seperti 'xxx' secara langsung di file js Anda.

MikeMiller
sumber