Cara menyampaikan parameter dalam GET permintaan dengan jQuery


252

Bagaimana seharusnya saya meneruskan nilai string kueri dalam permintaan jQuery Ajax? Saat ini saya melakukannya sebagai berikut tetapi saya yakin ada cara yang lebih bersih yang tidak mengharuskan saya untuk menyandikan secara manual.

$.ajax({
    url: "ajax.aspx?ajaxid=4&UserID=" + UserID + "&EmailAddress=" + encodeURIComponent(EmailAddress),
    success: function(response) {
        //Do Something
    },
    error: function(xhr) {
        //Do Something to handle error
    }
});

Saya telah melihat contoh di mana parameter string kueri dilewatkan sebagai array tetapi contoh-contoh ini saya lihat tidak menggunakan $.ajax()model, sebaliknya mereka langsung menuju $.get(). Sebagai contoh:

$.get("ajax.aspx", { UserID: UserID , EmailAddress: EmailAddress } );

Saya lebih suka menggunakan format $ .ajax () karena sudah biasa (tidak ada alasan yang bagus - hanya preferensi pribadi).

Sunting 09/04/2013:

Setelah pertanyaan saya ditutup (sebagai "Terlalu Lokal") saya menemukan pertanyaan terkait (identik) - dengan 3 upvotes tidak kurang (Buruk saya karena tidak menemukannya di tempat pertama):

Menggunakan jquery untuk membuat POST, bagaimana cara memasok parameter 'data' dengan benar?

Ini menjawab pertanyaan saya dengan sempurna, saya menemukan bahwa melakukannya dengan cara ini jauh lebih mudah dibaca & saya tidak perlu menggunakan secara manual encodeURIComponent()di URL atau nilai-nilai DATA (yang saya temukan tidak jelas dalam jawaban bipen). Ini karena datanilai dikodekan secara otomatis melalui $.param()). Kalau-kalau ini bisa berguna bagi orang lain, ini adalah contoh saya pergi dengan:

$.ajax({
    url: "ajax.aspx?ajaxid=4",
    data: { 
        "VarA": VarA, 
        "VarB": VarB, 
        "VarC": VarC
    },
    cache: false,
    type: "POST",
    success: function(response) {

    },
    error: function(xhr) {

    }
});

$ .get hanyalah jalan pintas untuk $ .ajax
Denys Séguret

kecuali, Edit Anda 09/04/2013 adalah permintaan pos :-) tetapi ternyata berfungsi sama dengan GET.
commonpike

Jawaban:


307

Gunakan opsi data ajax. Anda dapat mengirim objek data ke server dengan dataopsi di ajax dan typeyang menentukan bagaimana Anda mengirimnya (salah satu POSTatau GET). Jenis standar adalah GETmetode

Coba ini

$.ajax({
  url: "ajax.aspx",
  type: "get", //send it through get method
  data: { 
    ajaxid: 4, 
    UserID: UserID, 
    EmailAddress: EmailAddress
  },
  success: function(response) {
    //Do Something
  },
  error: function(xhr) {
    //Do Something to handle error
  }
});

Dan Anda bisa mendapatkan datanya dengan (jika Anda menggunakan PHP)

 $_GET['ajaxid'] //gives 4
 $_GET['UserID'] //gives you the sent userid

Dalam aspx, saya percaya itu (mungkin salah)

 Request.QueryString["ajaxid"].ToString(); 

2
Anda tidak perlu encodeURIComponent. jquery akan melakukan ini untukmu.
Lane

2
@KlwWallace Tidak. Itu PHP (sisi server) tergantung pada bahasa servside yang Anda gunakan. Dalam PHP itulah cara kami mendapatkan nilai-nilai dari mendapatkan permintaan.
bipen

1
@ bipen. Diterima. Saya menghapus komentar saya agar tidak membingungkan siapa pun. Terima kasih.
Kirby L. Wallace

Anda perlu mengubah objek menjadi parameter GET dengan fungsi jQuery.param (), jadi gunakan jQuery yang harus Anda gunakan data:$.param({ajaxid: 4, UserID: UserID, EmailAddress: EmailAddress}), alih-alihdata: { ajaxid: 4, UserID: UserID, EmailAddress: EmailAddress }
Power Engineering

22

Masukkan params Anda di databagian ajaxpanggilan. Lihat dokumen . Seperti itu:

$.ajax({
    url: "/TestPage.aspx",
    data: {"first": "Manu","Last":"Sharma"},
    success: function(response) {
        //Do Something
    },
    error: function(xhr) {
        //Do Something to handle error
    }
});

10

Berikut ini sintaks menggunakan jQuery $.get

$.get(url, data, successCallback, datatype)

Jadi dalam kasus Anda, itu sama dengan,

var url = 'ajax.asp';
var data = { ajaxid: 4, UserID: UserID, EmailAddress: EmailAddress };
var datatype = 'jsonp';

function success(response) {
// do something here 
}

$.get('ajax.aspx', data, success, datatype)

Catatan $.get tidak memberi Anda kesempatan untuk mengatur penangan kesalahan. Tetapi ada beberapa cara untuk melakukannya baik menggunakan $ .ajaxSetup () , $ .ajaxError () atau merantai .failpada Anda $.getseperti di bawah ini

$.get(url, data, success, datatype)
 .fail(function(){
})

Alasan untuk menetapkan datatype sebagai 'jsonp' adalah karena masalah kebijakan asal browser yang sama, tetapi jika Anda membuat permintaan pada domain yang sama dengan javascript Anda di-host, Anda harus setuju dengan datatype diatur ke json.

Jika Anda tidak ingin menggunakan jquery yang $.getkemudian lihat dokumentasi untuk $.ajaxyang memungkinkan ruang untuk fleksibilitas yang lebih


4

Coba tambahkan ini:

$.ajax({
    url: "ajax.aspx",
    type:'get',
    data: {ajaxid:4, UserID: UserID , EmailAddress: encodeURIComponent(EmailAddress)},
    dataType: 'json',
    success: function(response) {
      //Do Something
    },
    error: function(xhr) {
    //Do Something to handle error
    }
});

Tergantung pada tipe data apa yang diharapkan, Anda dapat menetapkan html, json, script, xml


solusi Anda sangat membantu, tetapi bertanya-tanya bagaimana cara mendefinisikan variabel ( ID) sebelum meneruskannya sebagai parameter? Saya memiliki Q pada SO, stackoverflow.com/questions/41192531/… . Saya mengembangkan Q ini lebih jauh, di mana sekarang saya memanggil dialog jquery dan memanggil ajax untuk mengambil data dari mysql. Saya kehilangan tautan tentang cara mengambil ID unik yang terkait dengan setiap klik datapoint . Hargai jika Anda dapat membantu saya. Terima kasih
user5249203

1

Properti data memungkinkan Anda mengirim string. Pada kode sisi server Anda, terima sebagai nama argumen string "myVar" dan kemudian Anda dapat menguraikannya.

$.ajax({
    url: "ajax.aspx",
    data: [myVar = {id: 4, email: 'emailaddress', myArray: [1, 2, 3]}];
    success: function(response) {
    //Do Something
    },
    error: function(xhr) {
    //Do Something to handle error
    }
});

1
Mengapa kamu lakukan stringify? ajaxImplementasi jQuery menangani hal itu untuk Anda.
Steve

1

Punya masalah yang sama dengan yang saya tentukan datatetapi browser mengirim permintaan ke URL yang diakhiri [Object object].

Anda harus processDatamengatur ke true.

processData: true, // You should comment this out if is false or set to true

OMG, terima kasih. Setelah 4 jam mencari dan mencoba ini akhirnya memperbaiki masalah di sini :-)
Kim K.


-1

Parameter data metode ajax memungkinkan Anda mengirim data ke sisi server. Di sisi server Anda dapat meminta data. Lihat kode

var id=5;
$.ajax({
    type: "get",
    url: "url of server side script",
    data:{id:id},
    success: function(res){
        console.log(res);
    },
error:function(error)
{
console.log(error);
}
});

Di sisi server menerimanya menggunakan variabel $ _GET.

$_GET['id'];
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.