Jquery dapatkan parameter dapatkan. Parameter string (GET) dalam Javascript
Sekarang saya akan memberi tahu Anda bagaimana, dengan menggunakan js, kita dapat dengan mudah dan sederhana memanipulasi URL di browser tanpa memuat ulang halaman. Untuk melakukan ini kita akan menggunakan fungsi berikut: history.pushState(). Perlu diperhatikan fakta bahwa ini hanya berfungsi dengan browser yang mendukung HTML5! Ia memiliki 3 parameter yang pada dasarnya tidak dapat kita lewati apa pun, yaitu:
Sejarah.pushState("","","");
Pada metode pertama kita meneruskan status objek. Yang kedua tidak lebih dari Nama (omong-omong, hari ini diabaikan...). Dan parameter ketiga adalah URL itu sendiri.
Pada artikel ini kita hanya akan membahas yang ketiga.
Pada parameter URL, kita hanya perlu meneruskan string yang akan diganti dengan URL dari root situs.
Mari tambahkan URLURL kami sendiri mungkin yang paling sederhana: http://localhost/
Var newUrl = "/catalog/?login=myLogin&page=telepon";
sejarah.pushState("", "", newUrl); Setelah menjalankan skrip ini, Anda akan melihatnya bilah alamat
: localhost/katalog/?login=myLogin&page=telepon Tapi hati-hati. Karena URL kami telah berubah. Kemudian ketika Anda mengklik segarkan halaman, browser akan mencoba untuk menuju ke sana url baru
. Dan jika situs Anda tidak memiliki bagian /catalog/, Anda akan melihat kesalahan 404.Mari kita ubah URL yang ada
Contoh kedua akan ada di sini: localhost/catalog/samsung/?login=myLogin&page=phone
Var arUrl = jendela.lokasi.nama jalur.split("/");
var newUrl = "/bazar/"+arUrl+"/"+window.location.search; sejarah.pushState("", "", newUrl); Baris 1: Dapatkan jalur yang berhubungan dengan host dan gunakan split untuk membaginya menjadi sebuah array
Baris 2: Kami membuat URL baru yang terdiri dari kata "bazar" + kunci kedua dari array kami, yang berisi
kata samsung
, dan pada akhirnya kami menambahkan get kamiBaris 3 : Sebenarnya penggantinya sendiri.
Setelah menjalankan skrip ini, Anda akan melihat di bilah alamat: localhost/bazar/samsung/?login=myLogin&page=phone
Tentu saja, skrip ini adalah skrip demonstrasi dan mungkin yang paling sederhana. Setelah dijalankan, nilai parameter GET akan ditukar di bilah alamat browser. ?login=myLogin&page=phone akan berubah menjadi ?login=phone&page=myLogin. Nah, sekarang, secara berurutan.
Tentu barang ini Ini bisa saja dilakukan secara berbeda, tetapi dalam kerangka pelajaran kita akan melakukannya dengan cara yang paling sederhana.
Setelah menjalankan skrip, URL lama kami: localhost/catalog/samsung/?login=myLogin&page=phone
akan diganti dengan yang baru: localhost/catalog/samsung/?login=phone&page=myLogin
Sebenarnya, hanya itu yang ingin saya sampaikan kepada Anda hari ini. Tinggalkan komentar Anda dan jangan lupa untuk membagikan postingan ini di jejaring sosial.
Di hampir setiap situs Anda dapat melihat tautan yang berisi parameter setelah tanda "?", misalnya http://some.site.com/?id=1. Biasanya, pemrosesan parameter tersebut ditangani oleh skrip server, namun terkadang ada kebutuhan untuk mengetahui parameter ini di dalam JavaScript. Kisah hari ini akan memberi tahu Anda cara melakukan ini.
Apa yang disebut parameter GET? Sebenarnya, ini hanyalah string alamat, tetapi biasanya jika karakter “?” ditemukan di URL, maka semua karakter setelahnya adalah parameter. Penafsiran parameternya standar: pertama muncul nama variabel, lalu simbol “=”, lalu nilai variabel, variabel dipisahkan dengan simbol “&”. Anda dapat mengetahui alamat saat ini dalam JavaScript dengan membaca nilai window.location. Parsing baris setelah "?" Anda harus melakukannya dalam dua langkah: pertama memecahnya menjadi kelompok “variabel=nilai”, dan kemudian membaginya menjadi bagian-bagian komponennya.
Memisahkan string parameter menjadi lebih mudah karena JavaScript memiliki fungsi string khusus - split(), yang hasilnya akan berupa array string. Untuk menggunakannya, Anda harus membuat objek String terlebih dahulu fungsi ini adalah metode objek ini. Ini dilakukan secara sederhana:
someVar = String baru("beberapa teks");
Kemudian kami membagi string menjadi substring:
someArray = someVar.split("x");
Dimana “x” adalah simbol untuk membagi suatu string menjadi substring. Untuk menemukan karakter dalam string, Anda perlu menggunakan fungsi string lain - indexOf():
someVar.indexOf("?");
Pengenalan teori sudah selesai. Mari kita mulai berlatih. Saya memutuskan bahwa semua variabel GET harus disimpan dalam dua variabel terpisah array global: yang satu menyimpan nama, yang lain menyimpan nilai. Sayangnya JavaScript tidak didukung array asosiatif, jadi mari gunakan metode yang saya tunjukkan. Penting juga untuk menyimpan jumlah variabel GET. Tentu saja, Anda selalu dapat memanggil fungsi untuk menghitung ukuran array, tetapi secara gaya metode saya lebih baik. Jadi, variabel dan array global:
var_GET_Keys; // Untuk saat ini array kosong var _GET_Values; var_GET_Hitungan = 0; // belum ada elemen var _GET_Default = ""
Arti dari variabel _GET_Default akan dijelaskan nanti. Selanjutnya, saya akan membuat fungsi get_parseGET() yang akan mengurai URL dan membuat array dengan variabel. Pada awalnya, fungsi ini membuat objek String dan memeriksa keberadaan karakter "?"
l = dapatkan.panjang; dapatkan = dapatkan.substr(x+1, l-x);
Sekarang kita membagi baris menjadi kelompok “variabel=nilai”, menghitung jumlah total variabel dan bersiap untuk membuat array yang diperlukan:
l = dapatkan.split("&"); x = 0; _GET_Count = l.panjang; _GET_Keys = Array baru(_GET_Count); _GET_Values = Array baru(_GET_Count);
Dan terakhir, kami membagi grup yang dihasilkan menjadi dua array dengan nama variabel dan nilainya:
untuk(i di l) ( dapatkan = l[i].split("="); _GET_Keys[x] = dapatkan; _GET_Values[x] = dapatkan; x++; )
DI DALAM dalam contoh ini for .. dalam konstruksi digunakan, yang mengulangi semua elemen array. Sintaks konstruksi ini adalah:
for (masukkan array) ( // Tindakan Anda )
dimana key adalah nama kunci yang akan dipilih susunan. Di badan perulangan, elemen saat ini dapat diakses melalui array.
Fungsi kedua dari perpustakaan, get_fetchVar(key), memungkinkan Anda mengetahui nilai variabel GET tertentu. Ia bekerja hanya dengan mengulangi array _GET_Keys. Jika kunci tidak ditemukan, ia mengembalikan nilai _GET_Default yang disebutkan di atas. Saya ingin mencatat bahwa nilai _GET_Default TIDAK harus diubah di perpustakaan itu sendiri - jika perlu, ini dapat dilakukan dalam kode HTML Anda:
_GET_Default="tra la la";
Di akhir skrip ada panggilan ke get_parseGET(); dan di sinilah perpustakaan berakhir.
Baik Buruk
Di hampir setiap situs Anda dapat melihat tautan yang berisi parameter setelah tanda “?”, misalnya http://some.site.com/?id=1. Biasanya, memproses parameter seperti itu...
Ada beberapa metode untuk menghapus elemen array di JavaScript. Ini termasuk metode pop dan shift. metode pop menghapus elemen pertama dari array yang diberikan. Metode shift menghilangkan...
Sumber daya web modern tidak hanya memberikan informasi kepada pengunjung, tetapi juga berinteraksi dengannya. Untuk berinteraksi dengan pengguna, Anda perlu menerima beberapa informasi darinya. Ada beberapa metode untuk mengambil data, metode yang paling umum adalah GET dan POST. Oleh karena itu, PHP memiliki dukungan untuk metode transfer data GET dan POST. Mari kita lihat cara kerja metode ini.
Metode GET Data ditransfer menggunakan metode GET dengan menambahkannya ke URL skrip yang dipanggil untuk memproses informasi yang diterima. Untuk klarifikasi metode ini Ketik URL sumber daya di bilah alamat browser dan tambahkan tanda tanya (?) terlebih dahulu, lalu baris num=10. Misalnya
http://domain.ru/script.php?num=10
kalau sudah server lokal maka biasanya domainnya adalah localhost dan entri sebelumnya akan terlihat seperti itu
http://localhost/script.php?num=10
Dalam hal ini kita meneruskan parameter num sama dengan 10. Untuk menambahkan parameter berikut Script perlu menggunakan pembatas ampersand (&), misalnya
http://domain.ru/script.php?num=10&type=new&v=text
DI DALAM dalam hal ini kami meneruskan tiga parameter ke skrip: num dengan nilai 10, ketik dengan nilai "baru" dan v dengan nilai "teks".
Untuk mendapatkan parameter ini dalam skrip, Anda perlu menggunakan array bawaan $_GET $_GET["num"], $_GET["type"],$_GET["v"] . Elemen array ini akan berisi nilai parameter yang diteruskan. Untuk mendemonstrasikan contoh ini, buat file script.php dengan konten berikut
Memvalidasi metode GET di PHP
Dan sekarang panggil file ini di browser
http://path/script.php?num=10&type=new&v=text
dan Anda akan melihat parameter yang diteruskan di jendela browser. Tetapi jika Anda memanggil file ini tanpa parameter tambahan http://path/script.php , Anda akan melihat kesalahan yang diberikannya Penerjemah PHP, bahwa tidak ada elemen seperti itu dalam array $_GET. Lebih dari satu artikel dapat dikhususkan untuk memeriksa data yang diterima dari pengguna, jadi dalam artikel ini saya tidak akan menyentuh poin ini.
Seperti yang mungkin Anda pahami, memaksa pengguna untuk mengetik data di bilah alamat browser tidaklah baik dan sepenuhnya merepotkan. Oleh karena itu, untuk menerima data dari pengguna Anda perlu menggunakan formulir html. Mari kita menulis formulir html sederhana.
Masukkan nomor
Apakah Anda memiliki komputer?
Ya
TIDAK
Komentar Anda:
Izinkan saya memberi komentar sedikit pada formulir yang dibuat. Formulir dibuat dengan tag formulir. Bidang formulir dibuat menggunakan tag input, pilih, textarea (Anda dapat membaca lebih lanjut). Dalam tag formulir, atribut tindakan menentukan URL skrip yang akan menerima data formulir. Dalam kasus kami, kami menentukan file script.php yang ada. Atribut metode menentukan metode pengiriman data. Kami menentukan metode GET. Sekarang kita tahu ke file mana data formulir akan ditransfer, dan dengan cara apa, yang tersisa hanyalah mencari tahu di mana mencarinya?!
Data formulir ini akan diteruskan ke sumber daya web oleh browser dengan menambahkannya ke URL: pertama akan ada tanda tanya (?), kemudian parameter akan disajikan dipisahkan dengan tanda ampersand (&). Nama parameter akan diambil dari atribut nama, yang harus ditentukan untuk bidang formulir apa pun. Nilai parameter akan bergantung pada jenis bidang. Jika bidang tersebut adalah bidang teks, maka nilainya adalah teks yang dimasukkan oleh pengguna. Jika bidangnya berupa daftar, sekelompok tombol radio, atau kotak centang, maka nilai parameternya adalah atribut nilai elemen yang dipilih. Izinkan saya menjelaskan menggunakan formulir kami sebagai contoh. Jika pengguna memasukkan angka 10 pada kolom input, maka nama parameternya adalah num (nilai atribut nama tanda masukan), dan nilainya akan menjadi 10 (angka yang dimasukkan pengguna). Oleh karena itu, browser akan menghasilkan pasangan "num=10". Jika pengguna memilih opsi "Ya" dari daftar, maka nama parameter akan diketik (nilai atribut nama dari tag pilih) dan nilainya adalah ya (nilai atribut nilai opsi menandai). Oleh karena itu, browser akan menghasilkan pasangan “type=yes”.
Sekarang kita akan menempatkan formulir ini di halaman forma.php.
Formulir pengiriman data menggunakan metode GET dan PHP
Masukkan nomor
Apakah Anda memiliki komputer?
Ya
TIDAK
Komentar Anda:
Masukkan nilai apa pun di kolom formulir dan klik tombol "Kirim". Setelah mengklik tombol tersebut, browser akan membuka halaman lain (script.php) dan data yang Anda masukkan akan ditampilkan di jendela browser. Saya rasa alasannya jelas: browser akan meneruskan data ke skrip script.php, dan di dalam skrip, data ini akan diproses dan ditampilkan di layar.
Metode POST Sekarang mari kita lihat bagaimana metode POST bekerja.
Untuk mengirim data menggunakan metode POST, Anda perlu menggunakan formulir HTML. Seperti yang kita ingat, atribut metode bertanggung jawab atas metode pengiriman data formulir tanda formulir. Oleh karena itu, Anda perlu menentukan nilai POST dalam atribut metode pada tag formulir. Jika tidak, bentuknya bisa sama dengan metode GET. Mari kita ubah formulir kita, yang telah kita gunakan untuk mengirimkan data menggunakan metode GET, menjadi mengirimkan menggunakan metode POST.
Masukkan nomor
Apakah Anda memiliki komputer?
Ya
TIDAK
Komentar Anda:
Seperti yang Anda lihat, bentuknya tetap sama kecuali atribut metode dan tindakan. Data sekarang akan diteruskan ke skrip script_post.php. Mari kita letakkan form kita di halaman forma_post.php.
Formulir pengiriman data menggunakan metode POST dan PHP
Masukkan nomor
Apakah Anda memiliki komputer?
Ya
TIDAK
Komentar Anda:
Sekarang kita perlu menulis skrip yang akan memproses data formulir kita.
Untuk menerima data dari metode POST dalam skrip, Anda perlu menggunakan array $_POST bawaan. Kunci dari array ini akan menjadi nama parameternya. Dalam kasus kita, kita perlu menggunakan $_POST["num"], $_POST["type"],$_POST["v"] . Elemen array ini akan berisi nilai data yang ditransfer. Seperti yang Anda lihat, perbedaan dari penggunaan metode GET hanya dinyatakan dalam penggunaan array $_POST. Oleh karena itu, tidak akan sulit bagi kita untuk menulis file script_post.php:
Penyelidikan metode POSTING di PHP
Sekarang buka file forma_post.php di browser Anda. Masukkan beberapa data ke dalam kolom formulir dan klik tombol "Kirim". Sekarang, Anda mungkin memperhatikan perbedaan antara metode POST dan metode GET - data formulir tidak muncul di bilah alamat browser. Data tidak dapat dikirim menggunakan metode POST melalui bilah alamat browser. Ini adalah perbedaan yang signifikan untuk diingat.
Dalam PHP, terlepas dari bagaimana data dikirim - metode POST atau metode GET - Anda bisa mendapatkan data menggunakan array $_REQUEST. Perbandingan metode GET dan POST Saat menggunakan metode GET, data ditransfer dengan menambahkan ke URL. Dengan demikian, mereka akan terlihat oleh pengguna, yang tidak selalu baik dari sudut pandang keamanan. Selain itu, jumlah maksimum data yang ditransfer akan bergantung pada browser - pada jumlah karakter maksimum yang diizinkan di bilah alamat browser.
Saat menggunakan metode POST, data tidak akan terlihat oleh pengguna (tidak ditampilkan di bilah alamat browser). Oleh karena itu, mereka lebih aman, dan akibatnya, program yang memproses data ini lebih terlindungi dari segi keamanan. Selain itu, jumlah data yang dikirimkan praktis tidak terbatas.
Saat memilih metode transfer data, Anda perlu mempertimbangkan fitur-fitur di atas dan memilih metode yang paling sesuai.