Come passare i parametri nelle richieste GET con jQuery


252

Come devo passare i valori della stringa di query in una richiesta Ajax jQuery? Attualmente li faccio come segue, ma sono sicuro che esiste un modo più pulito che non richiede la codifica manuale.

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

Ho visto esempi in cui i parametri della stringa di query vengono passati come un array, ma questi esempi che ho visto non usano il $.ajax()modello, ma vanno direttamente a $.get(). Per esempio:

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

Preferisco usare il formato $ .ajax () perché è quello a cui sono abituato (nessuna ragione particolarmente buona - solo una preferenza personale).

Modifica 09/04/2013:

Dopo che la mia domanda è stata chiusa (come "Too Localized") ho trovato una domanda (identica) correlata - con 3 voti nondimeno (il mio male per non averla trovata in primo luogo):

Usando jquery per creare un POST, come fornire correttamente il parametro 'data'?

Questo ha risposto perfettamente alla mia domanda, ho scoperto che farlo in questo modo è molto più facile da leggere e non ho bisogno di usare manualmente encodeURIComponent()nell'URL o nei valori DATA (che è ciò che ho trovato poco chiaro nella risposta di bipen). Questo perché il datavalore viene codificato automaticamente tramite $.param()). Nel caso in cui questo possa essere utile a chiunque altro, questo è l'esempio con cui sono andato:

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

    },
    error: function(xhr) {

    }
});

$ .get è solo una scorciatoia per $ .ajax
Denys Séguret

tranne, la tua Modifica 09/04/2013 è una richiesta di post :-) ma apparentemente funziona come GET.
commonpike,

Risposte:


307

Usa l'opzione dati di ajax. È possibile inviare un oggetto dati al server tramite l' dataopzione in ajax e ciò typeche definisce come lo si sta inviando (o POSTo GET). Il tipo predefinito è GETmetodo

Prova questo

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

E puoi ottenere i dati da (se stai usando PHP)

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

In aspx, credo che sia (potrebbe essere sbagliato)

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

2
non hai bisogno encodeURIComponent. jquery farà questo per te.
Lane,

2
@KlwWallace Nope. Questo è PHP (lato server) dipende dal linguaggio servside che stai usando. In PHP è così che otteniamo i valori di get request.
bipen,

1
@bipen. Ricevuto. Ho cancellato il mio commento per non confondere nessuno. Grazie.
Kirby L. Wallace,

devi convertire l'oggetto in parametri GET con la funzione jQuery.param (), quindi usando jQuery dovresti usare data:$.param({ajaxid: 4, UserID: UserID, EmailAddress: EmailAddress}), invece didata: { ajaxid: 4, UserID: UserID, EmailAddress: EmailAddress }
Power Engineering,

22

Inserisci i tuoi parametri nella dataparte della ajaxchiamata. Vedi i documenti . Così:

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

10

Ecco la sintassi usando jQuery $.get

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

Quindi nel tuo caso, ciò equivarrebbe a,

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)

Nota $.get non offre l'opportunità di impostare un gestore errori. Ma ci sono diversi modi per farlo usando $ .ajaxSetup () , $ .ajaxError () o concatenando un .failtuo $.getcome sotto

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

Il motivo per impostare il tipo di dati come 'jsonp' è dovuto agli stessi problemi dei criteri di origine del browser, ma se si sta effettuando la richiesta sullo stesso dominio in cui è ospitato il proprio javascript, è necessario che il tipo di dati sia impostato su json.

Se non si desidera utilizzare il jquery $.getpoi vedere la documentazione per la $.ajaxquale lascia spazio per una maggiore flessibilità


4

Prova ad aggiungere questo:

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

Dipende dal tipo di dati previsto, è possibile assegnare html, json, script, xml


la tua soluzione è utile, ma ti stai chiedendo come definire la variabile ( ID) prima di passarla come parametro? Ho Q su SO, stackoverflow.com/questions/41192531/… . Ho progredito ulteriormente su questa Q, dove ora chiamo una finestra di dialogo jquery e chiamo ajax per recuperare i dati da mysql. Mi manca il collegamento su come recuperare l'ID univoco associato a ciascun clic del punto dati . Apprezzo se puoi aiutarmi. Grazie
user5249203 il

1

La proprietà data consente di inviare una stringa. Sul codice lato server, accettalo come nome argomento della stringa "myVar" e quindi puoi analizzarlo.

$.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
Perché dovresti farlo stringify? L' ajaximplementazione di jQuery si occupa di questo per te.
Steve,

1

Ho avuto lo stesso problema in cui ho specificato datama il browser stava inviando richieste all'URL che terminava [Object object].

Avresti dovuto processDataimpostare su true.

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

OMG, grazie. Dopo 4 ore di ricerche e tentativi, finalmente risolto un problema qui :-)
Kim K.


-1

Il parametro data del metodo ajax consente di inviare dati al lato server. Sul lato server è possibile richiedere i dati. Vedere il codice

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);
}
});

Sul lato server riceverlo utilizzando la variabile $ _GET.

$_GET['id'];
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.